From: Marius Olbertz <marius.olbertz@gmail.com>
Date: Tue, 18 Apr 2017 06:35:49 +0000 (+0200)
Subject: Make Tabs contents focusable using tab.
X-Git-Tag: v6.4.0-rc1~73^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F9960%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Make Tabs contents focusable using tab.

Setting tabindex on properly now prevents tabs from being focused when using tabs rather than the content.
---

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index bac091a11..5ba52f311 100644
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -60,7 +60,8 @@ class Tabs {
         'role': 'tab',
         'aria-controls': hash,
         'aria-selected': isActive,
-        'id': linkId
+        'id': linkId,
+        'tabindex': isActive ? '0' : '-1'
       });
 
       $tabContent.attr({
@@ -276,7 +277,10 @@ class Tabs {
 
       $target.addClass(`${this.options.linkActiveClass}`);
 
-      $tabLink.attr({'aria-selected': 'true'});
+      $tabLink.attr({
+        'aria-selected': 'true',
+        'tabindex': '0'
+      });
 
       $targetContent
         .addClass(`${this.options.panelActiveClass}`)
@@ -292,7 +296,10 @@ class Tabs {
     var $target_anchor = $target
       .removeClass(`${this.options.linkActiveClass}`)
       .find('[role="tab"]')
-      .attr({ 'aria-selected': 'false' });
+      .attr({ 
+        'aria-selected': 'false',
+        'tabindex': -1
+      });
 
     $(`#${$target_anchor.attr('aria-controls')}`)
       .removeClass(`${this.options.panelActiveClass}`)