Accessibility: Landmarks should be uniquely labelled (sympa-community…

…#1761)
ikedas · Dec 18, 2023 · 134e9eb · 134e9eb
1 parent e53c9af
commit 134e9eb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 18 deletions.
diff --git a/default/web_tt2/aside_menu.tt2 b/default/web_tt2/aside_menu.tt2
@@ -7,13 +7,14 @@
                     <i class="fa fa-envelope-square fa-lg"></i>
                 </span>
                 <div class="title-bar-right">
-                    <div class="title-bar-title">
+                    <div class="title-bar-title" id="sympa-sub-bar-title">
                         <span>[%|loc%]List Options Menu[%END%]</span>
                     </div>
                     <a class="menu-icon" href="#" data-toggle="sympa-sub-bar"></a>
                 </div>
             </div>
-            <nav class="top-bar" id="sympa-sub-bar" role="navigation">
+            <nav class="top-bar" id="sympa-sub-bar"
+             role="navigation" aria-labelledby="sympa-sub-bar-title">
                 <menu class="top-bar-left list">
                     <ul class="vertical menu" data-responsive-menu="drilldown medium-accordion">
                         [% PROCESS list_menu.tt2 %]
@@ -44,14 +45,15 @@
                 [%~ END %]
             </span>
             <div class="title-bar-right">
-                <div class="title-bar-title">
+                <div class="title-bar-title" id="sympa-sub-bar-title">
                     <span>[%|loc%]General Menu[%END%]</span>
                 </div>
                 <a class="menu-icon" href="#" data-toggle="sympa-sub-bar"></a>
             </div>
         </div>
 
-        <nav class="top-bar" id="sympa-sub-bar" role="navigation">
+        <nav class="top-bar" id="sympa-sub-bar"
+             role="navigation" aria-labelledby="sympa-sub-bar-title">
             [% IF user.email ~%]
                 <menu class="top-bar-left user">
                     <ul class="nested vertical menu">

diff --git a/default/web_tt2/header.tt2 b/default/web_tt2/header.tt2
@@ -12,14 +12,15 @@
             [%~ END %]
         </span>
         <div class="title-bar-right">
-            <div class="title-bar-title">
+            <div class="title-bar-title" id="sympa-top-bar-title">
                 <span>[%|loc%]Sympa Menu[%END%]</span>
             </div>
             <a class="menu-icon" href="#" data-toggle="sympa-top-bar"></a>
         </div>
     </div>
 
-    <nav class="top-bar" id="sympa-top-bar" role="navigation">
+    <nav class="top-bar" id="sympa-top-bar"
+     role="navigation" aria-labelledby="sympa-top-bar-title">
         <ul class="top-bar-left medium-2 columns show-for-medium">
             <li class="name">
                 <span class="menu-text">

diff --git a/default/web_tt2/nav.tt2 b/default/web_tt2/nav.tt2
@@ -13,14 +13,15 @@
                 <i class="fa fa-plus"></i>
             </span>
             <div class="title-bar-right">
-                <div class="title-bar-title">
+                <div class="title-bar-title" id="sympa-nav-bar-title">
                     <span>[%|loc%]Create list[%END%]</span>
                 </div>
                 <a class="menu-icon" href="#" data-toggle="sympa-nav-bar"></a>
             </div>
         </div>
 
-        <nav class="top-bar" id="sympa-nav-bar">
+        <nav class="top-bar" id="sympa-nav-bar"
+         role="navigation" aria-labelledby="sympa-nav-bar-title">
             <menu class="top-bar-left">
                 <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
                     <li>
@@ -48,14 +49,15 @@
             <i class="fa fa-wrench"></i>
         </span>
         <div class="title-bar-right">
-            <div class="title-bar-title">
+            <div class="title-bar-title" id="sympa-nav-bar-title">
                 <span>[%|loc%]Listmaster Admin[%END%]</span>
             </div>
             <a class="menu-icon" href="#" data-toggle="sympa-nav-bar"></a>
         </div>
     </div>
 
-    <nav class="top-bar" id="sympa-nav-bar">
+    <nav class="top-bar" id="sympa-nav-bar"
+     role="navigation" aria-labelledby="sympa-nav-bar-title">
         <menu class="top-bar-left">
             <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
                 [% IF (subaction == '' or subaction == 'm_lists') and action != 'skinsedit' %]
@@ -166,14 +168,15 @@
             <i class="fa fa-list"></i>
         </span>
         <div class="title-bar-right">
-            <div class="title-bar-title">
+            <div class="title-bar-title" id="sympa-nav-bar-title">
                 <span>[%|loc%]Index of lists[%END%]</span>
             </div>
             <a class="menu-icon" href="#" data-toggle="sympa-nav-bar"></a>
         </div>
     </div>
 
-    <nav class="top-bar" id="sympa-nav-bar">
+    <nav class="top-bar" id="sympa-nav-bar"
+     role="navigation" aria-labelledby="sympa-nav-var-title">
         <menu class="top-bar-left">
             <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
                 [% FOREACH letter IN letters %]
@@ -220,7 +223,7 @@
 
     <div class="title-bar" data-responsive-toggle="sympa-nav-bar" data-hide-for="medium">
         <div class="title-bar-right">
-            <div class="title-bar-title">
+            <div class="title-bar-title" id="sympa-nav-bar-title">
                 <span>[%|loc%]Basic Operations[%END%]</span>
             </div>
             <a class="menu-icon" href="#" data-toggle="sympa-nav-bar"></a>
@@ -233,7 +236,8 @@
         [% SET class = '' %]
     [% END %]
 
-    <nav class="top-bar" id="sympa-nav-bar">
+    <nav class="top-bar" id="sympa-nav-bar"
+     role="navigation" aria-labelledby="sympa-nav-bar-title">
         <menu class="top-bar-left">
             <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
                 <li class="[% class %]"><a href="[% 'edit_list_request' | url_rel([list,'description']) %]">[%|loc%]Edit List Config[%END%]</a>
@@ -436,7 +440,7 @@
 
     <div class="title-bar" data-responsive-toggle="sympa-nav-bar" data-hide-for="medium">
         <div class="title-bar-right">
-            <div class="title-bar-title">
+            <div class="title-bar-title" id="sympa-nav-bar-title">
                 <span>
                     [% IF subaction == "html_news_letter" ~%]
                         [%|loc%]Sending an HTML page to the list[%END%]
@@ -455,7 +459,8 @@
         [% SET class = '' %]
     [% END %]
 
-    <nav class="top-bar" id="sympa-nav-bar">
+    <nav class="top-bar" id="sympa-nav-bar"
+     role="navigation" aria-labelledby="sympa-nav-bar-title">
         <menu class="top-bar-left">
             <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
                 <li class="[% class %]">
@@ -488,14 +493,15 @@
 
     <div class="title-bar" data-responsive-toggle="sympa-nav-bar" data-hide-for="medium">
         <div class="title-bar-right">
-            <div class="title-bar-title">
+            <div class="title-bar-title" id="sympa-nav-bar-title">
                 <span>[%|loc%]Shared documents[%END%]</span>
             </div>
             <a class="menu-icon" href="#" data-toggle="sympa-nav-bar"></a>
         </div>
     </div>
 
-    <nav class="top-bar" id="sympa-nav-bar">
+    <nav class="top-bar" id="sympa-nav-bar"
+     role="navigation" aria-labelledby="sympa-nav-bar-title">
         <menu class="top-bar-left">
             <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
                 <li class="[% UNLESS expert_page %]active not-click[%END%]">