angular / angular/components

MatStepper: Step header focus treatment is not strong enough

Offen
#16,912 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Accessibility area: material/stepper P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Öffne das Beispiel der Stepper Material-Komponente unter https://material.angular.io/components/stepper/overview und reproduziere den Fokuszustand auf einem Step-Header. Verwende den verlinkten WebAIM-Kontrastprüfer, um das aktuelle Verhältnis zu überprüfen, aktualisiere dann die Fokusdarstellung, sodass der Kontrast zwischen Hintergrund und Seite mindestens 3:1 erreicht, und überprüfe das Beispiel visuell.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
accessibility, frontend
Issue-Typ
Bug
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.