angular / angular/components

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

Aperta
#26,444 13 commenti 8 reazioni 0 assegnatari Vedi su GitHub
Accessibility area: material/stepper P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dalla Angular Material stepper examples page e riproduci il problema usando la axe DevTools Chrome extension. Ispeziona i ruoli ARIA renderizzati dello stepper e i nodi intermedi tra la tablist e i suoi elementi tab figli. Il lavoro è concluso quando la scansione WCAG 2.1 AA non segnala più "Certain ARIA roles must contain particular children" per gli esempi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
accessibility, frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
38/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.