angular / angular/components

No Main Landmark when Mat Dialog is Open

Aperta
#22,656 3 commenti 3 reazioni 0 assegnatari Vedi su GitHub
Accessibility area: cdk/overlay need a11y consult P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

When running accessibility assessments I consistently face the "Document must have one main landmark" violation when a mat-dialog is open (despite there being a main landmark in the main shell of our app's markup). When dialogs are closed, there is no issue with this specific violation. I've tried adding a role="main" but this actually causes the accessibility engine to detect both main landmarks and thus reports "Can not have more than one main landmark". Adding role="dialog" to the top level div of the dialog container does not resolve the issue either, though it could be possible that this div level is too nested for a11y to detect the role. Could also be possible this is just an issue inherent in modern modal dialog rendering strategies, as I'm seeing the same violation on other sites such as Facebook and Trello. Curious to hear others' thoughts / assessments on this.

*Note* - I get the same results when testing with both axeDevTools and WAVE

![MainLandmark](https://user-images.githubusercontent.com/55161966/117691630-1fad8200-b18a-11eb-98de-8dcb358099bb.PNG)
![Markup](https://user-images.githubusercontent.com/55161966/117691632-20461880-b18a-11eb-8155-40b13020a24c.png)

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Riprodurre il caso del mat-dialog aperto ed eseguire sia axeDevTools sia WAVE, come descritto nell’issue. Determinare se la violazione missing-main-landmark è prevista per la strategia di rendering del dialogo o indica un difetto di accessibilità del componente; il lavoro è completato quando si è giunti a una valutazione chiara e, se necessario, è stato identificato il punto di ingresso del dialogo interessato.

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
Da chiarire
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.