angular / angular/components

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

Abierto
#24,729 0 comentarios 0 reacciones 0 asignados Ver en GitHub
Accessibility area: material/select P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### 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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza reproduciendo el comportamiento de VoiceOver y Chrome en la URL de descripción general de Material select, siguiendo los pasos indicados con una opción seleccionada previamente. Rastrea el comportamiento del foco de mat-select y mat-option y, a continuación, verifica que al navegar hasta el elemento seleccionado el anillo de foco se mantiene en esa mat-option y que el flujo de navegación existente sigue funcionando.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
accessibility, frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
38/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.