angular / angular/components

No Main Landmark when Mat Dialog is Open

Offen
#22,656 3 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Accessibility area: cdk/overlay need a11y consult P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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)

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Den Fall mit dem geöffneten mat-dialog reproduzieren und, wie im Issue beschrieben, sowohl axeDevTools als auch WAVE ausführen. Feststellen, ob der Verstoß gegen den fehlenden Main-Landmark für die Rendering-Strategie des Dialogs zu erwarten ist oder auf einen Accessibility-Fehler der Komponente hinweist; abgeschlossen ist die Aufgabe, wenn eine klare Einschätzung vorliegt und, falls erforderlich, der betroffene Dialog-Einstiegspunkt identifiziert 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
Muss geklärt werden
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

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