fixup! fix(material/tabs): avoid not having any focusable tabs

Author: crisbeto

goldens/material/tabs/index.api.md

@@ -414,8 +414,6 @@ export class MatTabLink extends InkBarItem implements AfterViewInit, OnDestroy,
     // (undocumented)
     _getRole(): string | null;
     // (undocumented)
-    _getTabIndex(): number;
-    // (undocumented)
     _handleFocus(): void;
     // (undocumented)
     _handleKeydown(event: KeyboardEvent): void;
@@ -438,6 +436,8 @@ export class MatTabLink extends InkBarItem implements AfterViewInit, OnDestroy,
     // (undocumented)
     tabIndex: number;
     // (undocumented)
+    protected _tabIndex: i0.Signal<number>;
+    // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatTabLink, "[mat-tab-link], [matTabLink]", ["matTabLink"], { "active": { "alias": "active"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, ["*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabLink, never>;
@@ -458,6 +458,8 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit
     // (undocumented)
     _fitInkBarToContent: BehaviorSubject<boolean>;
     // (undocumented)
+    _focusedItem: i0.WritableSignal<MatPaginatedTabHeaderItem | null>;
+    // (undocumented)
     _getRole(): string | null;
     // (undocumented)
     _hasFocus(link: MatTabLink): boolean;

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

@@ -22,6 +22,8 @@ import {
   ViewEncapsulation,
   inject,
   HostAttributeToken,
+  signal,
+  computed,
 } from '@angular/core';
 import {
   MAT_RIPPLE_GLOBAL_OPTIONS,
@@ -39,7 +41,7 @@ import {BehaviorSubject, Subject} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
 import {ENTER, SPACE} from '@angular/cdk/keycodes';
 import {MAT_TABS_CONFIG, MatTabsConfig} from '../tab-config';
-import {MatPaginatedTabHeader} from '../paginated-tab-header';
+import {MatPaginatedTabHeader, MatPaginatedTabHeaderItem} from '../paginated-tab-header';
 import {CdkObserveContent} from '@angular/cdk/observers';
 import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
@@ -70,6 +72,8 @@ import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
   imports: [MatRipple, CdkObserveContent],
 })
 export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit, AfterViewInit {
+  _focusedItem = signal<MatPaginatedTabHeaderItem | null>(null);
+
   /** Whether the ink bar should fit its width to the size of the tab label content. */
   @Input({transform: booleanAttribute})
   get fitInkBarToContent(): boolean {
@@ -183,6 +187,11 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit
       .subscribe(() => this.updateActiveLink());
 
     super.ngAfterContentInit();
+
+    // Turn the `change` stream into a signal to try and avoid "changed after checked" errors.
+    this._keyManager!.change.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() =>
+      this._focusedItem.set(this._keyManager?.activeItem || null),
+    );
   }
 
   override ngAfterViewInit() {
@@ -203,12 +212,13 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit
     for (let i = 0; i < items.length; i++) {
       if (items[i].active) {
         this.selectedIndex = i;
-        this._changeDetectorRef.markForCheck();
-
         if (this.tabPanel) {
           this.tabPanel._activeTabId = items[i].id;
         }
-
+        // Updating the `selectedIndex` won't trigger the `change` event on
+        // the key manager so we need to set the signal from here.
+        this._focusedItem.set(items[i]);
+        this._changeDetectorRef.markForCheck();
         return;
       }
     }
@@ -242,7 +252,7 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit
     '[attr.aria-disabled]': 'disabled',
     '[attr.aria-selected]': '_getAriaSelected()',
     '[attr.id]': 'id',
-    '[attr.tabIndex]': '_getTabIndex()',
+    '[attr.tabIndex]': '_tabIndex()',
     '[attr.role]': '_getRole()',
     '[class.mat-mdc-tab-disabled]': 'disabled',
     '[class.mdc-tab--active]': 'active',
@@ -264,6 +274,10 @@ export class MatTabLink
   /** Whether the tab link is active or not. */
   protected _isActive: boolean = false;
 
+  protected _tabIndex = computed(() =>
+    this._tabNavBar._focusedItem() === this ? this.tabIndex : -1,
+  );
+
   /** Whether the link is active. */
   @Input({transform: booleanAttribute})
   get active(): boolean {
@@ -397,10 +411,6 @@ export class MatTabLink
   _getRole(): string | null {
     return this._tabNavBar.tabPanel ? 'tab' : this.elementRef.nativeElement.getAttribute('role');
   }
-
-  _getTabIndex(): number {
-    return this._tabNavBar._hasFocus(this) ? this.tabIndex : -1;
-  }
 }
 
 /**