bug(stepper): aria-disabled not properly updated for step header buttons in linear steppers
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### 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.
Contributor guide
Research direction
Start with the linked StackBlitz example at src/app/stepper-overview-example.ts and reproduce the keyboard sequence in a linear stepper. Trace the step header button's aria-disabled state; done when, after the first step is complete and focus moves to the next header, assistive technology no longer reports that button as disabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100