D8CORE-3502 - a11y fixes for nav menu (#227)

* D8CORE-3502 - a11y fixes for nav menu * D8CORE-3502: replaced backed-out JS change for nav toggle. * Fixed bug which affected aria-label in firefox. * Wrapped aria-label changes in an observer to respond to opening or closing.
SU-SWS · May 6, 2021 · f1530b3 · f1530b3
1 parent 9938615
commit f1530b3
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 9 deletions.
diff --git a/dist/css/base.css b/dist/css/base.css
diff --git a/dist/js/base.js b/dist/js/base.js
diff --git a/dist/js/behaviors.js b/dist/js/behaviors.js
diff --git a/src/js/components/secondary-nav/buttons/SubNavToggle.js b/src/js/components/secondary-nav/buttons/SubNavToggle.js
@@ -32,6 +32,20 @@ export default class SubNavToggle {
     // Assign the event dispatcher and event registry.
     this.eventRegistry = this.createEventRegistry(options);
     this.dispatch = new EventHandlerDispatch(element, this);
+
+    // Label the toggle to indicate which menu it opens
+    this.elem.setAttribute('aria-label', 'Open the ' + this.parentNav.elem.innerText.trim() + ' menu');
+
+    // Create an observer to watch if the toggled menu changes state.
+    var self = this;
+    this.observer = new MutationObserver(function () {
+      var verb = 'Close';
+      if (self.elem.getAttribute('aria-expanded') == 'false') {
+        verb = 'Open';
+      }
+      self.elem.setAttribute('aria-label', verb + ' the ' + self.parentNav.elem.innerText.trim() + ' menu');
+    });
+    this.observer.observe(this.elem, { attributeFilter: ['aria-expanded'] });
   }
 
   /**
@@ -60,6 +74,7 @@ export default class SubNavToggle {
     };
 
     return Object.assign(registryDefaults, options.eventRegistry);
+
   }
 
   /**

diff --git a/src/js/components/secondary-nav/common/events/OnEsc.js b/src/js/components/secondary-nav/common/events/OnEsc.js
@@ -1,5 +1,5 @@
 import EventAbstract from './EventAbstract';
-import {createEvent} from '../../../../polyfills/createEvent';
+import { createEvent } from '../../../../polyfills/createEvent';
 
 /**
  * OnEsc
@@ -18,22 +18,23 @@ export default class OnEsc extends EventAbstract {
     if (this.item.getDepth() > 1) {
       this.event.stopPropagation();
       this.parentNav.closeSubNav();
-      node = this.getElement('parentItem');
+      node = this.getElement('parentItem').parentElement.getElementsByTagName('button')[0];
     }
     else {
       if (this.isDesktop()) {
         this.masterNav.closeAllSubNavs();
-        node = this.getElement('first', this.item.parentNode);
+        node = this.elem;
       }
       else {
-        var closeAllEvent = createEvent('closeAllMobileNavs', {bubbles: true, data: this.item});
+        var closeAllEvent = createEvent('closeAllMobileNavs', { bubbles: true, data: this.item });
         this.elem.dispatchEvent(closeAllEvent);
       }
     }
 
     if (node) {
       node.focus();
     }
+
   }
 
 }
diff --git a/src/scss/components/multi-menu/_multi-menu.scss b/src/scss/components/multi-menu/_multi-menu.scss
@@ -178,6 +178,7 @@
             color: $su-color-black;
             text-decoration: underline;
           }
+
         }
       }
 
@@ -348,6 +349,7 @@
     > .su-multi-menu__menu {
       display: none;
     }
+
   }
 
   // Expanded items state.

diff --git a/templates/menus/macros/nav-menu.twig b/templates/menus/macros/nav-menu.twig
@@ -24,7 +24,6 @@
     {% set list_attributes = list_attributes.addClass(class_prefix ~ "__item") %}
     {% if item.below is not empty %}
       {% set list_attributes = list_attributes.addClass(class_prefix ~ "__item--parent") %}
-      {% set link_attributes = link_attributes.setAttribute('aria-expanded', 'false') %}
     {% endif %}
     {% if item.in_active_trail == true %}
       {% set list_attributes = list_attributes.addClass(class_prefix ~ "__item--active-trail") %}

diff --git a/templates/menus/macros/secondary-nav-menu.twig b/templates/menus/macros/secondary-nav-menu.twig
@@ -18,7 +18,6 @@
     {% set list_attributes = list_attributes.addClass(class_prefix ~ "__item") %}
     {% if item.below is not empty %}
       {% set list_attributes = list_attributes.addClass(class_prefix ~ "__item--parent") %}
-      {% set link_attributes = link_attributes.setAttribute('aria-expanded', 'false') %} 
     {% endif %}
     {% if item.in_active_trail == true %}
       {% set list_attributes = list_attributes.addClass(class_prefix ~ "__item--active-trail") %}