Keep collapsed tab focused to allow for opening and closing with keyboard.

Reorganize handling of events.

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index a0ab79ef9bf9a4951494d394486d11046e8cb113..e9c64f940b447eb06aadedb76801185c3fae1be9 100644 (file)
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -111,12 +111,6 @@ class Tabs {
       .on('click.zf.tabs', `.${this.options.linkClass}`, function(e){
         e.preventDefault();
         e.stopPropagation();
-        if ($(this).hasClass('is-active')) {
-          if(_this.options.activeCollapse) {
-             _this._handleCollapse($(this)); 
-          }
-          return;
-        }
         _this._handleTabChange($(this));
       });
   }
@@ -178,6 +172,23 @@ class Tabs {
    * @function
    */
   _handleTabChange($target) {
+    
+    /**
+     * Check for active class on target. Collapse if exists.
+     */
+    if ($target.hasClass('is-active')) {
+        if(this.options.activeCollapse) {
+            this._collapseTab($target);
+            
+           /**
+            * Fires when the zplugin has successfully collapsed tabs.
+            * @event Tabs#collapse
+            */
+            this.$element.trigger('collapse.zf.tabs', [$target]);
+        }
+        return;
+    }
+    
     var $oldTab = this.$element.
           find(`.${this.options.linkClass}.is-active`);
   
@@ -195,22 +206,6 @@ class Tabs {
     this.$element.trigger('change.zf.tabs', [$target]);
   }
   
-  /**
-   * Collapses `$targetContent` defined by `$target`.
-   * @param {jQuery} $target - Tab to collapse.
-   * @fires Tabs#collapse
-   * @function
-   */
-  _handleCollapse($target) {
-    this._collapseTab($target);
-
-    /**
-     * Fires when the plugin has successfully collapsed tab.
-     * @event Tabs#collapse
-     */
-    this.$element.trigger('collapse.zf.tabs', [$target]);
-  }
-  
   /**
    * Opens the tab `$targetContent` defined by `$target`.
    * @param {jQuery} $target - Tab to Open.
@@ -239,8 +234,7 @@ class Tabs {
     var $target_anchor = $target
       .removeClass('is-active')
       .find('[role="tab"]')
-      .attr({ 'aria-selected': 'false' })
-      .blur();
+      .attr({ 'aria-selected': 'false' });
 
     $(`#${$target_anchor.attr('aria-controls')}`)
       .removeClass('is-active')