a11y: #4225 olh nav suport aria-expanded

Author: StephDriver

src/themes/OLH/assets/js/app.js

@@ -23,6 +23,40 @@ $(document).on('click', '[data-toggle]', function() {
     $button.attr('aria-expanded', !currentExpanded);
 });
 
+// Accessibility: Handle Nav aria-expanded on keyboard navigation
+$(document).on('click', '[aria-expanded]', function() {
+    var $button = $(this);
+    var currentExpanded = $button.attr('aria-expanded') === 'true';
+    $button.attr('aria-expanded', !currentExpanded);
+});
+
+function toggleAriaExpanded(submenu, expanded) {
+  var $parent = submenu.parent('li.is-dropdown-submenu-parent');
+  var $button = $parent.find('a[aria-expanded]');
+  $button.attr('aria-expanded', expanded);
+}
+
+// Accessibility: Listen for Foundation menu events to update aria-expanded
+$(document).ready(function() {
+    // dropdown menu (wide screen)
+    $(document).on('show.zf.dropdownmenu', function(event, $sub) {
+        toggleAriaExpanded($sub, true);
+    });
+    
+    $(document).on('hide.zf.dropdownmenu', function(event, $sub) {
+        $('a[aria-expanded="true"]').attr('aria-expanded', 'false');
+    });
+    
+    // drilldown menu (narrow screen)
+    $(document).on('open.zf.drilldown', function(event, $elem) {
+      toggleAriaExpanded($elem, true);
+    });
+    
+    $(document).on('hide.zf.drilldown', function(event, $elem) {
+        $('a[aria-expanded="true"]').attr('aria-expanded', 'false');
+    });
+});
+
 $(".search-toggle").click(function() {
     var $searchMenu = $("#search-menu");
     if ($searchMenu.is(':visible')) {

src/themes/OLH/templates/core/nav.html

@@ -23,7 +23,7 @@
                     <li class="is-dropdown-submenu-parent">
                         <a href="#" data-options="is_hover:true; hover_timeout:5000"
                             role="button" 
-                            aria-expanded="true"
+                            aria-expanded="false"
                             aria-controls="menu-nav-item-{{ item.counter }}"
                             >
                             {{ item.link_name }}
@@ -65,7 +65,7 @@
                     <li class="is-dropdown-submenu-parent">
                         <a href="#" data-options="is_hover:true; hover_timeout:5000"
                             role="button" 
-                            aria-expanded="true"
+                            aria-expanded="false"
                             aria-controls="menu-nav-journal"
                             >
                             {{ journal_settings.styling.editorial_group_page_name }}
@@ -119,7 +119,7 @@
             <li class="is-dropdown-submenu-parent show-for-small-only">
                 <a href="#" data-options="is_hover:true; hover_timeout:5000"
                     role="button" 
-                    aria-expanded="true"
+                    aria-expanded="false"
                     aria-controls="menu-nav-account"
                     >
                     {% trans 'Account' %}