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

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',