fix(navbar): tabs not being read out by screen readers

src/components/navBar/navBar.js

@@ -57,7 +57,7 @@ angular.module('material.components.navBar', ['material.core'])
  *</hljs>
  * <hljs lang="js">
  * (function() {
- *   ‘use strict’;
+ *   'use strict';
  *
  *    $rootScope.$on('$routeChangeSuccess', function(event, current) {
  *      $scope.currentLink = getCurrentLinkFromRoute(current);
@@ -122,7 +122,6 @@ function MdNavBar($mdAria, $mdTheming) {
           '<ul class="_md-nav-bar-list" ng-transclude role="listbox"' +
             'tabindex="0"' +
             'ng-focus="ctrl.onFocus()"' +
-            'ng-blur="ctrl.onBlur()"' +
             'ng-keydown="ctrl.onKeydown($event)"' +
             'aria-label="{{ctrl.navBarAriaLabel}}">' +
           '</ul>' +
@@ -332,16 +331,6 @@ MdNavBarController.prototype.onFocus = function() {
   }
 };
 
-/**
- * Clear tab focus when focus leaves the nav bar.
- */
-MdNavBarController.prototype.onBlur = function() {
-  var tab = this.getFocusedTab();
-  if (tab) {
-    tab.setFocused(false);
-  }
-};
-
 /**
  * Move focus from oldTab to newTab.
  * @param {!NavItemController} oldTab
@@ -425,13 +414,14 @@ function MdNavItem($$rAF) {
       } else if (hasNavSref) {
         navigationAttribute = 'ui-sref="{{ctrl.mdNavSref}}"';
       }
-      
+
       navigationOptions = hasSrefOpts ? 'ui-sref-opts="{{ctrl.srefOpts}}" ' : '';
 
       if (navigationAttribute) {
         buttonTemplate = '' +
           '<md-button class="_md-nav-button md-accent" ' +
             'ng-class="ctrl.getNgClassMap()" ' +
+            'ng-blur="ctrl.setFocused(false)" ' +
             'tabindex="-1" ' +
             navigationOptions +
             navigationAttribute + '>' +
@@ -454,20 +444,19 @@ function MdNavItem($$rAF) {
       'name': '@',
     },
     link: function(scope, element, attrs, controllers) {
-      var mdNavItem = controllers[0];
-      var mdNavBar = controllers[1];
-
       // When accessing the element's contents synchronously, they
       // may not be defined yet because of transclusion. There is a higher
       // chance that it will be accessible if we wait one frame.
       $$rAF(function() {
+        var mdNavItem = controllers[0];
+        var mdNavBar = controllers[1];
+        var navButton = angular.element(element[0].querySelector('._md-nav-button'));
+
         if (!mdNavItem.name) {
           mdNavItem.name = angular.element(element[0]
               .querySelector('._md-nav-button-text')).text().trim();
         }
 
-        var navButton = angular.element(element[0]
-            .querySelector('._md-nav-button'));
         navButton.on('click', function() {
           mdNavBar.mdSelectedNavItem = mdNavItem.name;
           scope.$apply();
@@ -562,6 +551,10 @@ MdNavItemController.prototype.isSelected = function() {
  */
 MdNavItemController.prototype.setFocused = function(isFocused) {
   this._focused = isFocused;
+
+  if (isFocused) {
+    this.getButtonEl().focus();
+  }
 };
 
 /**

src/components/navBar/navBar.spec.js

@@ -244,16 +244,17 @@ describe('mdNavBar', function() {
          $scope.$apply();
 
          expect(getTab('tab2')).toHaveClass('md-focused');
+         expect(document.activeElement).toBe(getTab('tab2')[0]);
        });
 
-    it('removes tab focus when the navbar blurs', function() {
+    it('removes tab focus when the tab blurs', function() {
       $scope.selectedTabRoute = 'tab2';
       createTabs();
 
       tabContainer.triggerHandler('focus');
       expect(getTab('tab2')).toHaveClass('md-focused');
 
-      tabContainer.triggerHandler('blur');
+      getTab('tab2').triggerHandler('blur');
       expect(getTab('tab2')).not.toHaveClass('md-focused');
     });
 
@@ -273,6 +274,7 @@ describe('mdNavBar', function() {
       $scope.$apply();
 
       expect(getTab('tab1')).toHaveClass('md-focused');
+      expect(document.activeElement).toBe(getTab('tab1')[0]);
       expect(getTab('tab2')).not.toHaveClass('md-focused');
       expect(getTab('tab3')).not.toHaveClass('md-focused');
     });
@@ -295,6 +297,7 @@ describe('mdNavBar', function() {
       expect(getTab('tab1')).not.toHaveClass('md-focused');
       expect(getTab('tab2')).not.toHaveClass('md-focused');
       expect(getTab('tab3')).toHaveClass('md-focused');
+      expect(document.activeElement).toBe(getTab('tab3')[0]);
     });
 
     it('enter selects a tab', function() {