angular / angular/components

MatStepper: Step header focus treatment is not strong enough

Open
#16,912 1 comment 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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.