From 3623db7154a27445729a0428aafd2c30b4e3ca5f Mon Sep 17 00:00:00 2001
From: Kevin Ball <kmball11@gmail.com>
Date: Thu, 20 Apr 2017 10:12:07 -0700
Subject: [PATCH] Add back aria-hidden true to tabs for consistency. Update
 tests to understand correct attribute removal

---
 js/foundation.tabs.js              | 9 +++++++--
 test/javascript/components/tabs.js | 6 +++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index e5c1da853..596a8c1e9 100644
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -69,6 +69,10 @@ class Tabs {
         'aria-labelledby': linkId
       });
 
+      if(!isActive) {
+        $tabContent.attr('aria-hidden', 'true');
+      }
+
       if(isActive && _this.options.autoFocus){
         $(window).load(function() {
           $('html, body').animate({ scrollTop: $elem.offset().top }, _this.options.deepLinkSmudgeDelay, () => {
@@ -282,7 +286,7 @@ class Tabs {
       });
 
       $targetContent
-        .addClass(`${this.options.panelActiveClass}`)
+        .addClass(`${this.options.panelActiveClass}`).removeAttr('aria-hidden');
   }
 
   /**
@@ -294,13 +298,14 @@ class Tabs {
     var $target_anchor = $target
       .removeClass(`${this.options.linkActiveClass}`)
       .find('[role="tab"]')
-      .attr({ 
+      .attr({
         'aria-selected': 'false',
         'tabindex': -1
       });
 
     $(`#${$target_anchor.attr('aria-controls')}`)
       .removeClass(`${this.options.panelActiveClass}`)
+      .attr({ 'aria-hidden': 'true' })
   }
 
   /**
diff --git a/test/javascript/components/tabs.js b/test/javascript/components/tabs.js
index 3aeaef986..3181cf037 100644
--- a/test/javascript/components/tabs.js
+++ b/test/javascript/components/tabs.js
@@ -44,11 +44,11 @@ describe('Tabs', function() {
     it('sets ARIA attributes', function() {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
-            
+
       // Panels
       $html.find('#panel1').should.have.attr('role', 'tabpanel');
       $html.find('#panel1').should.have.attr('aria-labelledby', $html.find('[href="#panel1"]').attr('id'));
-      $html.find('#panel1').should.have.attr('aria-hidden', 'false');
+      $html.find('#panel1').should.not.have.attr('aria-hidden');
       $html.find('#panel2').should.have.attr('aria-hidden', 'true');
 
       // Links
@@ -102,7 +102,7 @@ describe('Tabs', function() {
       plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
 
       plugin.selectTab('#panel2');
-      $html.find('#panel2').should.have.attr('aria-hidden', 'false');
+      $html.find('#panel2').should.have.not.attr('aria-hidden');
       $html.find('[href="#panel2"]').should.have.attr('aria-selected', 'true');
     });
 
-- 
2.47.2