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 bac091a11b61213da15f6b6d0f05bda9c4143711..5ba52f3114e0cf2aa519117867909ed8174d3982 100644 (file)
--- 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}`)