fix: improve dropdown menu accessibility

Updates li and a element roles to the appropriate values.

Addresses #8810

on-behalf-of: @ithaka <robert.niznik@ithaka.org>

diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js
index 956084e274d897be6a013182f3584a733da737a5..d4a95135092a6b07f8d6bc0c91ce54448330a476 100644 (file)
--- a/js/foundation.drilldown.js
+++ b/js/foundation.drilldown.js
@@ -90,7 +90,7 @@ class Drilldown extends Plugin {
       var $link = $(this);
       var $sub = $link.parent();
       if(_this.options.parentLink){
-        $link.clone().prependTo($sub.children('[data-submenu]')).wrap('<li data-is-parent-link class="is-submenu-parent-item is-submenu-item is-drilldown-submenu-item" role="menuitem"></li>');
+        $link.clone().prependTo($sub.children('[data-submenu]')).wrap('<li data-is-parent-link class="is-submenu-parent-item is-submenu-item is-drilldown-submenu-item" role="none"></li>');
       }
       $link.data('savedHref', $link.attr('href')).removeAttr('href').attr('tabindex', 0);
       $link.children('[data-submenu]')

diff --git a/js/foundation.dropdownMenu.js b/js/foundation.dropdownMenu.js
index a696982ebf67d2f9f37545bf7100386af2b98349..11834e09f05f647f50ca708d477bfc6ce26b05c5 100644 (file)
--- a/js/foundation.dropdownMenu.js
+++ b/js/foundation.dropdownMenu.js
@@ -58,8 +58,8 @@ class DropdownMenu extends Plugin {
     var subs = this.$element.find('li.is-dropdown-submenu-parent');
     this.$element.children('.is-dropdown-submenu-parent').children('.is-dropdown-submenu').addClass('first-sub');
 
-    this.$menuItems = this.$element.find('[role="menuitem"]');
-    this.$tabs = this.$element.children('[role="menuitem"]');
+    this.$menuItems = this.$element.find('li[role="none"]');
+    this.$tabs = this.$element.children('li[role="none"]');
     this.$tabs.find('ul.is-dropdown-submenu').addClass(this.options.verticalClass);
 
     if (this.options.alignment === 'auto') {
@@ -164,7 +164,7 @@ class DropdownMenu extends Plugin {
       }));
     }
     this.$menuItems.on('keydown.zf.dropdownMenu', function(e) {
-      var $element = $(e.target).parentsUntil('ul', '[role="menuitem"]'),
+      var $element = $(e.target).parentsUntil('ul', '[role="none"]'),
           isTab = _this.$tabs.index($element) > -1,
           $elements = isTab ? _this.$tabs : $element.siblings('li').add($element),
           $prevElement,

diff --git a/js/foundation.util.nest.js b/js/foundation.util.nest.js
index 56c66cc79984e40284c3782512ea7bb907c6e4ec..661c92d791068b920cc67ccd22c068dc2a4e4826 100644 (file)
--- a/js/foundation.util.nest.js
+++ b/js/foundation.util.nest.js
@@ -5,8 +5,9 @@ import $ from 'jquery';
 const Nest = {
   Feather(menu, type = 'zf') {
     menu.attr('role', 'menubar');
+    menu.find('a').attr({'role': 'menuitem'});
 
-    var items = menu.find('li').attr({'role': 'menuitem'}),
+    var items = menu.find('li').attr({'role': 'none'}),
         subMenuClass = `is-${type}-submenu`,
         subItemClass = `${subMenuClass}-item`,
         hasSubClass = `is-${type}-submenu-parent`,