fix(tabs): Add role to mat-tab-nav-bar and mat-tab-link

This is already correctly set on the main tab component:
https://material.angular.io/components/tabs/overview

mat-tab-group has role="tablist"
https://github.com/angular/material2/blob/abc3d38c57146443c848d5ba26fd2fab8ca185d6/src/lib/tabs/tab-header.html#L11

mat-tab has role="tab"
https://github.com/angular/material2/blob/abc3d38c57146443c848d5ba26fd2fab8ca185d6/src/lib/tabs/tab-group.html#L6

But the standalone version mat-tab-nav-bar and mat-tab-link do not have role set.

This is a potential breaking change insofar as someone was already setting role explicitly (test
added for this case to verify it doesn't break), but the impact is low and should be rare: I have
found no examples on github and only two examples in google3 of role being set, and at worse it sets
role="tablist" on mat-tab-nav-bar, which would result in a duplicate role="tablist" nested one layer
below, but which is not that harmful and is easy to fix. Existing code that directly sets role on
mat-tab-link will have that role overridden, but I don't know that this is currently happening.

Author: stevenyxu

src/lib/tabs/tab-nav-bar/tab-nav-bar.html

@@ -1,5 +1,4 @@
-<div class="mat-tab-links" (cdkObserveContent)="_alignInkBar()">
+<div class="mat-tab-links" (cdkObserveContent)="_alignInkBar()" role="tablist">
   <ng-content></ng-content>
   <mat-ink-bar></mat-ink-bar>
 </div>
-

src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -16,6 +16,7 @@ describe('MatTabNavBar', () => {
       imports: [MatTabsModule],
       declarations: [
         SimpleTabNavBarTestApp,
+        TabLink,
         TabLinkWithNgIf,
         TabLinkWithTabIndexBinding,
         TabLinkWithNativeTabindexAttr,
@@ -273,6 +274,16 @@ describe('MatTabNavBar', () => {
 
     expect(tabLink.tabIndex).toBe(3, 'Expected the tabIndex to be have been set to 3.');
   });
+
+  it('should set role on tablist and tab', () => {
+    const fixture = TestBed.createComponent(TabLink);
+    fixture.detectChanges();
+
+    const tabList = fixture.debugElement.query(By.css('.mat-tab-links'));
+    expect(tabList.nativeElement.getAttribute('role')).toEqual('tablist');
+    const tabLinkElement = tabList.query(By.directive(MatTabLink)).nativeElement;
+    expect(tabLinkElement.getAttribute('role')).toEqual('tab');
+  });
 });
 
 @Component({
@@ -301,6 +312,15 @@ class SimpleTabNavBarTestApp {
   activeIndex = 0;
 }
 
+@Component({
+  template: `
+    <nav mat-tab-nav-bar>
+      <a mat-tab-link role="willbeoverridden">Link</a>
+    </nav>
+  `
+})
+class TabLink {}
+
 @Component({
   template: `
     <nav mat-tab-nav-bar>

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -172,6 +172,7 @@ export const _MatTabLinkMixinBase =
   inputs: ['disabled', 'disableRipple', 'tabIndex'],
   host: {
     'class': 'mat-tab-link',
+    'role': 'tab',
     '[attr.aria-disabled]': 'disabled.toString()',
     '[attr.tabIndex]': 'tabIndex',
     '[class.mat-tab-disabled]': 'disabled',