fix(orange navbar): languages selection aria-label improvement for …

…a11y (#1629) Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Nov 16, 2022 · 945d22f · 945d22f
1 parent 86dfb2c
commit 945d22f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git a/site/content/docs/5.2/components/orange-navbar.md b/site/content/docs/5.2/components/orange-navbar.md
@@ -127,9 +127,9 @@ An additional navbar (with text or icon items) can be added on the right of the
 
         <!-- Right navbar of the Supra bar -->
         <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none">
-          <li class="nav-item"><a class="nav-link active" href="#" aria-label="English version">EN</a></li>
-          <li class="nav-item"><a class="nav-link" href="#" aria-label="Version française" lang="fr" hreflang="fr">FR</a></li>
-          <li class="nav-item"><a class="nav-link" href="#" aria-label="Versión en español" lang="es" hreflang="es">ES</a></li>
+          <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version">EN</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" lang="fr" hreflang="fr">FR</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" lang="es" hreflang="es">ES</a></li>
         </ul>
       </div>
 

diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md
@@ -22,6 +22,13 @@ If you need more details about the changes, please refer to the [v5.2.2 release]
 - **Modals**
   - <span class="badge bg-warning">Warning</span> Modals markups have changed to show that a modal dialog represents its own separate document/context, so most of the `.modal-title`s are now `<h1>`s associated with a `.h*`. Please reflect this modification into your websites by choosing the right header level.
 
+- **Orange navbar**
+  - Languages selection's `aria-label`s have been slightly changed in some supra bars examples for accessibility purpose; visible name must be included in the accessible name. It might be a useful modification to propagate into your websites if you have this same kind of languages selection.
+  ```diff
+  -        <li class="nav-item"><a class="nav-link active" href="#" aria-label="English version">EN</a></li>
+  +        <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version">EN</a></li>
+  ```
+
 ### Forms
 
 - <span class="badge bg-warning">Warning</span> All forms examples have been modified to add a `.mt-2` to all submit buttons in order to always have 30px between the last form control and the button. Please reflect this modification into your websites.

diff --git a/site/layouts/shortcodes/orange-global-headers.html b/site/layouts/shortcodes/orange-global-headers.html
@@ -82,9 +82,9 @@ <h1 class="title">Title</h1>
       </ul>
 {{- if $supra }}
       <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none">
-        <li class="nav-item"><a class="nav-link active" href="#" aria-label="English version" aria-current="true">EN</a></li>
-        <li class="nav-item"><a class="nav-link" href="#" aria-label="Version française" lang="fr" hreflang="fr">FR</a></li>
-        <li class="nav-item"><a class="nav-link" href="#" aria-label="Versión en español" lang="es" hreflang="es">ES</a></li>
+        <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+        <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" lang="fr" hreflang="fr">FR</a></li>
+        <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" lang="es" hreflang="es">ES</a></li>
       </ul>
 {{- end }}
     </div>
@@ -160,9 +160,9 @@ <h1 class="title">Title</h1>
       </ul>
 {{- if $supra }}
       <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none">
-        <li class="nav-item"><a class="nav-link active" href="#" aria-label="English version" aria-current="true">EN</a></li>
-        <li class="nav-item"><a class="nav-link" href="#" aria-label="Version française" lang="fr" hreflang="fr">FR</a></li>
-        <li class="nav-item"><a class="nav-link" href="#" aria-label="Versión en español" lang="es" hreflang="es">ES</a></li>
+        <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+        <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" lang="fr" hreflang="fr">FR</a></li>
+        <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" lang="es" hreflang="es">ES</a></li>
       </ul>
 {{- end }}
     </div>

diff --git a/site/layouts/shortcodes/orange-supra.html b/site/layouts/shortcodes/orange-supra.html
@@ -18,9 +18,9 @@
     </ul>
 {{- if eq $mode "languages" }}
     <ul class="navbar-nav">
-      <li class="nav-item"><a class="nav-link active" href="#" aria-label="English version" aria-current="true">EN</a></li>
-      <li class="nav-item"><a class="nav-link" href="#" aria-label="Version française" lang="fr" hreflang="fr">FR</a></li>
-      <li class="nav-item"><a class="nav-link" href="#" aria-label="Versión en español" lang="es" hreflang="es">ES</a></li>
+      <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
+      <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" lang="fr" hreflang="fr">FR</a></li>
+      <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" lang="es" hreflang="es">ES</a></li>
     </ul>
 {{- end }}
 {{- if eq $mode "actions" }}