DEV Community

smoothiesrock
smoothiesrock

Posted on

Can't override default mat-step-header tabindex behavior

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

Heroku

Amplify your impact where it matters most — building exceptional apps.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (0)

Survey image

Calling All Cloud Developers - Your Insights Matter

Take the Developer Nation Survey and help shape cloud development trends. Prizes await!

Join Today