MatStepper: Step header focus treatment is not strong enough
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### Reproduction
Open any example with Stepper material component:
https://material.angular.io/components/stepper/overview
Focus on it and check background color for active state (rgba(0,0,0, .04))
For white background it's #f5f5f5
https://webaim.org/resources/contrastchecker/?fcolor=F5F5F5&bcolor=FFFFFF
#### Expected Behavior
Color contrast between background for focus state and page background will be at least 3:1
#### Actual Behavior
Color contrast is 1.09:1
Contributor guide
Research direction
Open the Stepper Material component example at https://material.angular.io/components/stepper/overview and reproduce the focus state on a step header. Use the linked WebAIM contrast checker to verify the current ratio, then update the focus treatment so the background-to-page contrast reaches at least 3:1 and verify the example visually.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100