From f771c04a44c3ead45dd68dd3caddae9ffc520048 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 3 Oct 2024 09:28:52 +0200
Subject: [PATCH] fix(docs): remove unnecessary `role="img"` (#2704)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 build/vnu-jar.mjs                             |  2 --
 site/content/docs/5.3/about/brand.md          |  6 +++---
 site/content/docs/5.3/components/scrollspy.md |  4 ++--
 .../docs/5.3/customize/color-palette.md       |  2 +-
 .../docs/5.3/examples/download-app/index.html | 20 +++++++++----------
 5 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/build/vnu-jar.mjs b/build/vnu-jar.mjs
index c1ce8be230..7587012dff 100644
--- a/build/vnu-jar.mjs
+++ b/build/vnu-jar.mjs
@@ -31,8 +31,6 @@ execFile('java', ['-version'], (error, stdout, stderr) => {
     // NOT RECOMMENDED, but it's still valid - we explain in the docs that it's not ideal,
     // and offer more robust alternatives, but also need to show a less-than-ideal example
     'An “aria-disabled” attribute whose value is “true” should not be specified on an “a” element that has an “href” attribute.',
-    // Boosted mod: `role="img"` is needed for `<img "src=.svg" alt="">`
-    'The “img” role is unnecessary for element “img”.',
     '.*Consider using the “h1” element as a top-level heading only.*'
     // End mod
   ].join('|')
diff --git a/site/content/docs/5.3/about/brand.md b/site/content/docs/5.3/about/brand.md
index bfc23c376e..893164b77c 100644
--- a/site/content/docs/5.3/about/brand.md
+++ b/site/content/docs/5.3/about/brand.md
@@ -20,7 +20,7 @@ Have a need for Boosted's brand resources? Great! We have only a few guidelines
   <div class="col">
     <div class="ratio ratio-1x1">
     <figure class="d-flex bg-black">
-      <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" class="figure-img img-fluid m-auto" width="220" height="220" role="img" alt="Orange master logo" loading="lazy">
+      <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" class="figure-img img-fluid m-auto" width="220" height="220" alt="Orange master logo" loading="lazy">
       <figcaption class="figure-caption fw-bold position-absolute">Master logo</figcaption>
     </figure>
     </div>
@@ -28,7 +28,7 @@ Have a need for Boosted's brand resources? Great! We have only a few guidelines
   <div class="col">
     <div class="ratio ratio-1x1">
     <figure class="d-flex bg-black">
-      <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" class="figure-img m-auto" width="30" height="30" role="img" alt="Orange small logo" loading="lazy">
+      <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" class="figure-img m-auto" width="30" height="30" alt="Orange small logo" loading="lazy">
       <figcaption class="figure-caption fw-bold position-absolute">Small logo</figcaption>
     </figure>
     </div>
@@ -49,7 +49,7 @@ Orange Business Services has its own logo that contains the Orange logo and the
   <div class="col">
     <div class="ratio ratio-1x1">
     <figure class="d-flex bg-black">
-      <img src="/docs/{{< param docs_version >}}/assets/brand/OBS-logo.svg" class="figure-img img-fluid m-auto" width="220" height="220" role="img" alt="Orange Business Services logo" loading="lazy">
+      <img src="/docs/{{< param docs_version >}}/assets/brand/OBS-logo.svg" class="figure-img img-fluid m-auto" width="220" height="220" alt="Orange Business Services logo" loading="lazy">
       <figcaption class="figure-caption fw-bold position-absolute">Orange Business Services logo</figcaption>
     </figure>
     </div>
diff --git a/site/content/docs/5.3/components/scrollspy.md b/site/content/docs/5.3/components/scrollspy.md
index 855a86a753..51ff4d423a 100644
--- a/site/content/docs/5.3/components/scrollspy.md
+++ b/site/content/docs/5.3/components/scrollspy.md
@@ -35,7 +35,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
 <div class="bd-example">
   <nav id="navbar-example2" class="navbar px-3 mb-3">
     <a class="navbar-brand" href="#">
-      <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" role="img" alt="Boosted - Back to Home" loading="lazy">
+      <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
     </a>
     <ul class="nav nav-pills">
       <li class="nav-item">
@@ -72,7 +72,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
 ```html
 <nav id="navbar-example2" class="navbar px-3 mb-3">
   <a class="navbar-brand" href="#">
-    <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" role="img" alt="Boosted - Back to Home" loading="lazy">
+    <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
   </a>
   <ul class="nav nav-pills">
     <li class="nav-item">
diff --git a/site/content/docs/5.3/customize/color-palette.md b/site/content/docs/5.3/customize/color-palette.md
index 2daf70a7da..49c52be149 100644
--- a/site/content/docs/5.3/customize/color-palette.md
+++ b/site/content/docs/5.3/customize/color-palette.md
@@ -23,7 +23,7 @@ Please make sure that none of the [color theme variables]({{< docsref "/customiz
     {{- range $color := .colors }}
       <figure class="mb-0" aria-label="{{ $color.name }}">
         <button class="btn border-0 p-0 color-copy ratio ratio-1x1" data-clipboard-text="{{ $color.variable }}" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
-          <svg viewBox="0 0 100 100" role="img" aria-hidden="true" preserveAspectRatio="xMidYMid meet" {{ if or (or (eq $color.name "White 100") (eq $color.name "Black 900")) (eq $color.name "Gray 900") }} style="border: 1px solid var(--bs-border-color-subtle)" {{ end }}>
+          <svg viewBox="0 0 100 100" aria-hidden="true" preserveAspectRatio="xMidYMid meet" {{ if or (or (eq $color.name "White 100") (eq $color.name "Black 900")) (eq $color.name "Gray 900") }} style="border: 1px solid var(--bs-border-color-subtle)" {{ end }}>
             <rect fill="{{ $color.hex }}" width="100" height="100"/>
           </svg>
           <span class="visually-hidden">Copy variable name {{ $color.variable }}</span>
diff --git a/site/content/docs/5.3/examples/download-app/index.html b/site/content/docs/5.3/examples/download-app/index.html
index be6e77d856..b8feb064cb 100644
--- a/site/content/docs/5.3/examples/download-app/index.html
+++ b/site/content/docs/5.3/examples/download-app/index.html
@@ -237,37 +237,37 @@ <h2 class="h1 mb-4 mb-md-5 text-primary text-center">What you get from the showc
         <div class="col-12 col-md-5 pt-2 pt-md-0 mb-4 mb-md-0">
           <ul class="list-unstyled mb-0 ticks-list">
             <li class="d-flex align-items-start mb-3">
-              <svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" role="img" aria-hidden="true">
+              <svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" aria-hidden="true">
                 <use xlink:href="#tick"/>
               </svg>
               <p class="fw-bold mb-0">In situ visibility of all the elements available in the mobile code library for each mobile operating system</p>
             </li>
             <li class="d-flex align-items-start mb-3">
-              <svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" role="img" aria-hidden="true">
+              <svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" aria-hidden="true">
                 <use xlink:href="#tick"/>
               </svg>
               <p class="fw-bold mb-0">Live experience of the available interactions for each component, and ability to select the right customisation</p>
             </li>
             <li class="d-flex align-items-start mb-3">
-              <svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" role="img" aria-hidden="true">
+              <svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" aria-hidden="true">
                 <use xlink:href="#tick"/>
               </svg>
               <p class="fw-bold mb-0">Time saving by finding the code to use, by selecting the right component variant and it's possible customisation</p>
             </li>
             <li class="d-flex align-items-start mb-3">
-              <svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" role="img" aria-hidden="true">
+              <svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" aria-hidden="true">
                 <use xlink:href="#tick"/>
               </svg>
               <p class="fw-bold mb-0">Confidence in the fact that the available components are following the Orange brand standard</p>
             </li>
             <li class="d-flex align-items-start mb-3">
-              <svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" role="img" aria-hidden="true">
+              <svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" aria-hidden="true">
                 <use xlink:href="#tick"/>
               </svg>
               <p class="fw-bold mb-0">Assurance that the components have been tested amongst the accessibility standard from the industry</p>
             </li>
             <li class="d-flex align-items-start mb-md-3">
-              <svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" role="img" aria-hidden="true">
+              <svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" aria-hidden="true">
                 <use xlink:href="#tick"/>
               </svg>
               <p class="fw-bold mb-0">Coverage of iOS and Android with app and SDK being available in open-source</p>
@@ -360,22 +360,22 @@ <h2 class="h1 mb-2 mb-md-3 text-center">Your feedback is valued</h2>
         <p class="h3 mb-md-3 text-center">Let us know if you spot anything to correct or improve</p>
         <div class="d-flex gap-md-3 flex-column flex-lg-row justify-content-between mt-4">
           <div class="d-flex flex-column align-items-center mb-4 mb-md-0">
-            <svg xmlns="http://www.w3.org/2000/svg" class="mb-2 mb-md-4 icons-lg" width="6.25rem" height="6.25rem" role="img" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" class="mb-2 mb-md-4 icons-lg" width="6.25rem" height="6.25rem" aria-hidden="true">
               <use xlink:href="#apple"/>
             </svg>
             <a href="https://github.com/Orange-OpenSource/ods-ios/issues/new/choose" target="_blank" rel="noopener" class="btn btn-lg btn-outline-secondary mt-1 mt-md-0">
-              <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1.25rem" height="1.25rem" role="img" aria-hidden="true">
+              <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1.25rem" height="1.25rem" aria-hidden="true">
                 <use xlink:href="#apple"/>
               </svg>
               iOS feedback
             </a>
           </div>
           <div class="d-flex flex-column align-items-center">
-            <svg xmlns="http://www.w3.org/2000/svg" class="mb-2 mb-md-4 icons-lg" width="6.25rem" height="6.25rem" role="img" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" class="mb-2 mb-md-4 icons-lg" width="6.25rem" height="6.25rem" aria-hidden="true">
               <use xlink:href="#android"/>
             </svg>
             <a href="https://github.com/Orange-OpenSource/ods-android/issues/new/choose" target="_blank" rel="noopener" class="btn btn-lg btn-outline-secondary mt-1 mt-md-0">
-              <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1.25rem" height="1.25rem" role="img" aria-hidden="true">
+              <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1.25rem" height="1.25rem" aria-hidden="true">
                 <use xlink:href="#android"/>
               </svg>
               Android feedback