fix(a11y): use empty alt attribute for decorative images in Orange …

…navbar and documentation (#2690)

- Orange navbar: revised markup to utilize an empty `alt` attribute and eliminate the `role="img"` (for placeholder avatar images)
- Docs: use an empty `alt` for decorative images in the Vite, webpack, and Parcel guides, but also in the homepage Orange Design System section

---------

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

site/content/docs/5.3/components/orange-navbar.md

@@ -202,7 +202,7 @@ An additional navbar (with text or icon items) can be added on the right of the
  </li>
  <li class="nav-item">
  <a href="#" class="nav-link nav-icon">
- <img src="/docs/{{<param docs_version>}}/assets/img/navbar-contact.png" width="25" height="25" role="img" alt="User" loading="lazy">
+ <img src="/docs/{{<param docs_version>}}/assets/img/navbar-contact.png" width="25" height="25" alt="" loading="lazy">
  <span class="visually-hidden">My account</span>
  </a>
  </li>

site/content/docs/5.3/dark-mode.md

@@ -4072,7 +4072,7 @@ sitemap:
  </li>
  <li class="nav-item">
  <a href="#" class="nav-link nav-icon">
- <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+ <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="" loading="lazy" width="25" height="25">
  <span class="visually-hidden">My account</span>
  </a>
  </li>
@@ -4160,7 +4160,7 @@ sitemap:
  </li>
  <li class="nav-item">
  <a href="#" class="nav-link nav-icon">
- <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+ <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="" loading="lazy" width="25" height="25">
  <span class="visually-hidden">My account</span>
  </a>
  </li>
@@ -4248,7 +4248,7 @@ sitemap:
  </li>
  <li class="nav-item">
  <a href="#" class="nav-link nav-icon">
- <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+ <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="" loading="lazy" width="25" height="25">
  <span class="visually-hidden">My account</span>
  </a>
  </li>
@@ -4336,7 +4336,7 @@ sitemap:
  </li>
  <li class="nav-item">
  <a href="#" class="nav-link nav-icon">
- <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+ <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="" loading="lazy" width="25" height="25">
  <span class="visually-hidden">My account</span>
  </a>
  </li>
@@ -4424,7 +4424,7 @@ sitemap:
  </li>
  <li class="nav-item">
  <a href="#" class="nav-link nav-icon">
- <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+ <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="" loading="lazy" width="25" height="25">
  <span class="visually-hidden">My account</span>
  </a>
  </li>

site/content/docs/5.3/getting-started/parcel.md

@@ -10,7 +10,7 @@ thumbnail: guides/parcel-dev-server-boosted.png
 ---
 
 <div class="d-flex justify-content-center">
- <img class="d-flex" src="/docs/{{< param docs_version >}}/assets/img/parcel.png" alt="Parcel logo" loading="lazy">
+ <img class="d-flex" src="/docs/{{< param docs_version >}}/assets/img/parcel.png" alt="" loading="lazy">
 </div>
 
 {{< callout >}}

site/content/docs/5.3/getting-started/vite.md

@@ -10,7 +10,7 @@ thumbnail: guides/vite-dev-server-boosted.png
 ---
 
 <div class="d-flex justify-content-center">
- <img class="d-flex" src="/docs/{{< param docs_version >}}/assets/img/vite.svg" alt="Vite logo" width="145" loading="lazy">
+ <img class="d-flex" src="/docs/{{< param docs_version >}}/assets/img/vite.svg" alt="" width="145" loading="lazy">
 </div>
 
 {{< callout >}}

site/content/docs/5.3/getting-started/webpack.md

@@ -10,7 +10,7 @@ thumbnail: guides/webpack-dev-server-boosted.png
 ---
 
 <div class="d-flex justify-content-center">
- <img class="d-flex" src="/docs/{{< param docs_version >}}/assets/img/webpack.svg" alt="Webpack logo" width="145" loading="lazy">
+ <img class="d-flex" src="/docs/{{< param docs_version >}}/assets/img/webpack.svg" alt="" width="145" loading="lazy">
 </div>
 
 {{< callout >}}

site/content/docs/5.3/migration.md

@@ -20,13 +20,16 @@ toc: true
 
 ### Components
 
-#### Buttons
+- **Buttons**
  - <span class="badge text-bg-success">New</span> X social button.
 
+- **Orange navbar**
+ - <span class="badge text-bg-warning">Warning</span> The markup has been revised to utilize an empty `alt` attribute and eliminate the `role="img"`, as a placeholder image is displayed in the navbar in our documentation. You should customize the `alt` attribute for the avatar to align with the context of your website. For instance, it might be appropriate to use "Access to your account" in certain situations.
+
 ### Docs
 
 - Certain variants of the components and renderings have been omitted from the documentation to help you clearly understand what is available for use, thereby simplifying the connection between [Orange Design System]({{< param ods.web >}}) and the Boosted documentation.
- 
+
  Although these variants can still be found under the "See Bootstrap examples that are incompatible with Orange Design System" section, be aware that using them may violate the Orange Design System guidelines. It is advisable to avoid these variants whenever possible.
 
 ### CSS and Sass variables

site/layouts/partials/home/orange-design-system.html

@@ -17,7 +17,7 @@ <h2 class="mb-3 fw-semibold lh-sm">Orange Design System for web</h2>
  <div class="col-lg-6">
  {{ partial "responsive-img" (dict "context" .
  "imgPath" "/assets/img/boosted-guidelines.png"
- "alt" "Boosted design guidelines"
+ "alt" ""
  "classes" "d-block mt-3") }}
  </div>
 </section>

site/layouts/shortcodes/orange-global-headers.html

@@ -119,7 +119,7 @@ <h1 class="title">Title</h1>
  </li>
  <li class="nav-item">
  <a href="#" class="nav-link nav-icon">
- <img src="/docs/{{ $.Site.Params.docs_version }}/assets/img/navbar-contact.png" width="25" height="25" role="img" alt="User" loading="lazy">
+ <img src="/docs/{{ $.Site.Params.docs_version }}/assets/img/navbar-contact.png" width="25" height="25" alt="" loading="lazy">
  <span class="visually-hidden">My account</span>
  </a>
  </li>

site/layouts/shortcodes/orange-supra.html

@@ -52,7 +52,7 @@
  </li>
  <li class="nav-item">
  <a href="#" class="nav-link nav-icon">
- <img src="/docs/{{ $.Site.Params.docs_version }}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" aria-hidden="true">
+ <img src="/docs/{{ $.Site.Params.docs_version }}/assets/img/navbar-contact.png" alt="" loading="lazy">
  <span class="visually-hidden">My account</span>
  </a>
  </li>