From f996310ec804604879694e405b2b854c71c4cf5b Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 25 Oct 2016 23:07:15 +0200
Subject: [PATCH] fix(navbar): tabs not being read out by screen readers

* Fixes the tabs in the navbar not being read out by screen readers. This due to the fact that they were being highlighted as focused, but focus wasn't actually being passed to them.
* Some minor cleanup in the navbar.

Fixes #9383.
---
 src/components/navBar/navBar.js      | 29 +++++++++++-----------------
 src/components/navBar/navBar.spec.js |  7 +++++--
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/navBar/navBar.js b/src/components/navBar/navBar.js
index 82cf6cfa46..ad7627f2da 100644
--- a/src/components/navBar/navBar.js
+++ b/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();
+  }
 };
 
 /**
diff --git a/src/components/navBar/navBar.spec.js b/src/components/navBar/navBar.spec.js
index b35c72ec4f..21aa43c25c 100644
--- a/src/components/navBar/navBar.spec.js
+++ b/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() {