From 35a12f2e70a656c568954587d9a010099450aedc Mon Sep 17 00:00:00 2001
From: Robert Niznik <robert.niznik@ithaka.org>
Date: Thu, 2 Jan 2020 17:31:42 -0500
Subject: [PATCH] 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>
---
 js/foundation.drilldown.js    | 2 +-
 js/foundation.dropdownMenu.js | 6 +++---
 js/foundation.util.nest.js    | 3 ++-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js
index 956084e27..d4a951350 100644
--- 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 a696982eb..11834e09f 100644
--- 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 56c66cc79..661c92d79 100644
--- 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`,
-- 
2.47.2