Merge pull request #718 from sachajudd/pulls/1/menu-toggle

FIX Add aria-expanded to help menu toggle for screenreader accessibility
silverstripe · Oct 30, 2018 · 742a306 · 742a306
2 parents 952f37a + 4b0e69a
commit 742a306
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/src/legacy/LeftAndMain.Menu.js b/client/src/legacy/LeftAndMain.Menu.js
@@ -465,7 +465,10 @@ $.entwine('ss', function($){
 
   $('.cms-help__menu').entwine({
     onclick: function () {
-      $('.cms-help__toggle').toggleClass('cms-help__toggle--show');
+      var expandedState = (this.attr('aria-expanded') === 'true');
+
+      this.attr('aria-expanded', !expandedState);
+      $('.cms-help__toggle').toggleClass('cms-help__toggle--show')
     }
   });
 });
diff --git a/templates/SilverStripe/Admin/Includes/LeftAndMain_MenuToggle.ss b/templates/SilverStripe/Admin/Includes/LeftAndMain_MenuToggle.ss
@@ -1,5 +1,5 @@
 <div class="cms-help__toggle">
-    <button class="cms-help__menu" type="button" title="<%t SilverStripe\Admin\LeftAndMain.HelpMenu "Help menu" %>" aria-label="<%t SilverStripe\Admin\LeftAndMain.HelpMenu "Help menu" %>">
+    <button class="cms-help__menu" type="button" title="<%t SilverStripe\Admin\LeftAndMain.HelpMenu "Help menu" %>" aria-label="<%t SilverStripe\Admin\LeftAndMain.HelpMenu "Help menu" %>" aria-expanded="false">
         <span class="cms-help__logo font-icon-silverstripe"></span>
         <span class="cms-help__toggle-title">
             $ApplicationName