bug(MatSelect): With VoiceOver + Chrome, VoiceOver's focus ring snaps from mat-options to mat-select element
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### 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

6. Continue to go through options and focus ring eventually snaps back to the active option

### 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
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia riproducendo il comportamento di VoiceOver e Chrome all’URL della panoramica di Material select, seguendo i passaggi elencati con un’opzione selezionata in precedenza. Traccia il comportamento del focus di mat-select e mat-option, quindi verifica che la navigazione verso l’elemento selezionato mantenga l’anello di focus su quella mat-option e che il flusso di navigazione esistente continui a funzionare.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- accessibility, frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 38/100