feat(material/tabs): Responded to more PR feedback

Author: zelliott

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

@@ -1,11 +1,11 @@
 <!-- #docregion mat-tab-nav -->
-<nav mat-tab-nav-bar [backgroundColor]="background" [panel]="panel">
+<nav mat-tab-nav-bar [backgroundColor]="background" [tabPanel]="tabPanel">
   <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-panel #panel></mat-tab-nav-panel>
+<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
 <!-- #enddocregion mat-tab-nav -->
 
 <button mat-raised-button class="example-action-button" (click)="toggleBackground()">

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

@@ -129,11 +129,11 @@ <h2>Tab nav bar</h2>
   </nav>
 
   <h2>Tab nav bar with panel</h2>
-  <nav mat-tab-nav-bar [panel]="panel">
+  <nav mat-tab-nav-bar [tabPanel]="tabPanel">
     <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-panel #panel></mat-tab-nav-panel>
+  <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
 </div>

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

@@ -131,10 +131,10 @@ export class MatTabNav extends _MatTabNavBase implements AfterContentInit {
   styleUrls: ['tab-link.css'],
   host: {
     'class': 'mdc-tab mat-mdc-tab-link mat-mdc-focus-indicator',
-    '[attr.aria-controls]': '_tabNavBar.panel ? _tabNavBar.panel.id : null',
-    '[attr.aria-current]': '(active && !_tabNavBar.panel) ? "page" : null',
+    '[attr.aria-controls]': '_tabNavBar.tabPanel ? _tabNavBar.tabPanel.id : null',
+    '[attr.aria-current]': '(active && !_tabNavBar.tabPanel) ? "page" : null',
     '[attr.aria-disabled]': 'disabled',
-    '[attr.aria-selected]': '_tabNavBar.panel ? (active ? "true" : "false") : null',
+    '[attr.aria-selected]': '_tabNavBar.tabPanel ? (active ? "true" : "false") : null',
     '[attr.id]': 'id',
     '[attr.tabIndex]': '_getTabIndex()',
     '[class.mat-mdc-tab-disabled]': 'disabled',

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

@@ -64,7 +64,8 @@ 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; id: string}>;
+  abstract override _items: QueryList<
+    MatPaginatedTabHeaderItem & {active: boolean; id: string; index: number}>;
 
   /** Background color of the tab nav. */
   @Input()
@@ -101,7 +102,7 @@ export abstract class _MatTabNavBase
    * follows the ARIA link / navigation landmark pattern. If provided, it follows the
    * ARIA tabs design pattern.
    */
-  @Input() panel?: MatTabNavPanel;
+  @Input() tabPanel?: MatTabNavPanel;
 
   constructor(
     elementRef: ElementRef,
@@ -124,6 +125,7 @@ export abstract class _MatTabNavBase
     // selectedIndex is up-to-date by the time the super class starts looking for it.
     this._items.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
       this.updateActiveLink();
+      this.updateIndices();
     });
 
     super.ngAfterContentInit();
@@ -142,8 +144,8 @@ export abstract class _MatTabNavBase
         this.selectedIndex = i;
         this._changeDetectorRef.markForCheck();
 
-        if (this.panel) {
-          this.panel._activeTabId = items[i].id;
+        if (this.tabPanel) {
+          this.tabPanel._activeTabId = items[i].id;
         }
 
         return;
@@ -154,6 +156,19 @@ export abstract class _MatTabNavBase
     this.selectedIndex = -1;
     this._inkBar.hide();
   }
+
+  /** Updates the indices of the tabs within the nav bar. */
+  updateIndices() {
+    if (!this._items) {
+      return;
+    }
+
+    const items = this._items.toArray();
+
+    for (let i = 0; i < items.length; i++) {
+      items[i].index = i;
+    }
+  }
 }
 
 /**
@@ -260,6 +275,9 @@ export class _MatTabLinkBase
   /** Unique id for the tab. */
   @Input() id = `mat-tab-link-${nextUniqueId++}`;
 
+  /** Index of the tab within the nav bar. Managed by the nav bar. */
+  index =  -1;
+
   constructor(
     private _tabNavBar: _MatTabNavBase,
     /** @docs-private */ public elementRef: ElementRef,
@@ -294,31 +312,26 @@ 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._getIndex();
+    this._tabNavBar.focusIndex = this.index;
   }
 
   _handleKeydown(event: KeyboardEvent) {
-    if (this._tabNavBar.panel && event.keyCode === SPACE) {
+    if (this._tabNavBar.tabPanel && event.keyCode === SPACE) {
       this.elementRef.nativeElement.click();
     }
   }
 
   /** Returns the tab's tabindex. */
   _getTabIndex(): number {
-    if (!this._tabNavBar.panel) {
+    if (!this._tabNavBar.tabPanel) {
       return this.tabIndex;
     }
 
     if (!this._tabNavBar._items) {
       return this._isActive ? 0 : -1;
     }
 
-    return this._tabNavBar.focusIndex === this._getIndex() ? 0 : -1;
-  }
-
-  /** Returns this item's index in the nav bar. */
-  _getIndex(): number {
-    return this._tabNavBar._items.toArray().indexOf(this);
+    return (this._tabNavBar.focusIndex === this.index) ? 0 : -1;
   }
 
   static ngAcceptInputType_active: BooleanInput;
@@ -336,13 +349,13 @@ export class _MatTabLinkBase
   inputs: ['disabled', 'disableRipple', 'tabIndex'],
   host: {
     'class': 'mat-tab-link mat-focus-indicator',
-    '[attr.aria-controls]': '_tabNavBar.panel ? _tabNavBar.panel.id : null',
-    '[attr.aria-current]': '(active && !_tabNavBar.panel) ? "page" : null',
+    '[attr.aria-controls]': '_tabNavBar.tabPanel ? _tabNavBar.tabPanel.id : null',
+    '[attr.aria-current]': '(active && !_tabNavBar.tabPanel) ? "page" : null',
     '[attr.aria-disabled]': 'disabled',
-    '[attr.aria-selected]': '_tabNavBar.panel ? (active ? "true" : "false") : null',
+    '[attr.aria-selected]': '_tabNavBar.tabPanel ? (active ? "true" : "false") : null',
     '[attr.id]': 'id',
     '[attr.tabIndex]': '_getTabIndex()',
-    '[attr.role]': '_tabNavBar.panel ? "tab" : null',
+    '[attr.role]': '_tabNavBar.tabPanel ? "tab" : null',
     '[class.mat-tab-disabled]': 'disabled',
     '[class.mat-tab-label-active]': 'active',
     '(focus)': '_handleFocus()',