angular / angular/components

bug(Material Stepper): Certain ARIA roles must contain particular children Error

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

Beschreibung

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

The documentation for the stepper appears to indicate that this should not be occurring based on the role for the stepper being a tablist and the roles for steps being tab. I think the problem comes from some interim nodes between the tabs and the tablist.

### Reproduction

Steps to reproduce:
1. navigate to the material stepper examples page: https://rc.material.angular.io/components/stepper/examples
2. run a scan of it using the axe def tool chrome extension: https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US
3. You will see that it will result in 14 instances of the error "Certain ARIA roles must contain particular children". That is one for each stepper on the example page.

### Expected Behavior

Running the WCAG2.1 AA compliance scan should not find the "Certain ARIA roles must contain particular children" issue which is considered a critical aria issue.

### Actual Behavior

Running the WCAG2.1 AA compliance scan finds the "Certain ARIA roles must contain particular children" issue which is considered a critical aria issue.

There is no clear way to resolve this issue with the stepper component.

### Environment

- Angular: 15
- CDK/Material: 15.1.0
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der Angular Material stepper examples page und reproduziere das Problem mithilfe der axe DevTools Chrome extension. Untersuche die gerenderten ARIA-Rollen des Steppers und die Zwischenknoten zwischen der tablist und ihren tab-Kindern. Als erledigt gilt die Aufgabe, wenn der WCAG 2.1 AA-Scan für die Beispiele nicht mehr "Certain ARIA roles must contain particular children" meldet.

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
38/100

Neue Issues direkt in Ihr Postfach

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