feat(material/tabs): Minor additional changes

Author: zelliott

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

@@ -63,9 +63,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; _uniqueId: string}
-  >;
+  abstract override _items: QueryList<MatPaginatedTabHeaderItem & {active: boolean; id: string}>;
 
   /** Background color of the tab nav. */
   @Input()
@@ -144,7 +142,7 @@ export abstract class _MatTabNavBase
         this._changeDetectorRef.markForCheck();
 
         if (this.panel) {
-          this.panel._activeTabId = items[i]._uniqueId;
+          this.panel._activeTabId = items[i].id;
         }
 
         return;
@@ -258,8 +256,8 @@ export class _MatTabLinkBase
     );
   }
 
-  /** Unique id for the component referenced in ARIA attributes. */
-  _uniqueId = `mat-tab-link-${nextUniqueId++}`;
+  /** Unique id for the tab. */
+  @Input() id = `mat-tab-link-${nextUniqueId++}`;
 
   constructor(
     private _tabNavBar: _MatTabNavBase,
@@ -304,16 +302,17 @@ export class _MatTabLinkBase
     }
   }
 
-  _getTabIndex() {
+  /** Returns the tab's tabindex. */
+  _getTabIndex(): number {
     if (!this._tabNavBar.panel) {
       return this.tabIndex;
     }
 
     if (!this._tabNavBar._items) {
-      return this._isActive ? '0' : '-1';
+      return this._isActive ? 0 : -1;
     }
 
-    return this._tabNavBar.focusIndex === this._getIndex() ? '0' : '-1';
+    return this._tabNavBar.focusIndex === this._getIndex() ? 0 : -1;
   }
 
   /** Returns this item's index in the nav bar. */
@@ -336,11 +335,11 @@ export class _MatTabLinkBase
   inputs: ['disabled', 'disableRipple', 'tabIndex'],
   host: {
     'class': 'mat-tab-link mat-focus-indicator',
-    '[attr.aria-controls]': '_tabNavBar.panel ? _tabNavBar.panel._uniqueId : null',
-    '[attr.aria-current]': 'active && !_tabNavBar.panel ? "page" : null',
+    '[attr.aria-controls]': '_tabNavBar.panel ? _tabNavBar.panel.id : null',
+    '[attr.aria-current]': '(active && !_tabNavBar.panel) ? "page" : null',
     '[attr.aria-disabled]': 'disabled',
     '[attr.aria-selected]': '_tabNavBar.panel ? (active ? "true" : "false") : null',
-    '[attr.id]': '_uniqueId',
+    '[attr.id]': 'id',
     '[attr.tabIndex]': '_getTabIndex()',
     '[attr.role]': '_tabNavBar.panel ? "tab" : null',
     '[class.mat-tab-disabled]': 'disabled',
@@ -382,18 +381,18 @@ export class MatTabLink extends _MatTabLinkBase implements OnDestroy {
   exportAs: 'matTabNavPanel',
   template: '<ng-content select="router-outlet"></ng-content>',
   host: {
-    '[attr.aria-labelledby]': '_activeTabId || null',
-    '[attr.id]': '_uniqueId',
+    '[attr.aria-labelledby]': '_activeTabId',
+    '[attr.id]': 'id',
     'role': 'tabpanel',
   },
   encapsulation: ViewEncapsulation.None,
   // tslint:disable-next-line:validate-decorators
   changeDetection: ChangeDetectionStrategy.Default,
 })
 export class MatTabNavPanel {
+  /** Unique id for the tab panel. */
+  @Input() id = `mat-tab-nav-panel-${nextUniqueId++}`;
+
   /** Id of the active tab in the nav bar. */
   _activeTabId?: string;
-
-  /** Unique id for the component referenced in ARIA attributes. */
-  _uniqueId = `mat-tab-nav-panel-${nextUniqueId++}`;
 }