8.5.5

- D8CORE-3502 - a11y fixes for nav menu (#227)
- D8CORE-4037: fixed word wrapping with very long menu items (#226)

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Stanford Basic Theme
 
+8.x-5.5
+--------------------------------------------------------------------------------
+_Release Date: 2021-05-07_
+
+- D8CORE-3502 - a11y fixes for nav menu (#227) (f1530b3)
+- D8CORE-4037: fixed word wrapping with very long menu items (#226) (9938615)
+
 8.x-5.4
 --------------------------------------------------------------------------------
 _Release Date: 2021-04-09_

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);
+
   }
 
   /**

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();
     }
+
   }
 
 }

src/scss/admin/_menu.scss

@@ -44,6 +44,7 @@ a:focus {
     bottom: -10px;
     right: 90px;
   }
+
 }
 
 .su-secondary-nav {

src/scss/components/multi-menu/_multi-menu.scss

@@ -178,6 +178,7 @@
             color: $su-color-black;
             text-decoration: underline;
           }
+
         }
       }
 
@@ -274,18 +275,29 @@
     @include grid-media('lg') {
 
       > .su-multi-menu__item {
-        overflow: hidden;
 
         > .su-multi-menu__link {
 
           @include padding(null 0 2.4rem 1rem);
           @include margin(0 1.8em 0 0.5rem);
-          max-width: calc(100% - 20px);
-          word-wrap: break-word;
 
           &::before {
             left: -6px;
           }
+
+          .su-multi-menu__link-text-wrapper {
+            display: inline-block;
+            word-wrap: break-word;
+            max-width: calc(100% - 10px);
+          }
+        }
+
+        &.su-multi-menu__item--parent {
+          > .su-multi-menu__link {
+            .su-multi-menu__link-text-wrapper {
+              max-width: calc(100% - 50px);
+            }
+          }
         }
 
       }
@@ -300,6 +312,19 @@
         }
       }
     }
+
+    @include grid-media-max('md') {
+      .su-multi-menu__item--parent {
+
+        .su-multi-menu__link-text-wrapper {
+          display: inline-block;
+          word-wrap: break-word;
+          max-width: calc(100% - 38px);
+        }
+
+      }
+
+    }
   }
 
   .su-multi-menu--buttons {
@@ -324,6 +349,7 @@
     > .su-multi-menu__menu {
       display: none;
     }
+
   }
 
   // Expanded items state.

stanford_basic.info.yml

@@ -2,7 +2,7 @@ name: 'Stanford Basic'
 type: theme
 description: 'Stanford Basic Branding Theme.'
 package: Stanford
-version: 8.x-5.4
+version: 8.x-5.5
 core_version_requirement: ^9
 'base theme': stable9
 regions:

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") %}
@@ -36,7 +35,7 @@
 
     <li{{ list_attributes }}>
       <a{{ link_attributes }}>
-        {{ item.title }}
+        <span class="su-multi-menu__link-text-wrapper">{{ item.title }}</span>
         {% if item.unpublished %}
           <div class="unpublished-indicator">{{ "Unpublished Page"|t }}</div>
         {% endif %}

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") %}