bug(stepper): aria-disabled not properly updated for step header buttons in linear steppers

[amysorto]

Reproduction

Example of a linear stepper with this issue: https://stackblitz.com/angular/vbkvxdpeoml?file=src%2Fapp%2Fstepper-overview-example.ts

Steps to reproduce:

1. Enable linear mode
2. Fill out first step
3. Go back to step header using keyboard navigation
4. Move focus to next step

Expected Behavior

The screen reader should read aloud the content of the button but not mention anything about being disabled since clicking the button will work.

Actual Behavior

The screen reader says the button is disabled.

This is because aria-disabled attribute is still set on the button, but shouldn't be anymore since the step is now complete.

Environment

• Angular: 12.2.4
• CDK/Material: 12.2.4
• Tested on Chrome with NVDA, ChromeVox, and VoiceOver.

[zarend]

Hi @amysorto ,

Thank you for reporting this issue. I an unable to repro on the provided stackblitz: https://stackblitz.com/angular/vbkvxdpeoml?file=src%2Fapp%2Fstepper-overview-example.ts. Below is a video capture of me trying to repro. Could you please let me know if I'm doing the correct reproduction steps? That way we can know if there is a bug that we need to fix.

components.23521.mov

-Zach

[amysorto]

@zarend, yes that's correct. It's also fixed in NVDA now. Can you check for ChromeVox and then close this issue if it's working?

[zarend]

Okay, I can reproduce now. I forgot to enable linear mode 🤦 . Bug can be reproduced without using a screenreader:

1. navigate to Stepper Overview example on https://material.angular.io/components/stepper/overview
2. (Fill out your address has gray disabled appearance and cannot be clicked on)
3. Type asdf into name field
4. (Fill out your address has gray disabled appearance but can be clicked on. It has aria-disabled="true" in the DOM.)

Seems like an invalid state for something to have disabled appearance and aria-disabled="true", but that the user is still able to interact with it.