fix(tabs): apply ARIA only to dummy tabs

angular · Apr 15, 2015 · 5ad4472 · 5ad4472
1 parent 9655945
commit 5ad4472
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/src/components/tabs/js/tabsDirective.js b/src/components/tabs/js/tabsDirective.js
@@ -136,11 +136,8 @@
                   tabindex="-1"\
                   class="md-tab"\
                   style="max-width: {{ tabWidth ? tabWidth + \'px\' : \'none\' }}"\
-                  role="tab"\
-                  aria-selected="{{tab.isActive()}}"\
-                  aria-disabled="{{tab.scope.disabled}}"\
-                  aria-controls="tab-content-{{tab.id}}"\
                   ng-repeat="tab in $mdTabsCtrl.tabs"\
+                  role="presentation"\
                   ng-click="$mdTabsCtrl.select(tab.getIndex())"\
                   ng-class="{\
                       \'md-active\':    tab.isActive(),\
@@ -160,7 +157,7 @@
                   role="tab"\
                   aria-controls="tab-content-{{tab.id}}"\
                   aria-selected="{{tab.isActive()}}"\
-                  aria-disabled="{{tab.scope.disabled}}"\
+                  aria-disabled="{{tab.scope.disabled || \'false\'}}"\
                   ng-focus="$mdTabsCtrl.hasFocus = true"\
                   ng-blur="$mdTabsCtrl.hasFocus = false"\
                   ng-repeat="tab in $mdTabsCtrl.tabs"\

diff --git a/src/components/tabs/tabs.spec.js b/src/components/tabs/tabs.spec.js
@@ -16,9 +16,6 @@ describe('<md-tabs>', function() {
               if (!actual.hasClass('md-active')) {
                 fails.push('does not have active class');
               }
-              if (actual.attr('aria-selected') != 'true') {
-                fails.push('aria-selected is not true');
-              }
             }
 
             var results = { pass : fails.length === 0 };
@@ -138,12 +135,16 @@ describe('<md-tabs>', function() {
                        '<md-tab></md-tab>' +
                        '</md-tabs>');
       var tabItems = tabs.find('md-tab-item');
+      var dummyTabs = tabs.find('md-dummy-tab');
 
       expect(tabItems.eq(0)).toBeActiveTab();
       expect(tabs.scope().current).toBe(0);
+      expect(dummyTabs.eq(0).attr('aria-selected')).toBe('true');
 
       tabs.scope().$apply('current = 1');
       expect(tabItems.eq(1)).toBeActiveTab();
+      expect(dummyTabs.eq(0).attr('aria-selected')).toBe('false');
+      expect(dummyTabs.eq(1).attr('aria-selected')).toBe('true');
 
       tabItems.eq(2).triggerHandler('click');
       expect(tabs.scope().current).toBe(2);
@@ -155,18 +156,20 @@ describe('<md-tabs>', function() {
                        '<md-tab ng-disabled="disabled1"></md-tab>' +
                        '</md-tabs>');
       var tabItems = tabs.find('md-tab-item');
+      var dummyTabs = tabs.find('md-dummy-tab');
 
       expect(tabItems.eq(0)).toBeActiveTab();
+      expect(dummyTabs.eq(0).attr('aria-selected')).toBe('true');
 
       tabs.scope().$apply('disabled0 = true');
       expect(tabItems.eq(1)).toBeActiveTab();
-      expect(tabItems.eq(0).attr('aria-disabled')).toBe('true');
-      expect(tabItems.eq(1).attr('aria-disabled')).not.toBe('true');
+      expect(dummyTabs.eq(0).attr('aria-disabled')).toBe('true');
+      expect(dummyTabs.eq(1).attr('aria-disabled')).toBe('false');
 
       tabs.scope().$apply('disabled0 = false; disabled1 = true');
       expect(tabItems.eq(0)).toBeActiveTab();
-      expect(tabItems.eq(0).attr('aria-disabled')).not.toBe('true');
-      expect(tabItems.eq(1).attr('aria-disabled')).toBe('true');
+      expect(dummyTabs.eq(0).attr('aria-disabled')).toBe('false');
+      expect(dummyTabs.eq(1).attr('aria-disabled')).toBe('true');
     });
 
     it('swiping tabs', function() {