I'm trying to make all mat-step-header elements keyboard focusable in a stepper component I'm working on. By default, the first item in the tabbing order is set to tabindex="0," whereas the remaining items are always set to -1 by default. Setting all tabindexes to 0 would allow the descriptive text for these elements to be announced to screen readers (which is the desired behavior I'm trying to establish).
I've tried creating a function that iterates through the headers and resets the index, as well as changing the attribute's value in the html, with no success. I've also tried modifying the selectedIndex and editable properties in the html. Changing the selectedIndex property only seems to affect the first mat-step-header element in the tablist. The editable property also seems to be unrelated to the tabindex.
How can I programmatically set all tabindexes to 0?
Source code (first example):
https://v5.material.angular.io/components/stepper/overview
Top comments (0)