Use pull request #11579 from ncoden/fix/accordion-menu-is-active-on-close-11383 for...

54785ea7f fix: clear "is-active" class when menu is closed in AccordionMenu
5b105ac8e test: add tests to check attributes when AccordionMenu is opened/closed
a221e8ae4 refactor: simplify AccordionMenu "up" and "down" methods

Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>

diff --git a/js/foundation.accordionMenu.js b/js/foundation.accordionMenu.js
index b99c5245b24033c671aa670b2fe3d40b9c9286dd..8f1c00c6584373503193979a6d1f9954c8341e7d 100644 (file)
--- a/js/foundation.accordionMenu.js
+++ b/js/foundation.accordionMenu.js
@@ -234,13 +234,13 @@ class AccordionMenu extends Plugin {
    * @fires AccordionMenu#down
    */
   down($target) {
-    var _this = this;
-
     if(!this.options.multiOpen) {
       this.up(this.$element.find('.is-active').not($target.parentsUntil(this.$element).add($target)));
     }
 
-    $target.addClass('is-active').attr({'aria-hidden': false});
+    $target
+      .addClass('is-active')
+      .attr({ 'aria-hidden': false });
 
     if(this.options.submenuToggle) {
       $target.prev('.submenu-toggle').attr({'aria-expanded': true});
@@ -249,12 +249,12 @@ class AccordionMenu extends Plugin {
       $target.parent('.is-accordion-submenu-parent').attr({'aria-expanded': true});
     }
 
-    $target.slideDown(_this.options.slideSpeed, function () {
+    $target.slideDown(this.options.slideSpeed, () => {
       /**
        * Fires when the menu is done opening.
        * @event AccordionMenu#down
        */
-      _this.$element.trigger('down.zf.accordionMenu', [$target]);
+      this.$element.trigger('down.zf.accordionMenu', [$target]);
     });
   }
 
@@ -264,23 +264,28 @@ class AccordionMenu extends Plugin {
    * @fires AccordionMenu#up
    */
   up($target) {
-    var _this = this;
-    $target.slideUp(_this.options.slideSpeed, function () {
-      /**
-       * Fires when the menu is done collapsing up.
-       * @event AccordionMenu#up
-       */
-      _this.$element.trigger('up.zf.accordionMenu', [$target]);
-    });
+    const $submenus = $target.find('[data-submenu]');
+    const $allmenus = $target.add($submenus);
 
-    var $menus = $target.find('[data-submenu]').slideUp(0).addBack().attr('aria-hidden', true);
+    $submenus.slideUp(0);
+    $allmenus
+      .removeClass('is-active')
+      .attr('aria-hidden', true);
 
     if(this.options.submenuToggle) {
-      $menus.prev('.submenu-toggle').attr('aria-expanded', false);
+      $allmenus.prev('.submenu-toggle').attr('aria-expanded', false);
     }
     else {
-      $menus.parent('.is-accordion-submenu-parent').attr('aria-expanded', false);
+      $allmenus.parent('.is-accordion-submenu-parent').attr('aria-expanded', false);
     }
+
+    $target.slideUp(this.options.slideSpeed, () => {
+      /**
+       * Fires when the menu is done collapsing up.
+       * @event AccordionMenu#up
+       */
+      this.$element.trigger('up.zf.accordionMenu', [$target]);
+    });
   }
 
   /**

diff --git a/test/javascript/components/accordionMenu.js b/test/javascript/components/accordionMenu.js
index d2b57796d1f0f046f4f73db957ffead2c98a7ecd..d1f5a8b9e4f58d635d8d40ef11d340f10bdb90e9 100644 (file)
--- a/test/javascript/components/accordionMenu.js
+++ b/test/javascript/components/accordionMenu.js
@@ -43,18 +43,24 @@ describe('Accordion Menu', function() {
       plugin.options.should.be.an('object');
     });
   });
-  
+
   describe('up()', function() {
     it('closes the targeted submenu', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.AccordionMenu($html);
+      const $submenu = $html.find('.is-accordion-submenu').eq(0);
 
       // Open it first
-      plugin.down($html.find('.is-accordion-submenu').eq(0));
-      
-      plugin.up($html.find('.is-accordion-submenu').eq(0));
+      plugin.down($submenu);
+
+      plugin.up($submenu);
+
       setTimeout(() => {
-        $html.find('.is-accordion-submenu').eq(0).should.be.hidden;
+        // Should be hidden
+        $submenu.should.be.hidden;
+        // Should have attributes updated and without active classe
+        $submenu.should.have.attr('aria-hidden', 'true');
+        $submenu.should.not.have.class('is-active');
         done();
       }, 1);
     });
@@ -89,9 +95,15 @@ describe('Accordion Menu', function() {
     it('opens the targeted submenu', function() {
       $html = $(template).appendTo('body');
       plugin = new Foundation.AccordionMenu($html, {});
+      const $submenu = $html.find('.is-accordion-submenu').eq(0);
 
-      plugin.down($html.find('.is-accordion-submenu').eq(0));
-      $html.find('.is-accordion-submenu').eq(0).should.be.visible;
+      plugin.down($submenu);
+
+      // Should be visible
+      $submenu.should.be.visible;
+      // Should have attributes updated and with an active classe
+      $submenu.should.have.attr('aria-hidden', 'false');
+      $submenu.should.have.class('is-active');
     });
 
     it('toggles attributes of title of the targeted submenu', function() {
@@ -108,7 +120,7 @@ describe('Accordion Menu', function() {
 
       // Open another one first
       plugin.down($html.find('.is-accordion-submenu').eq(0));
-      
+
       plugin.down($html.find('.is-accordion-submenu').eq(2));
       $html.find('.is-accordion-submenu').eq(0).should.be.hidden;
     });
@@ -119,7 +131,7 @@ describe('Accordion Menu', function() {
 
       // Open another one first
       plugin.down($html.find('.is-accordion-submenu').eq(0));
-      
+
       plugin.down($html.find('.is-accordion-submenu').eq(2));
       $html.find('.is-accordion-submenu').eq(0).should.be.visible;
     });