feat(MatStepper): Ability to focus the current step header

[jackalvrus]

Feature Description

I would like to be able to programmatically set focus to the current step header.

Use Case

There are 2 use cases where I would like to be able to programmatically set focus to a step header:

1. When initially loading a page, I want to be able to give focus to the current step header.
2. When switching between steps programmatically using MatStepper.next, if anything has been done that caused the focus to shift outside of the stepper, the intended behavior of focusing the newly-selected header does not happen. I need to be able to move the focus back to the current step header.

[zarend]

Hello,

Thank you for reaching out. Changing which element is focused without user input can cause accessibility issues. For that reason, it would be hard for us to consider adding that as a feature.

Why do you want to move the focus back into the stepper? Are there other ways you can achieve.

-Zach

[jackalvrus]

Javascript gives us the ability to set focus programmatically. It is up to us as developers to use that ability wisely.

In my case, the focus leaves the stepper because there is a process between steps to retrieve data using an HTTP request. While this is happening, we show a progress spinner on an overlay. When the HTTP request completes, we call MatStepper.next to advance to the next step. Showing the overlay causes the focus to go to the body element. I need to set the focus back to the proper element (the next step header) once the overlay is removed. Note that the overlay is a simple div with position:absolute, not a CDK overlay.

Even if there is a solution to the intra-step issue, it would still be helpful to be able to initialize focus as desired on page load.

[zarend]

Hello,

Thanks for getting back to us.

Javascript gives us the ability to set focus programmatically. It is up to us as developers to use that ability wisely.

I believe there should still be a way for you manage focus for your specific application, but I do not think this is something we need to build into the stepper component. Having a loading spinner in the middle of steps in the stepper is not something we want to build into the Stepper component.

What you're doing sounds reasonable, and I think there should be a way to do it using our library. I think that this can be accomplished by using some of the other components and directives in our library.

Sounds like when the overlay with spinner closes. You want browser focus to go back to what it was on before the spinner overlay opened. I think using Dialog would be easier than using Overlay here. That's because the dialog will restore focus to where it originally was when closing.

Am I understanding your use case correctly?

-Zach

[jackalvrus]

I'm in no way suggesting that a loading spinner be built into the stepper.

The same thing can happen if you disable the form while executing the HTTP request. Example: https://stackblitz.com/edit/mbcuhm

It's possible that the intra-step focus issue can be solved using focus restoration. However, that doesn't address the initial focus issue.

To me this request seems to be consistent with focus management features provided by other Material components. For example, MatDialog provides an initial focus feature that includes the dialog itself, and the MatTab component provides a focusTab method.