feat(material/tabs): Refactor MatTabNav to follow the ARIA tab design pattern.

Author: zelliott

src/components-examples/material/tabs/index.ts

@@ -20,6 +20,7 @@ import {TabGroupLazyLoadedExample} from './tab-group-lazy-loaded/tab-group-lazy-
 import {TabGroupStretchedExample} from './tab-group-stretched/tab-group-stretched-example';
 import {TabGroupThemeExample} from './tab-group-theme/tab-group-theme-example';
 import {TabNavBarBasicExample} from './tab-nav-bar-basic/tab-nav-bar-basic-example';
+import {TabNavBarWithOutletExample} from './tab-nav-bar-with-outlet/tab-nav-bar-with-outlet-example';
 
 export {
   TabGroupAlignExample,
@@ -35,6 +36,7 @@ export {
   TabGroupStretchedExample,
   TabGroupThemeExample,
   TabNavBarBasicExample,
+  TabNavBarWithOutletExample,
 };
 
 const EXAMPLES = [
@@ -51,6 +53,7 @@ const EXAMPLES = [
   TabGroupStretchedExample,
   TabGroupThemeExample,
   TabNavBarBasicExample,
+  TabNavBarWithOutletExample,
 ];
 
 @NgModule({

src/components-examples/material/tabs/tab-nav-bar-with-outlet/tab-nav-bar-with-outlet-example.css

@@ -0,0 +1,4 @@
+.example-action-button {
+  margin-top: 8px;
+  margin-right: 8px;
+}

src/components-examples/material/tabs/tab-nav-bar-with-outlet/tab-nav-bar-with-outlet-example.html

@@ -0,0 +1,16 @@
+<!-- #docregion mat-tab-nav -->
+<nav mat-tab-nav-bar [backgroundColor]="background" [outlet]="outlet">
+  <a mat-tab-link *ngFor="let link of links"
+     (click)="activeLink = link"
+     [active]="activeLink == link"> {{link}} </a>
+  <a mat-tab-link disabled>Disabled Link</a>
+</nav>
+<mat-tab-nav-outlet #outlet></mat-tab-nav-outlet>
+<!-- #enddocregion mat-tab-nav -->
+
+<button mat-raised-button class="example-action-button" (click)="toggleBackground()">
+  Toggle background
+</button>
+<button mat-raised-button class="example-action-button" (click)="addLink()">
+  Add link
+</button>

src/components-examples/material/tabs/tab-nav-bar-with-outlet/tab-nav-bar-with-outlet-example.ts

@@ -0,0 +1,24 @@
+import {Component} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
+
+/**
+ * @title Use of the tab nav bar with the dedicated outlet component.
+ */
+@Component({
+  selector: 'tab-nav-bar-with-outlet-example',
+  templateUrl: 'tab-nav-bar-with-outlet-example.html',
+  styleUrls: ['tab-nav-bar-with-outlet-example.css'],
+})
+export class TabNavBarWithOutletExample {
+  links = ['First', 'Second', 'Third'];
+  activeLink = this.links[0];
+  background: ThemePalette = undefined;
+
+  toggleBackground() {
+    this.background = this.background ? undefined : 'primary';
+  }
+
+  addLink() {
+    this.links.push(`Link ${this.links.length + 1}`);
+  }
+}

src/dev-app/tabs/tabs-demo.html

@@ -18,5 +18,7 @@ <h3>Tab group stretched</h3>
 <tab-group-stretched-example></tab-group-stretched-example>
 <h3>Tab group theming</h3>
 <tab-group-theme-example></tab-group-theme-example>
-<h3>Tab Navigation Bar basic</h3>
+<h3>Tab navigation bar basic</h3>
 <tab-nav-bar-basic-example></tab-nav-bar-basic-example>
+<h3>Tab navigation bar with outlet</h3>
+<tab-nav-bar-with-outlet-example></tab-nav-bar-with-outlet-example>

src/material/tabs/public-api.ts

@@ -20,7 +20,7 @@ export {MatTabHeader, _MatTabHeaderBase} from './tab-header';
 export {MatTabLabelWrapper} from './tab-label-wrapper';
 export {MatTab, MAT_TAB_GROUP} from './tab';
 export {MatTabLabel, MAT_TAB} from './tab-label';
-export {MatTabNav, MatTabLink, _MatTabNavBase, _MatTabLinkBase} from './tab-nav-bar/index';
+export {MatTabNav, MatTabLink, MatTabNavOutlet, _MatTabNavBase, _MatTabLinkBase} from './tab-nav-bar/index';
 export {MatTabContent} from './tab-content';
 export {ScrollDirection} from './paginated-tab-header';
 export * from './tabs-animations';

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

@@ -26,6 +26,7 @@ import {
   Input,
   NgZone,
   OnDestroy,
+  OnInit,
   Optional,
   QueryList,
   ViewChild,
@@ -60,7 +61,7 @@ export abstract class _MatTabNavBase
   implements AfterContentChecked, AfterContentInit, OnDestroy
 {
   /** Query list of all tab links of the tab navigation. */
-  abstract override _items: QueryList<MatPaginatedTabHeaderItem & {active: boolean}>;
+  abstract override _items: QueryList<MatPaginatedTabHeaderItem & {active: boolean, _uniqueId: string}>;
 
   /** Background color of the tab nav. */
   @Input()
@@ -92,6 +93,14 @@ export abstract class _MatTabNavBase
   /** Theme color of the nav bar. */
   @Input() color: ThemePalette = 'primary';
 
+  /** Associated outlet controlled by the nav bar. */
+  @Input() outlet?: MatTabNavOutlet;
+
+  /** Returns whether the nav bar should follow the ARIA tab design pattern. */
+  get _isTabDesignPattern() {
+    return !!this.outlet;
+  }
+
   constructor(
     elementRef: ElementRef,
     @Optional() dir: Directionality,
@@ -130,6 +139,12 @@ export abstract class _MatTabNavBase
       if (items[i].active) {
         this.selectedIndex = i;
         this._changeDetectorRef.markForCheck();
+
+        if (this._isTabDesignPattern) {
+          this.outlet!._activeTabId = items[i]._uniqueId;
+          this.outlet!._cdr.markForCheck();
+        }
+
         return;
       }
     }
@@ -157,6 +172,7 @@ export abstract class _MatTabNavBase
     '[class.mat-primary]': 'color !== "warn" && color !== "accent"',
     '[class.mat-accent]': 'color === "accent"',
     '[class.mat-warn]': 'color === "warn"',
+    '[attr.role]': '_isTabDesignPattern ? "tablist" : null'
   },
   encapsulation: ViewEncapsulation.None,
   // tslint:disable-next-line:validate-decorators
@@ -186,6 +202,9 @@ export class MatTabNav extends _MatTabNavBase {
   static ngAcceptInputType_disableRipple: BooleanInput;
 }
 
+// Increasing integer for generating unique ids for tab link components.
+let nextUniqueTabLinkId = 0;
+
 // Boilerplate for applying mixins to MatTabLink.
 const _MatTabLinkMixinBase = mixinTabIndex(mixinDisableRipple(mixinDisabled(class {})));
 
@@ -240,6 +259,13 @@ export class _MatTabLinkBase
     );
   }
 
+  get _index(): number {
+    return this._tabNavBar._items.toArray().indexOf(this);
+  }
+
+  /** Unique id for the component referenced in ARIA attributes. */
+  _uniqueId = `mat-tab-link-${nextUniqueTabLinkId++}`;
+
   constructor(
     private _tabNavBar: _MatTabNavBase,
     /** @docs-private */ public elementRef: ElementRef,
@@ -274,7 +300,21 @@ export class _MatTabLinkBase
   _handleFocus() {
     // Since we allow navigation through tabbing in the nav bar, we
     // have to update the focused index whenever the link receives focus.
-    this._tabNavBar.focusIndex = this._tabNavBar._items.toArray().indexOf(this);
+    this._tabNavBar.focusIndex = this._index;
+  }
+
+  _handleSpace() {
+    if (this._tabNavBar._isTabDesignPattern) {
+      this.elementRef.nativeElement.click();
+    }
+  }
+
+  _getTabIndex() {
+    if (!this._tabNavBar._items) {
+      return this._isActive ? '0' : '-1';
+    }
+
+    return (this._tabNavBar.focusIndex === this._index) ? '0' : '-1';
   }
 
   static ngAcceptInputType_active: BooleanInput;
@@ -292,12 +332,16 @@ export class _MatTabLinkBase
   inputs: ['disabled', 'disableRipple', 'tabIndex'],
   host: {
     'class': 'mat-tab-link mat-focus-indicator',
-    '[attr.aria-current]': 'active ? "page" : null',
+    '[attr.aria-controls]': '_tabNavBar._isTabDesignPattern ? _tabNavBar.outlet._uniqueId : null',
+    '[attr.aria-current]': 'active && !_tabNavBar._isTabDesignPattern ? "page" : null',
     '[attr.aria-disabled]': 'disabled',
-    '[attr.tabIndex]': 'tabIndex',
+    '[attr.aria-selected]': '_tabNavBar._isTabDesignPattern ? (active ? "true" : "false") : null',
+    '[attr.tabIndex]': '_tabNavBar._isTabDesignPattern ? _getTabIndex() : tabIndex',
+    '[attr.role]': '_tabNavBar._isTabDesignPattern ? "tab" : null',
     '[class.mat-tab-disabled]': 'disabled',
     '[class.mat-tab-label-active]': 'active',
     '(focus)': '_handleFocus()',
+    '(keydown.space)': '_handleSpace()'
   },
 })
 export class MatTabLink extends _MatTabLinkBase implements OnDestroy {
@@ -324,3 +368,24 @@ export class MatTabLink extends _MatTabLinkBase implements OnDestroy {
     this._tabLinkRipple._removeTriggerEvents();
   }
 }
+
+// Increasing integer for generating unique ids for tab nav outlet components.
+let nextUniqueTabNavOutletId = 0;
+
+@Component({
+  selector: 'mat-tab-nav-outlet',
+  exportAs: 'matTabNavOutlet',
+  template: '<ng-content select="router-outlet"></ng-content>',
+  host: {
+    '[attr.aria-labelledby]': '_activeTabId || null',
+    'role': 'tabpanel',
+  },
+})
+export class MatTabNavOutlet {
+  _activeTabId?: string;
+
+  /** Unique id for the component referenced in ARIA attributes. */
+  _uniqueId = `mat-tab-nav-outlet-${nextUniqueTabNavOutletId++}`;
+
+  constructor(readonly _cdr: ChangeDetectorRef) {}
+}

src/material/tabs/tabs-module.ts

@@ -20,7 +20,7 @@ import {MatTabGroup} from './tab-group';
 import {MatTabHeader} from './tab-header';
 import {MatTabLabel} from './tab-label';
 import {MatTabLabelWrapper} from './tab-label-wrapper';
-import {MatTabLink, MatTabNav} from './tab-nav-bar/tab-nav-bar';
+import {MatTabLink, MatTabNav, MatTabNavOutlet} from './tab-nav-bar/tab-nav-bar';
 
 @NgModule({
   imports: [
@@ -38,6 +38,7 @@ import {MatTabLink, MatTabNav} from './tab-nav-bar/tab-nav-bar';
     MatTabLabel,
     MatTab,
     MatTabNav,
+    MatTabNavOutlet,
     MatTabLink,
     MatTabContent,
   ],
@@ -48,6 +49,7 @@ import {MatTabLink, MatTabNav} from './tab-nav-bar/tab-nav-bar';
     MatInkBar,
     MatTabLabelWrapper,
     MatTabNav,
+    MatTabNavOutlet,
     MatTabLink,
     MatTabBody,
     MatTabBodyPortal,