angular / angular/components

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

Open
#23,521 3 comments 0 reactions 0 assignees View on GitHub
Accessibility area: material/stepper P3
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.