Make hidden parts of submenus inaccessible without creating tab trap

diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js
index 8a56cf4ede9c10105048e7404612d7b18f53e8a9..817398f1da24fc3b720372751ec0e4317a764ae4 100644 (file)
--- 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 3a19b697d525e3f3f1994c06d15e5b40178eb393..7dd727ef9561ccafcefb8eab3c11c5121afd3eca 100644 (file)
--- 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>