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`.

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)
@@ -458,6 +460,8 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit
     // (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

@@ -219,6 +219,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;
+  }
 }
 
 /**
@@ -395,11 +399,7 @@ export class MatTabLink
   }
 
   _getTabIndex(): number {
-    if (this._tabNavBar.tabPanel) {
-      return this._isActive && !this.disabled ? 0 : -1;
-    } else {
-      return this.disabled ? -1 : this.tabIndex;
-    }
+    return this._tabNavBar._hasFocus(this) ? this.tabIndex : -1;
   }
 }