angular / angular/components

bug(MatSelect): With VoiceOver + Chrome, VoiceOver's focus ring snaps from mat-options to mat-select element

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

### Is this a regression?

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

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

_No response_

### Description

When navigating through the options in a mat-select dropdown panel using Voiceover, if the currently selected option is active, the focus snaps back to the mat-select element. It returns to focusing on the active mat-option once you've used arrows to navigate one or two items away from the active option.

e.g. On a fruit selector, I've previously selected 'Apple'. Then I re-open the dropdown while using Voiceover and begin navigating through the options. When I reach 'Apple' in the list, suddenly the focus snaps back to the mat-select element rather than the active mat-option in the dropdown list.

### Reproduction

Steps to reproduce:

1. Access https://material.angular.io/components/select/overview
2. Navigate to Basic mat-select with tab
3. Use arrow keys to go through mat-options and select one (e.g. pizza)
4. Open mat-select again and go back through mat-options with arrow keys
5. When the previously selected mat-option (pizza) is active, observe focus ring snaps back to mat-select element
![image](https://user-images.githubusercontent.com/24943424/161581952-82f8aca8-cd0f-4c09-b1fb-fa0fa7e1d212.png)
6. Continue to go through options and focus ring eventually snaps back to the active option
![image](https://user-images.githubusercontent.com/24943424/161581850-80cd3326-9db1-4cc6-b366-adeb281321b4.png)

### Expected Behavior

When I navigate to the currently selected item in the dropdown list, the focus ring should remain on the active mat-option

### Actual Behavior

When I navigate to the currently selected item in the dropdown list, the focus ring snaps back to the mat-select element.

### Environment

Angular: v11, v12, v13 (observed from the latest 3 versions on the official website)
CDK/Material: Material
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

Bắt đầu bằng cách tái hiện hành vi của VoiceOver và Chrome tại URL tổng quan về Material select, làm theo các bước được liệt kê với một tùy chọn đã được chọn trước đó. Theo dõi hành vi tiêu điểm của mat-select và mat-option, sau đó xác minh rằng khi điều hướng đến mục đã chọn, vòng tiêu điểm vẫn nằm trên mat-option đó và luồng điều hướng hiện có vẫn hoạt độ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
Khá rõ ràng
Mức phù hợp với người mới
38/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.