MDL-68444 calendar: Improve how screenreaders say week titles

Also removed the scope attribute from the mini-calendar table because according to https://www.w3.org/TR/WCAG20-TECHS/H63.html it was not needed: Note 1: For simple tables that have the headers in the first row or column then it is sufficient to simply use the TH elements without scope.
emp7eror · Jul 14, 2020 · 216c392 · 216c392
1 parent 7328144
commit 216c392
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/calendar/templates/month_detailed.mustache b/calendar/templates/month_detailed.mustache
@@ -46,8 +46,9 @@
         <thead>
             <tr>
                 {{# daynames }}
-                <th class="header text-xs-center" aria-label="{{fullname}}">
-                    {{shortname}}
+                <th class="header text-xs-center">
+                    <span class="sr-only">{{fullname}}</span>
+                    <span aria-hidden="true">{{shortname}}</span>
                 </th>
                 {{/ daynames }}
             </tr>

diff --git a/calendar/templates/month_mini.mustache b/calendar/templates/month_mini.mustache
@@ -78,8 +78,9 @@
         <thead>
           <tr>
                 {{# daynames }}
-                <th class="header text-xs-center" scope="col" aria-label="{{fullname}}">
-                    {{shortname}}
+                <th class="header text-xs-center">
+                    <span class="sr-only">{{fullname}}</span>
+                    <span aria-hidden="true">{{shortname}}</span>
                 </th>
                 {{/ daynames }}
             </tr>