Add back aria-hidden true to tabs for consistency. Update tests to understand correct...

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index e5c1da85356ef941ab8b1f3bbebcaa1401744d89..596a8c1e9aebaeb7a65345e9d1cc94e077bf43a4 100644 (file)
--- 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 3aeaef986c50192425472151fa40092c0868e217..3181cf037d477f0446a0ae93f627e372e30fde37 100644 (file)
--- 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');
     });