fix(nav-bar): improve screen reader support (#11486)

… reader users

* make the nav-bar component a tablist.
* make the nav-item's li element presentational and the button a tab.
* apply the aria-label, if provided, to the button directly, not the li element.

Fixes #11485

<!-- 
Filling out this template is required! Do not delete it when submitting a Pull Request! Without this information, your Pull Request may be auto-closed.
-->
## PR Checklist
Please check that your PR fulfills the following requirements:
- [x] The commit message follows [our guidelines](https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md#-commit-message-format)
- [x] Tests for the changes have been added or this is not a bug fix / enhancement
- [x] Docs have been added, updated, or were not required

## PR Type
What kind of change does this PR introduce?
<!-- Please check the one that applies to this PR using "x". -->
```
[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:
```

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying and link to one or more relevant issues. -->
Issue Number: #11485 

Currently, the nav-bar element is exposed as a listbox accessible to screen reader users. Its nav-item child consists of a li element which currently has role "option" (as appropriate for a listbox child), and the button inside that li is exposed as is.

Screen readers do have a hard time interacting with this construct, since they do not expect an option to contain a button.

## What is the new behavior?

The new behavior is that the nav-bar element is exposed as a tablist, and the button inside the li of the nav-item as a tab accessible. In addition, the aria-label that was originally applied to the nav-item's li element is now applied to the buton, since the li in the tablist/tab pattern is to be marked presentational. aria-label must therefore go onto the element that has role "tab".

No changes besides semantic ARIA exposure has been changed, the keyboard behavior is the same as well as any other behavior this component exposes. Web developers needn't change anything, either.

## Does this PR introduce a breaking change?
```
[ ] Yes
[x] No
```
<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->
<!-- Note that breaking changes are highly unlikely to get merged to master unless the validation is clear and the use case is critical. -->

## Other information

The tests have been adjusted to look for the aria-label on the tab directly, not the parent.

Author: MarcoZehe

src/components/navBar/navBar.js

@@ -31,10 +31,10 @@ angular.module('material.components.navBar', ['material.core'])
  * Alternatively, the user could simply watch the value of `md-selected-nav-item`
  * (`currentNavItem` in the below example) for changes.
  *
- * Accessibility functionality is implemented as a site navigator with a
- * listbox, according to the
- * <a href="https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/#Site_Navigator_Tabbed_Style">
- *   WAI-ARIA Authoring Practices 1.1 Working Draft from March 2016</a>.
+ * Accessibility functionality is implemented as a
+ * <a href="https://www.w3.org/TR/wai-aria-1.0/complete#tablist">
+ *   tablist</a> with
+ * <a href="https://www.w3.org/TR/wai-aria-1.0/complete#tab">tabs</a>.
  * We've kept the `role="navigation"` on the `<nav>`, for backwards compatibility, even though
  *  it is not required in the
  * <a href="https://www.w3.org/TR/wai-aria-practices/#aria_lh_navigation">
@@ -43,7 +43,7 @@ angular.module('material.components.navBar', ['material.core'])
  * @param {string=} md-selected-nav-item The name of the current tab; this must
  *     match the `name` attribute of `<md-nav-item>`.
  * @param {boolean=} md-no-ink-bar If set to true, the ink bar will be hidden.
- * @param {string=} nav-bar-aria-label An `aria-label` applied to the `md-nav-bar`'s listbox
+ * @param {string=} nav-bar-aria-label An `aria-label` applied to the `md-nav-bar`'s tablist
  * for accessibility.
  *
  * @usage
@@ -90,7 +90,10 @@ angular.module('material.components.navBar', ['material.core'])
  * Exactly one of the `md-nav-click`, `md-nav-href`, or `md-nav-sref` attributes are required
  * to be specified.
  *
- * @param {string=} aria-label Adds alternative text for accessibility.
+ * @param {string=} nav-item-aria-label Allows setting or overriding the label that is announced by
+ *     a screen reader for the nav item's button. If this is not set, the nav item's transcluded
+ *     content will be announced. Make sure to set this if the nav item's transcluded content does
+ *     not include descriptive text, for example only an icon.
  * @param {expression=} md-nav-click Expression which will be evaluated when the
  *     link is clicked to change the page. Renders as an `ng-click`.
  * @param {string=} md-nav-href url to transition to when this link is clicked.
@@ -127,7 +130,7 @@ function MdNavBar($mdAria, $mdTheming) {
     template:
       '<div class="md-nav-bar">' +
         '<nav role="navigation">' +
-          '<ul class="_md-nav-bar-list" ng-transclude role="listbox" ' +
+          '<ul class="_md-nav-bar-list" ng-transclude role="tablist" ' +
             'tabindex="0" ' +
             'ng-focus="ctrl.onFocus()" ' +
             'ng-keydown="ctrl.onKeydown($event)" ' +
@@ -444,6 +447,9 @@ function MdNavItem($mdAria, $$rAF, $mdUtil, $window) {
             'ng-blur="ctrl.setFocused(false)" ' +
             'ng-disabled="ctrl.disabled" ' +
             'tabindex="-1" ' +
+            'role="tab" ' +
+            'ng-attr-aria-label="{{ctrl.navItemAriaLabel ? ctrl.navItemAriaLabel : undefined}}" ' +
+            'aria-selected="{{ctrl.isSelected()}}" ' +
             navigationOptions +
             navigationAttribute + '>' +
             '<span ng-transclude class="_md-nav-button-text"></span>' +
@@ -452,8 +458,7 @@ function MdNavItem($mdAria, $$rAF, $mdUtil, $window) {
 
       return '' +
         '<li class="md-nav-item" ' +
-          'role="option" ' +
-          'aria-selected="{{ctrl.isSelected()}}">' +
+          'role="presentation">' +
           (buttonTemplate || '') +
         '</li>';
     },
@@ -463,6 +468,7 @@ function MdNavItem($mdAria, $$rAF, $mdUtil, $window) {
       'mdNavSref': '@?',
       'srefOpts': '=?',
       'name': '@',
+      'navItemAriaLabel': '@?',
     },
     link: function(scope, element, attrs, controllers) {
       var disconnect;
@@ -504,7 +510,9 @@ function MdNavItem($mdAria, $$rAF, $mdUtil, $window) {
           });
         }
 
-        $mdAria.expectWithText(element, 'aria-label');
+        if (!mdNavItem.navItemAriaLabel) {
+          $mdAria.expectWithText(navButton, 'aria-label');
+        }
       });
 
       scope.$on('destroy', function() {
@@ -541,6 +549,9 @@ function MdNavItemController($element) {
   /** @const {?string} */
   this.name;
 
+  /** @type {string} */
+  this.navItemAriaLabel;
+
   // State variables
   /** @private {boolean} */
   this._selected = false;

src/components/navBar/navBar.spec.js

@@ -45,6 +45,9 @@ describe('mdNavBar', function() {
         '  <md-nav-item md-nav-href="#3" name="tab3" aria-label="foo">' +
         '    tab3' +
         '  </md-nav-item>' +
+        '  <md-nav-item md-nav-href="#4" name="tab4" nav-item-aria-label="foo">' +
+        '    tab4' +
+        '  </md-nav-item>' +
         '</md-nav-bar>');
   }
 
@@ -278,15 +281,15 @@ describe('mdNavBar', function() {
       $scope.selectedTabRoute = 'tab1';
       createTabs();
 
-      expect(getTab('tab1').parent().attr('aria-selected')).toBe('true');
-      expect(getTab('tab2').parent().attr('aria-selected')).toBe('false');
-      expect(getTab('tab3').parent().attr('aria-selected')).toBe('false');
+      expect(getTab('tab1').attr('aria-selected')).toBe('true');
+      expect(getTab('tab2').attr('aria-selected')).toBe('false');
+      expect(getTab('tab3').attr('aria-selected')).toBe('false');
 
       updateSelectedTabRoute('tab3');
 
-      expect(getTab('tab1').parent().attr('aria-selected')).toBe('false');
-      expect(getTab('tab2').parent().attr('aria-selected')).toBe('false');
-      expect(getTab('tab3').parent().attr('aria-selected')).toBe('true');
+      expect(getTab('tab1').attr('aria-selected')).toBe('false');
+      expect(getTab('tab2').attr('aria-selected')).toBe('false');
+      expect(getTab('tab3').attr('aria-selected')).toBe('true');
     });
 
     it('sets aria-label on the listbox', function() {
@@ -384,14 +387,19 @@ describe('mdNavBar', function() {
 
     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');
+      expect(getTab('tab1').attr('aria-label')).toBe('tab1');
+      expect(getTab('tab2').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');
     });
+
+    it('does not change nav-item-aria-label on nav item buttons', function() {
+      createTabs();
+      expect(getTab('tab4').attr('aria-label')).toBe('foo');
+    });
   });
 
   function getTab(tabName) {