fix: improved drilldown keyboard nav

closes #12038

diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js
index b7210c4f70467251658acf929cf70a494f701dc1..4119e200325760d872f108f5a3058a5cea28997a 100644 (file)
--- a/js/foundation.drilldown.js
+++ b/js/foundation.drilldown.js
@@ -36,8 +36,6 @@ class Drilldown extends Plugin {
       'ARROW_DOWN': 'down',
       'ARROW_LEFT': 'previous',
       'ESCAPE': 'close',
-      'TAB': 'down',
-      'SHIFT_TAB': 'up'
     });
   }
 
@@ -456,7 +454,14 @@ class Drilldown extends Plugin {
     $elem.attr('aria-expanded', true);
 
     this.$currentMenu = $submenu;
-    $submenu.addClass('is-active').removeClass('invisible').attr('aria-hidden', false);
+
+    //hide drilldown parent menu when submenu is open
+    // this removes it from the dom so that the tab key will take the user to the next visible element
+    $elem.parent().closest('ul').addClass('invisible');
+
+    // add visible class to submenu to override invisible class above
+    $submenu.addClass('is-active visible').removeClass('invisible').attr('aria-hidden', false);
+
     if (this.options.autoHeight) {
       this.$wrapper.css({ height: $submenu.data('calcHeight') });
     }
@@ -477,11 +482,12 @@ class Drilldown extends Plugin {
   _hide($elem) {
     if(this.options.autoHeight) this.$wrapper.css({height:$elem.parent().closest('ul').data('calcHeight')});
     var _this = this;
+    $elem.parent().closest('ul').removeClass('invisible');
     $elem.parent('li').attr('aria-expanded', false);
     $elem.attr('aria-hidden', true);
     $elem.addClass('is-closing')
          .one(transitionend($elem), function(){
-           $elem.removeClass('is-active is-closing');
+           $elem.removeClass('is-active is-closing visible');
            $elem.blur().addClass('invisible');
          });
     /**

diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss
index c1ef987b5557f826ddefe145d46487e85060a853..3217e7f198f1fbb59d4ff5bd46984dfef671b71e 100644 (file)
--- a/scss/components/_visibility.scss
+++ b/scss/components/_visibility.scss
@@ -69,6 +69,9 @@
   .invisible {
     visibility: hidden;
   }
+  .visible {
+    visibility: visible;
+  }
 
   // Responsive visibility classes
   @each $size in $breakpoint-classes {

diff --git a/test/javascript/components/drilldown.js b/test/javascript/components/drilldown.js
index 06c98271ec9c85fe740215736a09a529b5e5c7d9..6a2290e43dd01b5c92991900e2fc4e596b4985a6 100644 (file)
--- a/test/javascript/components/drilldown.js
+++ b/test/javascript/components/drilldown.js
@@ -334,24 +334,6 @@ describe('Drilldown Menu', function() {
 
       $html.find('> li:nth-child(1) > ul').should.have.class('is-closing');
     });
-    it('moves focus to next element on TAB', function() {
-      $html = $(template).appendTo('body');
-      plugin = new Foundation.Drilldown($html, {});
-
-      $html.find('> li:nth-child(1) > a').focus()
-        .trigger(window.mockKeyboardEvent('TAB'));
-
-      document.activeElement.should.be.equal($html.find('> li:nth-child(2) > a')[0]);
-    });
-    it('moves focus to previous element on TAB', function() {
-      $html = $(template).appendTo('body');
-      plugin = new Foundation.Drilldown($html, {});
-
-      $html.find('> li:nth-child(2) > a').focus()
-        .trigger(window.mockKeyboardEvent('TAB', {shift: true}));
-
-      document.activeElement.should.be.equal($html.find('> li:nth-child(1) > a')[0]);
-    });
     it('moves focus to next element on ARROW_DOWN', function() {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Drilldown($html, {});