From: Marius Olbertz <marius.olbertz@gmail.com>
Date: Mon, 19 Jun 2017 17:32:54 +0000 (+0200)
Subject: Make Drilldown use tree role.
X-Git-Tag: v6.4.0-rc4~4^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10204%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 e5797b1d9..a770584ae 100644
--- 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 bb1814f9e..69a8e706f 100644
--- 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');
+      });
     });
   });