fix(material/tabs): avoid not having any focusable tabs (#31144)

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

In #26397 we made it possible to navigate to disabled tabs with the keyboard, however in the tabs nav bar they're still set to `tabindex="-1"` unless they're active. This means that if the nav bar only has disabled tabs, there's no way to enter it.

These changes make it so the tab index is based on the focus index which ensures that at least one tab is always focusable. It also aligns the behavior with `mat-tab-group`.

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

Author: crisbeto

goldens/material/tabs/index.api.md

@@ -15,6 +15,7 @@ import { Direction } from '@angular/cdk/bidi';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { FocusableOption } from '@angular/cdk/a11y';
+import { FocusKeyManager } from '@angular/cdk/a11y';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/cdk/bidi';
@@ -98,6 +99,7 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
     // (undocumented)
     abstract _items: QueryList<MatPaginatedTabHeaderItem>;
     protected abstract _itemSelected(event: KeyboardEvent): void;
+    protected _keyManager: FocusKeyManager<MatPaginatedTabHeaderItem> | undefined;
     // (undocumented)
     abstract _nextPaginator: ElementRef<HTMLElement>;
     // (undocumented)
@@ -412,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;
@@ -436,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>;
@@ -456,8 +458,12 @@ 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;
+    // (undocumented)
     _inkBar: MatInkBar;
     _items: QueryList<MatTabLink>;
     // (undocumented)

src/material/tabs/paginated-tab-header.ts

@@ -119,7 +119,7 @@ export abstract class MatPaginatedTabHeader
   private _scrollDistanceChanged: boolean;
 
   /** Used to manage focus between the tabs. */
-  private _keyManager: FocusKeyManager<MatPaginatedTabHeaderItem>;
+  protected _keyManager: FocusKeyManager<MatPaginatedTabHeaderItem> | undefined;
 
   /** Cached text content of the header. */
   private _currentTextContent: string;
@@ -218,7 +218,9 @@ export abstract class MatPaginatedTabHeader
       // Allow focus to land on disabled tabs, as per https://w3c.github.io/aria-practices/#kbd_disabled_controls
       .skipPredicate(() => false);
 
-    this._keyManager.updateActiveItem(this._selectedIndex);
+    // Fall back to the first link as being active if there isn't a selected one.
+    // This is relevant primarily for the tab nav bar.
+    this._keyManager.updateActiveItem(Math.max(this._selectedIndex, 0));
 
     // Note: We do not need to realign after the first render for proper functioning of the tabs
     // the resize events above should fire when we first start observing the element. However,
@@ -243,7 +245,7 @@ export abstract class MatPaginatedTabHeader
             realign();
           });
         });
-        this._keyManager.withHorizontalOrientation(this._getLayoutDirection());
+        this._keyManager?.withHorizontalOrientation(this._getLayoutDirection());
       });
 
     // If there is a change in the focus key manager we need to emit the `indexFocused`
@@ -339,7 +341,7 @@ export abstract class MatPaginatedTabHeader
         }
         break;
       default:
-        this._keyManager.onKeydown(event);
+        this._keyManager?.onKeydown(event);
     }
   }
 

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

@@ -107,24 +107,6 @@ describe('MatTabNavBar', () => {
         .toBe(true);
     });
 
-    it('should update the tabindex if links are disabled', () => {
-      const tabLinkElements = fixture.debugElement
-        .queryAll(By.css('a'))
-        .map(tabLinkDebugEl => tabLinkDebugEl.nativeElement);
-
-      expect(tabLinkElements.map(tabLink => tabLink.tabIndex))
-        .withContext('Expected first element to be keyboard focusable by default')
-        .toEqual([0, -1, -1]);
-
-      fixture.componentInstance.disabled = true;
-      fixture.changeDetectorRef.markForCheck();
-      fixture.detectChanges();
-
-      expect(tabLinkElements.every(tabLink => tabLink.tabIndex === -1))
-        .withContext('Expected element to no longer be keyboard focusable if disabled.')
-        .toBe(true);
-    });
-
     it('should mark disabled links', () => {
       const tabLinkElement = fixture.debugElement.query(By.css('a')).nativeElement;
 
@@ -303,6 +285,15 @@ describe('MatTabNavBar', () => {
     expect(tabLinks[2].tabIndex).toBe(-1);
   });
 
+  it('should set a tabindex even if the only tab is disabled', () => {
+    const fixture = TestBed.createComponent(TabBarWithDisabledTabOnInit);
+    fixture.detectChanges();
+
+    const tab: HTMLElement = fixture.nativeElement.querySelector('.mat-mdc-tab-link');
+    expect(tab.getAttribute('aria-disabled')).toBe('true');
+    expect(tab.tabIndex).toBe(0);
+  });
+
   it('should setup aria-controls properly', () => {
     const fixture = TestBed.createComponent(SimpleTabNavBarTestApp);
     fixture.detectChanges();
@@ -642,3 +633,14 @@ class TabBarWithInactiveTabsOnInit {
 class TabsWithCustomAnimationDuration {
   links = ['First', 'Second', 'Third'];
 }
+
+@Component({
+  template: `
+    <nav mat-tab-nav-bar [tabPanel]="tabPanel">
+      <a mat-tab-link disabled>Hello</a>
+    </nav>
+    <mat-tab-nav-panel #tabPanel>Tab panel</mat-tab-nav-panel>
+  `,
+  imports: [MatTabsModule],
+})
+class TabBarWithDisabledTabOnInit {}

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;
       }
     }
@@ -219,6 +229,10 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit
   _getRole(): string | null {
     return this.tabPanel ? 'tablist' : this._elementRef.nativeElement.getAttribute('role');
   }
+
+  _hasFocus(link: MatTabLink): boolean {
+    return this._keyManager?.activeItem === link;
+  }
 }
 
 /**
@@ -238,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',
@@ -260,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 {
@@ -393,14 +411,6 @@ export class MatTabLink
   _getRole(): string | null {
     return this._tabNavBar.tabPanel ? 'tab' : this.elementRef.nativeElement.getAttribute('role');
   }
-
-  _getTabIndex(): number {
-    if (this._tabNavBar.tabPanel) {
-      return this._isActive && !this.disabled ? 0 : -1;
-    } else {
-      return this.disabled ? -1 : this.tabIndex;
-    }
-  }
 }
 
 /**