Skip to content

Can't set custom tabindex on mat-expansion-panel-header #22521

@CruzST

Description

@CruzST

Bug, feature request, or proposal:
It appears there is no way to set the tabindex attribute on Angular Material expansion panel headers due to this bit of code:

'[attr.tabindex]': 'disabled ? -1 : 0',

What is the expected behavior?
Setting the tabindex attribute on an Angular Material expansion panel header with tabindex="3" or [attr.tabindex]="myTabIndex" should stick.

What is the current behavior?
The tabindex attribute is overridden by the Angular Material component to be "-1" if disabled or "0" if not disabled.

What are the steps to reproduce?
Add the tabindex attribute to an Angular Material mat-expnsion-panel-header and observe it is not preserved. See stackbliz below. tabindex on the mat-expansion-panel-header get overwritten.

What is the use-case or motivation for changing an existing behavior?
I have a mat-accordion where a button on the header controls the expanding of the panel, not the entire header row. In order to be 508 compliant, the keyboard only user should not be able to tab to the header row as it doesn't function.
See example stackblitz

Which versions of Angular, Material, OS, TypeScript, browsers are affected?
All

Is there anything else we should know?
stackblitz: https://stackblitz.com/edit/angular-gy3hx2-w2l4ch?file=app/expansion-overview-example.html

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/expansion

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions