angular / angular/components

bug(MatDialog): Blocked aria-hidden error when hasBackdrop is false

Đang mở
#29,578 6 bình luận 8 reaction 0 người được giao Xem trên GitHub
area: cdk/dialog 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ả

### Description

I am launching a dialog that has a MatDialogConfig property of hasBackdrop = false. Doing so seems to still attach a aria-hidden="true" property to DOM elements that are siblings to the cdk overlay container. This in turn seems to cause a console error of "Blocked aria-hidden on..." when interacting with DOM elements that live underneath one of those sibling elements while the dialog is open. The console error seems to be intermittent.

### Reproduction

stackblitz link: https://stackblitz.com/edit/ue8xe5
1. launch dialog
2. while dialog is open click into the text box
3. console error should appear (can be intermittent)

### Expected Behavior

I wouldn't expect the console error to occur

### Actual Behavior

Console error occurs:
Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

### Environment

- Angular: 18.0.1
- CDK/Material: 18.1.4
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

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

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

Hướng nghiên cứu

Start with the linked StackBlitz reproduction and inspect MatDialogConfig.hasBackdrop=false while following the dialog's aria-hidden behavior. Reproduce the intermittent Chrome console error by focusing the text box while the dialog is open; done means the error no longer occurs and the expected focus behavior is preserved.

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
Khá rõ ràng
Mức phù hợp với người mới
45/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.