From: Kevin Ball <kmball11@gmail.com>
Date: Fri, 10 Feb 2017 23:46:22 +0000 (-0800)
Subject: Make hidden parts of submenus inaccessible without creating tab trap
X-Git-Tag: v6.3.1~2^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F9769%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Make hidden parts of submenus inaccessible without creating tab trap
---

diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js
index 8a56cf4ed..817398f1d 100644
--- a/js/foundation.drilldown.js
+++ b/js/foundation.drilldown.js
@@ -100,10 +100,11 @@ class Drilldown {
       _this._back($menu);
     });
 
+    this.$submenus.addClass('invisible');
     if(!this.options.autoHeight) {
       this.$submenus.addClass('drilldown-submenu-cover-previous');
     }
-    
+
     // create a wrapper on element if it doesn't exist.
     if(!this.$element.parent().hasClass('is-drilldown')){
       this.$wrapper = $(this.options.wrapper).addClass('is-drilldown');
@@ -336,7 +337,7 @@ class Drilldown {
   _show($elem) {
     if(this.options.autoHeight) this.$wrapper.css({height:$elem.children('[data-submenu]').data('calcHeight')});
     $elem.attr('aria-expanded', true);
-    $elem.children('[data-submenu]').addClass('is-active').attr('aria-hidden', false);
+    $elem.children('[data-submenu]').addClass('is-active').removeClass('invisible').attr('aria-hidden', false);
     /**
      * Fires when the submenu has opened.
      * @event Drilldown#open
@@ -358,7 +359,7 @@ class Drilldown {
     $elem.addClass('is-closing')
          .one(Foundation.transitionend($elem), function(){
            $elem.removeClass('is-active is-closing');
-           $elem.blur();
+           $elem.blur().addClass('invisible');
          });
     /**
      * Fires when the submenu has closed.
diff --git a/test/visual/drilldown/drilldown-menu-auto-height.html b/test/visual/drilldown/drilldown-menu-auto-height.html
index 3a19b697d..7dd727ef9 100644
--- a/test/visual/drilldown/drilldown-menu-auto-height.html
+++ b/test/visual/drilldown/drilldown-menu-auto-height.html
@@ -27,6 +27,7 @@
       <li><a href="#">Item</a></li>
     </ul>
   </li>
+  <li><a href="#">Item</a></li>
   <li> <a href="#">Item</a>
     <ul class="vertical menu">
       <li><a href="#">Item</a></li>
@@ -67,7 +68,6 @@
       </li>
     </ul>
   </li>
-  <li><a href="#">Item</a></li>
 </ul>
       </div>
     </div>