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']) * * * (function() { - * ‘use strict’; + * 'use strict'; * * $rootScope.$on('$routeChangeSuccess', function(event, current) { * $scope.currentLink = getCurrentLinkFromRoute(current); @@ -122,7 +122,6 @@ function MdNavBar($mdAria, $mdTheming) { '' + @@ -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 = '' + '' + @@ -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() {