Make Drilldown use tree role.

Drilldown should - like AccordionMenu - have the role tree as it consists of a hierarchical list of elements.
Sub-menus should have role group and items should have role treeitem.

Pretty much the same as #10064.

diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js
index e5797b1d908fb20ce2f8cb6dc0860ce3b4467b8c..a770584aeac50c6438259ad052b59aa0db75fe1c 100644 (file)
--- a/js/foundation.drilldown.js
+++ b/js/foundation.drilldown.js
@@ -48,9 +48,13 @@ class Drilldown extends Plugin {
    * @private
    */
   _init() {
+    this.$element.attr({
+      'role': 'tree',
+      'aria-multiselectable': false
+    });
     this.$submenuAnchors = this.$element.find('li.is-drilldown-submenu-parent').children('a');
-    this.$submenus = this.$submenuAnchors.parent('li').children('[data-submenu]');
-    this.$menuItems = this.$element.find('li').not('.js-drilldown-back').attr('role', 'menuitem').find('a');
+    this.$submenus = this.$submenuAnchors.parent('li').children('[data-submenu]').attr('role', 'group');
+    this.$menuItems = this.$element.find('li').not('.js-drilldown-back').attr('role', 'treeitem').find('a');
     this.$element.attr('data-mutate', (this.$element.attr('data-drilldown') || GetYoDigits(6, 'drilldown')));
 
     this._prepareMenu();
@@ -82,7 +86,7 @@ class Drilldown extends Plugin {
           .attr({
             'aria-hidden': true,
             'tabindex': 0,
-            'role': 'menu'
+            'role': 'group'
           });
       _this._events($link);
     });

diff --git a/test/javascript/components/drilldown.js b/test/javascript/components/drilldown.js
index bb1814f9eb63b825f532dbc3c40851e462499655..69a8e706f9d31cc8a5faf7be643546d471846c28 100644 (file)
--- a/test/javascript/components/drilldown.js
+++ b/test/javascript/components/drilldown.js
@@ -62,8 +62,10 @@ describe('Drilldown Menu', function() {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Drilldown($html, {});
 
+      plugin.$element.should.have.attr('role', 'tree');
+
       plugin.$element.find('[data-submenu]').each(function() {
-        $(this).should.have.attr('role', 'menu');
+        $(this).should.have.attr('role', 'group');
         $(this).should.have.attr('aria-hidden', 'true');
       });
 
@@ -72,6 +74,10 @@ describe('Drilldown Menu', function() {
         $(this).should.have.attr('aria-expanded', 'false');
         $(this).should.have.attr('aria-label', $(this).children('a').first().text());
       });
+
+      plugin.$element.find('li:not(.js-drilldown-back)').each(function() {
+        $(this).should.have.attr('role', 'treeitem');
+      });
     });
   });