angular / angular/components

bug(MatTooltip): A11y - Screen readers landmark issue with matTooltip

Đang mở
#21,173 4 bình luận 0 reaction 0 người được giao Xem trên GitHub
Accessibility area: material/tooltip 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ả

#### Reproduction
When using the `matTooltip` screen readers confused about the landmark and duplicate the announcement (e.g. main, list, group etc.).
This can make a lot of confusion for visually impaired users.

https://stackblitz.com/edit/angular-gizwqa?file=src%2Fapp%2Ftooltip-overview-example.html

Steps to reproduce (in the example above):
1. Navigate to the first button with keyboard (using Tab key).
2. Screen reader will announce the new landmark, the button and the tooltip: _My buttons grouping Button1 button Info about the action_
3. Navigate to second and last buttons, in the last button the landmark will be announced again.
4. Navigate only throw 2 last buttons - the screen reader will announce only the button as expected.
5. Navigate to the first button - the landmark will be announced again (and so on the last 3 button).


#### Expected Behavior

Screen readers will announce the landmark only once (when entering to the landmark)
In the example:
- My buttons grouping Button1 button Info about the action
- Button2 button
- Button3 button

#### Actual Behavior

Screen readers duplicated the announcement.
In the example:
- My buttons grouping Button1 button Info about the action
- Button2 button
- My buttons grouping Button3 button

#### Environment

- Angular: 11.0.2 (also in V10)
- CDK/Material: 11.0.1
- Browser(s): Chrome V87
(tested with NVDA in Firefox and worked as expected).
- Screen readers: NVDA V2020.2, JAWS 2020

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

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

Hướng nghiên cứu

Mở StackBlitz được liên kết và bắt đầu với src/app/tooltip-overview-example.html; tái hiện các thông báo bằng các trình đọc màn hình được liệt kê và các bước dùng bàn phím. Theo dõi hành vi matTooltip liên quan đến thông báo landmark, sau đó xác minh rằng ví dụ chỉ thông báo landmark một lần và khớp với đầu ra mong đợi.

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ó
4/5
Thời gian dự kiến
3-5 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.