From: Joe Workman <joe@workmanmail.com>
Date: Fri, 27 Aug 2021 19:51:08 +0000 (-0700)
Subject: fix: improved drilldown keyboard nav
X-Git-Tag: v6.7.1~11
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=e33fc09f2c2fc333f3e5f2a3db95d02941e751bd;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

fix: improved drilldown keyboard nav

closes #12038
---

diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js
index b7210c4f7..4119e2003 100644
--- 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 c1ef987b5..3217e7f19 100644
--- 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 06c98271e..6a2290e43 100644
--- 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, {});