-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
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