fix(tabs): don't set aria-controls when there is no content; better empty tab handling (#9763)

* Fixes the tabs directive setting the `controls` attribute when a tab doesn't have content.
* Fixes the tabs adding unnecessary elements when a tab's content consists only of whitespace or it doesn't have content, but any of it's siblings do.
* Switches to a faster way of checking whether a tab element has content.
* Adds unit tests for the `md-no-tab-content` behavior.

Fixes #9108.

Author: crisbeto

src/components/tabs/js/tabsController.js

@@ -44,6 +44,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
   ctrl.hasFocus          = false;
   ctrl.lastClick         = true;
   ctrl.shouldCenterTabs  = shouldCenterTabs();
+  ctrl.tabContentPrefix  = 'tab-content-';
 
   // define public methods
   ctrl.updatePagination   = $mdUtil.debounce(updatePagination, 100);
@@ -334,7 +335,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
       tab = elements.tabs[ i ];
       if (tab.offsetLeft + tab.offsetWidth > totalWidth) break;
     }
-    
+
     if (viewportWidth > tab.offsetWidth) {
       //Canvas width *greater* than tab width: usual positioning
       ctrl.offsetLeft = fixOffset(tab.offsetLeft);
@@ -357,7 +358,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
       tab = elements.tabs[ i ];
       if (tab.offsetLeft + tab.offsetWidth >= ctrl.offsetLeft) break;
     }
-    
+
     if (elements.canvas.clientWidth > tab.offsetWidth) {
       //Canvas width *greater* than tab width: usual positioning
       ctrl.offsetLeft = fixOffset(tab.offsetLeft + tab.offsetWidth - elements.canvas.clientWidth);
@@ -433,18 +434,22 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
             return !ctrl.lastClick
                 && ctrl.hasFocus && this.getIndex() === ctrl.focusIndex;
           },
-          id:           $mdUtil.nextUid()
+          id:           $mdUtil.nextUid(),
+          hasContent: !!(tabData.template && tabData.template.trim())
         },
         tab       = angular.extend(proto, tabData);
     if (angular.isDefined(index)) {
       ctrl.tabs.splice(index, 0, tab);
     } else {
       ctrl.tabs.push(tab);
     }
+
     processQueue();
     updateHasContent();
     $mdUtil.nextTick(function () {
       updatePagination();
+      setAriaControls(tab);
+
       // if autoselect is enabled, select the newly added tab
       if (hasLoaded && ctrl.autoselect) $mdUtil.nextTick(function () {
         $mdUtil.nextTick(function () { select(ctrl.tabs.indexOf(tab)); });
@@ -699,9 +704,14 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
    */
   function updateHasContent () {
     var hasContent  = false;
-    angular.forEach(ctrl.tabs, function (tab) {
-      if (tab.template) hasContent = true;
-    });
+
+    for (var i = 0; i < ctrl.tabs.length; i++) {
+      if (ctrl.tabs[i].hasContent) {
+        hasContent = true;
+        break;
+      }
+    }
+
     ctrl.hasContent = hasContent;
   }
 
@@ -851,4 +861,16 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
     var options = { colorElement: angular.element(elements.inkBar) };
     $mdTabInkRipple.attach(scope, element, options);
   }
+
+  /**
+   * Sets the `aria-controls` attribute to the elements that
+   * correspond to the passed-in tab.
+   * @param tab
+   */
+  function setAriaControls (tab) {
+    if (tab.hasContent) {
+      var nodes = $element[0].querySelectorAll('[md-tab-id="' + tab.id + '"]');
+      angular.element(nodes).attr('aria-controls', ctrl.tabContentPrefix + tab.id);
+    }
+  }
 }

src/components/tabs/js/tabsDirective.js

@@ -148,7 +148,7 @@ function MdTabs ($$mdSvgRegistry) {
                   'class="md-tab" ' +
                   'ng-repeat="tab in $mdTabsCtrl.tabs" ' +
                   'role="tab" ' +
-                  'aria-controls="tab-content-{{::tab.id}}" ' +
+                  'md-tab-id="{{::tab.id}}"' +
                   'aria-selected="{{tab.isActive()}}" ' +
                   'aria-disabled="{{tab.scope.disabled || \'false\'}}" ' +
                   'ng-click="$mdTabsCtrl.select(tab.getIndex())" ' +
@@ -169,7 +169,7 @@ function MdTabs ($$mdSvgRegistry) {
                   'class="md-tab" ' +
                   'tabindex="-1" ' +
                   'id="tab-item-{{::tab.id}}" ' +
-                  'aria-controls="tab-content-{{::tab.id}}" ' +
+                  'md-tab-id="{{::tab.id}}"' +
                   'aria-selected="{{tab.isActive()}}" ' +
                   'aria-disabled="{{tab.scope.disabled || \'false\'}}" ' +
                   'ng-focus="$mdTabsCtrl.hasFocus = true" ' +
@@ -182,13 +182,13 @@ function MdTabs ($$mdSvgRegistry) {
         '</md-tabs-wrapper> ' +
         '<md-tabs-content-wrapper ng-show="$mdTabsCtrl.hasContent && $mdTabsCtrl.selectedIndex >= 0" class="_md"> ' +
           '<md-tab-content ' +
-              'id="tab-content-{{::tab.id}}" ' +
+              'id="{{:: $mdTabsCtrl.tabContentPrefix + tab.id}}" ' +
               'class="_md" ' +
               'role="tabpanel" ' +
               'aria-labelledby="tab-item-{{::tab.id}}" ' +
               'md-swipe-left="$mdTabsCtrl.swipeContent && $mdTabsCtrl.incrementIndex(1)" ' +
               'md-swipe-right="$mdTabsCtrl.swipeContent && $mdTabsCtrl.incrementIndex(-1)" ' +
-              'ng-if="$mdTabsCtrl.hasContent" ' +
+              'ng-if="tab.hasContent" ' +
               'ng-repeat="(index, tab) in $mdTabsCtrl.tabs" ' +
               'ng-class="{ ' +
                 '\'md-no-transition\': $mdTabsCtrl.lastSelectedIndex == null, ' +

src/components/tabs/tabs.spec.js

@@ -338,11 +338,16 @@ describe('<md-tabs>', function () {
 
           done();
         });
-      })
+      });
     });
   });
 
   describe('aria', function () {
+    var $timeout;
+
+    beforeEach(inject(function(_$timeout_) {
+      $timeout = _$timeout_;
+    }));
 
     it('should link tab content to tabItem with auto-generated ids', function () {
       var tabs       = setup('<md-tabs>' +
@@ -351,6 +356,8 @@ describe('<md-tabs>', function () {
       var tabItem    = tabs.find('md-dummy-tab');
       var tabContent = angular.element(tabs[ 0 ].querySelector('md-tab-content'));
 
+      $timeout.flush();
+
       expect(tabs.find('md-tabs-canvas').attr('role')).toBe('tablist');
 
       expect(tabItem.attr('id')).toBeTruthy();
@@ -381,6 +388,18 @@ describe('<md-tabs>', function () {
 
       expect(tabItem.attr('role')).toBe('tab');
     });
+
+    it('should not set `aria-controls` if the tab does not have content', function () {
+      var tabs = setup(
+        '<md-tabs>' +
+          '<md-tab label="label!"></md-tab>' +
+        '</md-tabs>'
+      );
+
+      $timeout.flush();
+
+      expect(tabs.find('md-dummy-tab').attr('aria-controls')).toBeFalsy();
+    });
   });
 
   describe('<md-tab>', function () {
@@ -525,4 +544,36 @@ describe('<md-tabs>', function () {
       element.remove();
     }));
   });
+
+  describe('no element content', function() {
+    it('should not add the `md-no-tab-content` class if the element has content', function() {
+      var tabs = setup(
+        '<md-tabs>' +
+           '<md-tab label="label!">content!</md-tab>' +
+        '</md-tabs>'
+      );
+
+      expect(tabs).not.toHaveClass('md-no-tab-content');
+    });
+
+    it('should add the `md-no-tab-content` class if the element does not have content', function() {
+      var tabs = setup(
+        '<md-tabs>' +
+           '<md-tab label="label!"></md-tab>' +
+        '</md-tabs>'
+      );
+
+      expect(tabs).toHaveClass('md-no-tab-content');
+    });
+
+    it('should trim before determining whether the element has content', function() {
+      var tabs = setup(
+        '<md-tabs>' +
+           '<md-tab label="label!">\n\n\n</md-tab>' +
+        '</md-tabs>'
+      );
+
+      expect(tabs).toHaveClass('md-no-tab-content');
+    });
+  });
 });