fix(material/expansion): unable to assign custom tabindex on header (#22523)

Adds the ability to assign a custom `tabindex` to the expansion panel header.

Fixes #22521.

Author: crisbeto

src/material/expansion/expansion-panel-header.ts

@@ -10,6 +10,7 @@ import {FocusableOption, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {ENTER, hasModifierKey, SPACE} from '@angular/cdk/keycodes';
 import {
   AfterViewInit,
+  Attribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -23,6 +24,8 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
+import {HasTabIndex, HasTabIndexCtor, mixinTabIndex} from '@angular/material/core';
+import {NumberInput} from '@angular/cdk/coercion';
 import {EMPTY, merge, Subscription} from 'rxjs';
 import {filter} from 'rxjs/operators';
 import {MatAccordionTogglePosition} from './accordion-base';
@@ -34,6 +37,15 @@ import {
 } from './expansion-panel';
 
 
+// Boilerplate for applying mixins to MatExpansionPanelHeader.
+/** @docs-private */
+abstract class MatExpansionPanelHeaderBase {
+  abstract readonly disabled: boolean;
+}
+const _MatExpansionPanelHeaderMixinBase:
+    HasTabIndexCtor &
+    typeof MatExpansionPanelHeaderBase = mixinTabIndex(MatExpansionPanelHeaderBase);
+
 /**
  * Header element of a `<mat-expansion-panel>`.
  */
@@ -43,14 +55,15 @@ import {
   templateUrl: 'expansion-panel-header.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  inputs: ['tabIndex'],
   animations: [
     matExpansionAnimations.indicatorRotate,
   ],
   host: {
     'class': 'mat-expansion-panel-header mat-focus-indicator',
     'role': 'button',
     '[attr.id]': 'panel._headerId',
-    '[attr.tabindex]': 'disabled ? -1 : 0',
+    '[attr.tabindex]': 'tabIndex',
     '[attr.aria-controls]': '_getPanelId()',
     '[attr.aria-expanded]': '_isExpanded()',
     '[attr.aria-disabled]': 'panel.disabled',
@@ -63,7 +76,8 @@ import {
     '(keydown)': '_keydown($event)',
   },
 })
-export class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, FocusableOption {
+export class MatExpansionPanelHeader extends _MatExpansionPanelHeaderMixinBase implements
+  AfterViewInit, OnDestroy, FocusableOption, HasTabIndex {
   private _parentChangeSubscription = Subscription.EMPTY;
 
   constructor(
@@ -73,11 +87,14 @@ export class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, Focusa
       private _changeDetectorRef: ChangeDetectorRef,
       @Inject(MAT_EXPANSION_PANEL_DEFAULT_OPTIONS) @Optional()
           defaultOptions?: MatExpansionPanelDefaultOptions,
-      @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
+      @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
+      @Attribute('tabindex') tabIndex?: string) {
+    super();
     const accordionHideToggleChange = panel.accordion ?
         panel.accordion._stateChanges.pipe(
             filter(changes => !!(changes['hideToggle'] || changes['togglePosition']))) :
         EMPTY;
+    this.tabIndex = parseInt(tabIndex || '') || 0;
 
     // Since the toggle state depends on an @Input on the panel, we
     // need to subscribe and trigger change detection manually.
@@ -210,6 +227,8 @@ export class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, Focusa
     this._parentChangeSubscription.unsubscribe();
     this._focusMonitor.stopMonitoring(this._element);
   }
+
+  static ngAcceptInputType_tabIndex: NumberInput;
 }
 
 /**

src/material/expansion/expansion.spec.ts

@@ -37,6 +37,7 @@ describe('MatExpansionPanel', () => {
         LazyPanelWithContent,
         LazyPanelOpenOnLoad,
         PanelWithTwoWayBinding,
+        PanelWithHeaderTabindex,
       ],
     });
     TestBed.compileComponents();
@@ -383,6 +384,14 @@ describe('MatExpansionPanel', () => {
     expect(header.nativeElement.style.height).toBe('10px');
   });
 
+  it('should be able to set a custom tabindex on the header', fakeAsync(() => {
+    const fixture = TestBed.createComponent(PanelWithHeaderTabindex);
+    const headerEl = fixture.nativeElement.querySelector('.mat-expansion-panel-header');
+    fixture.detectChanges();
+
+    expect(headerEl.getAttribute('tabindex')).toBe('7');
+  }));
+
   describe('disabled state', () => {
     let fixture: ComponentFixture<PanelWithContent>;
     let panel: HTMLElement;
@@ -487,6 +496,15 @@ describe('MatExpansionPanel', () => {
         expect(header.classList).not.toContain('mat-expanded');
       });
 
+    it('should update the tabindex if the header becomes disabled', () => {
+      expect(header.getAttribute('tabindex')).toBe('0');
+
+      fixture.componentInstance.disabled = true;
+      fixture.detectChanges();
+
+      expect(header.getAttribute('tabindex')).toBe('-1');
+    });
+
   });
 });
 
@@ -578,3 +596,12 @@ class LazyPanelOpenOnLoad {}
 class PanelWithTwoWayBinding {
   expanded = false;
 }
+
+@Component({
+  template: `
+  <mat-expansion-panel>
+    <mat-expansion-panel-header tabindex="7">Panel Title</mat-expansion-panel-header>
+  </mat-expansion-panel>`
+})
+class PanelWithHeaderTabindex {
+}

tools/public_api_guard/material/expansion.d.ts

@@ -95,13 +95,13 @@ export declare class MatExpansionPanelDescription {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatExpansionPanelDescription, never>;
 }
 
-export declare class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, FocusableOption {
+export declare class MatExpansionPanelHeader extends _MatExpansionPanelHeaderMixinBase implements AfterViewInit, OnDestroy, FocusableOption, HasTabIndex {
     _animationMode?: string | undefined;
     collapsedHeight: string;
     get disabled(): boolean;
     expandedHeight: string;
     panel: MatExpansionPanel;
-    constructor(panel: MatExpansionPanel, _element: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, defaultOptions?: MatExpansionPanelDefaultOptions, _animationMode?: string | undefined);
+    constructor(panel: MatExpansionPanel, _element: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, defaultOptions?: MatExpansionPanelDefaultOptions, _animationMode?: string | undefined, tabIndex?: string);
     _getExpandedState(): string;
     _getHeaderHeight(): string | null;
     _getPanelId(): string;
@@ -113,8 +113,9 @@ export declare class MatExpansionPanelHeader implements AfterViewInit, OnDestroy
     focus(origin?: FocusOrigin, options?: FocusOptions): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatExpansionPanelHeader, "mat-expansion-panel-header", never, { "expandedHeight": "expandedHeight"; "collapsedHeight": "collapsedHeight"; }, {}, never, ["mat-panel-title", "mat-panel-description", "*"]>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatExpansionPanelHeader, [{ host: true; }, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ngAcceptInputType_tabIndex: NumberInput;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatExpansionPanelHeader, "mat-expansion-panel-header", never, { "tabIndex": "tabIndex"; "expandedHeight": "expandedHeight"; "collapsedHeight": "collapsedHeight"; }, {}, never, ["mat-panel-title", "mat-panel-description", "*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatExpansionPanelHeader, [{ host: true; }, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
 }
 
 export declare type MatExpansionPanelState = 'expanded' | 'collapsed';