angular / angular/components

No Main Landmark when Mat Dialog is Open

Abierto
#22,656 3 comentarios 3 reacciones 0 asignados Ver en GitHub
Accessibility area: cdk/overlay need a11y consult P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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)

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Reproducir el caso de mat-dialog abierto y ejecutar tanto axeDevTools como WAVE, tal como se describe en el issue. Determinar si la infracción missing-main-landmark es esperable para la estrategia de renderizado del diálogo o indica un defecto de accesibilidad del componente; se considera terminado cuando se haya llegado a una evaluación clara y, si es necesario, se haya identificado el punto de entrada del diálogo afectado.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
accessibility, frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.