angular / angular/components

No Main Landmark when Mat Dialog is Open

Đang mở
#22,656 3 bình luận 3 reaction 0 người được giao Xem trên GitHub
Accessibility area: cdk/overlay need a11y consult P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

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)

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Tái hiện trường hợp mat-dialog đang mở và chạy cả axeDevTools lẫn WAVE, như được mô tả trong issue. Xác định xem vi phạm missing-main-landmark có được mong đợi đối với chiến lược render dialog hay cho thấy lỗi accessibility của component; được xem là hoàn tất khi đưa ra được đánh giá rõ ràng và, nếu cần, xác định được entry point của dialog bị ảnh hưởng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
accessibility, frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.