angular / angular/components

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

Offen
#23,521 3 Kommentare 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

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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit dem verknüpften StackBlitz-Beispiel unter src/app/stepper-overview-example.ts und reproduziere die Tastatursequenz in einem linearen Stepper. Verfolge den aria-disabled-Zustand der Schaltfläche der Schrittüberschrift; fertig, wenn die unterstützende Technologie diese Schaltfläche nicht mehr als deaktiviert meldet, nachdem der erste Schritt abgeschlossen ist und der Fokus zur nächsten Überschrift verschoben wurde.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
accessibility, frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

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