fix(navBar): automatically add aria-label for navBarItem (#10219)

NavBarItems should populate aria-label attribute automatically

* Inject $mdAria into navBarItem controller
* Use text content from element to populate aria-label during postLink
* Create new spec tests

Fixes #10110

Author: clshortfuse

src/components/navBar/navBar.js

@@ -94,6 +94,7 @@ angular.module('material.components.navBar', ['material.core'])
  *     (https://ui-router.github.io/docs/latest/interfaces/transition.transitionoptions.html).
  * @param {string=} name The name of this link. Used by the nav bar to know
  *     which link is currently selected.
+ * @param {string=} aria-label Adds alternative text for accessibility
  *
  * @usage
  * See `<md-nav-bar>` for usage.
@@ -387,7 +388,7 @@ MdNavBarController.prototype.onKeydown = function(e) {
 /**
  * @ngInject
  */
-function MdNavItem($$rAF) {
+function MdNavItem($mdAria, $$rAF) {
   return {
     restrict: 'E',
     require: ['mdNavItem', '^mdNavBar'],
@@ -467,6 +468,8 @@ function MdNavItem($$rAF) {
           mdNavBar.mdSelectedNavItem = mdNavItem.name;
           scope.$apply();
         });
+
+        $mdAria.expectWithText(element, 'aria-label');
       });
     }
   };

src/components/navBar/navBar.spec.js

@@ -42,7 +42,7 @@ describe('mdNavBar', function() {
         '  <md-nav-item md-nav-href="#2" name="tab2">' +
         '    tab2' +
         '  </md-nav-item>' +
-        '  <md-nav-item md-nav-href="#3" name="tab3">' +
+        '  <md-nav-item md-nav-href="#3" name="tab3" aria-label="foo">' +
         '    tab3' +
         '  </md-nav-item>' +
         '</md-nav-bar>');
@@ -328,6 +328,17 @@ describe('mdNavBar', function() {
 
       expect(tab2Ctrl.getButtonEl().click).toHaveBeenCalled();
     });
+
+    it('automatically adds label to nav items', function() {
+      createTabs();
+      expect(getTab('tab1').parent().attr('aria-label')).toBe('tab1');
+      expect(getTab('tab2').parent().attr('aria-label')).toBe('tab2');
+    });
+
+    it('does not change aria-label on nav items', function() {
+      createTabs();
+      expect(getTab('tab3').parent().attr('aria-label')).toBe('foo');
+    });
   });
 
   function getTab(tabName) {