angular / angular/components

bug(MatCheckbox): Tooltip not shown on keyboard navigation

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

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14

### Description

Hi, after upgrading to Angular v15 tooltips are no longer displayed when navigating to a checkbox element via keyboard.

I added a [repro link on stackblitz ](https://stackblitz.com/edit/hvjxck?file=src%2Fapp%2Fradio-overview-example.html)which has a radio button and a checkbox. You can see that when navigating to the radio button via keyboard the tooltip is shown, but when doing the same to the checkbox, nothing is displayed.

I looked over the tooltip code where the [events are being monitored](https://github.com/angular/components/blob/15.2.x/src/material/tooltip/tooltip.ts#L376-L387). This fires on the keyboard focus event for the radio, but not for the checkbox.

We can see that the second parameter of the `monitor` method is left default, which is `false`, this means that it will not check if an event was fired on a children. For radio buttons and checkboxes the event (focus) is fired on a children, on the input. So it is strange that for the radio button this works.

Looking into the FocusMonitor code, I saw that on the focus event (`_onFocus`), [elementInfo](https://github.com/angular/components/blob/15.2.x/src/cdk/a11y/focus-monitor/focus-monitor.ts#L425) came with `checkChildren` on `true` for the radio, but on `false` for the checkbox. Now, on the tooltip code, all the monitors have the default value for `checkChildren` which is false.

I looked after this in the radio code and saw that the `monitor` is [called with checkChildren on true](https://github.com/angular/components/blob/15.2.x/src/material/radio/radio.ts#L561). So this is why the tooltip fires on the radio.

But the tooltip did fire on the checkbox in v14 too; not anymore now in the new MDC checkbox, there is no monitor called with `checkChildren` on `true`. If you open the legacy checkbox code, you can see that it was, so that is why it worked before.

So this worked before and still works using the same mechanism for other elements (like radio, but probably others too), but seems like a strange way, since the tooltip doesn't fire because of the monitor inside the tooltip directive, but a custom monitor inside the respective components.

Could the tooltip monitor all the elements using `checkChildren` on `true` or do you think it could cause issues?

Tested this on v15, but probably is the same for v16 and v17.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/hvjxck?file=src%2Fapp%2Fradio-overview-example.html
Steps to reproduce:
1. Navigate to the checkbox via tab key
2. Observe that the tooltip is not shown

### Expected Behavior

Tooltip is visible when navigating via keyboard on checkboxes.

### Actual Behavior

Tooltip is not visible when navigating via keyboard on checkboxes.

### Environment

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

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 điều hướng bằng bàn phím từ StackBlitz được liên kết, sau đó đọc src/material/tooltip/tooltip.ts và src/cdk/a11y/focus-monitor/focus-monitor.ts xung quanh các dòng được đề cập về việc giám sát và xử lý focus. So sánh lệnh gọi monitor trong src/material/radio/radio.ts với các phần triển khai checkbox của MDC và legacy. Hoàn thành khi các checkbox được focus bằng bàn phím hiển thị tooltip của chúng mà không làm hồi quy hành vi của radio.

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
47/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.