angular / angular/components

bug(MatAutocompleteModule): Unable to navigate between autocomplete input and overlay options panel using iOS VoiceOver

Offen
#27,442 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Accessibility area: material/autocomplete area: material/select P2
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Using IOS VoiceOver, using gesture to cycle between form controls, skips the overlay panel and thus preventing user from selecting a valid option.

The issue can be reproduced using [Autocomplete example from Material components page ](https://material.angular.io/components/autocomplete/examples)

### Reproduction

StackBlitz link: https://stackblitz.com/edit/pqfm6j
Steps to reproduce:
1. Access the page using IOS device (iPhone)
2. Enable VoiceOver
3. Using gesture swipe navigate to the autoccomplete field
4. `double tap` to edit "number" field
5. Swipe to search for letter "O" (as in Oscar)
6. `double tap` to accept selection "O"
7. Now two options are displayed on screen "One" , "Two"
8. use `Swipe Right` gesture to cycle between values

### Expected Behavior

Expected behaviour is, when dropdown with selectable values appear, user should be able to cycle through options using swipe gesture

### Actual Behavior

Actual Behaviour is :
The focus skips the available options displayed and focuses on next form field, leaving the Autocomplete field

### Environment

- Angular: 16.1.1
- CDK/Material: 16.1.4
- Browser(s): Safari, Google Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): iOS 15, iOS16

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit dem Autocomplete-Beispiel auf der Material components page oder der verlinkten StackBlitz-Reproduktion und verwende iOS VoiceOver sowie die aufgeführten Reproduktionsschritte. Verfolge das Overlay und das Fokusverhalten von MatAutocompleteModule, wenn die Optionen angezeigt werden. Als abgeschlossen gilt die Aufgabe, wenn Swipe Right durch die verfügbaren Optionen navigiert, anstatt zum nächsten Formularfeld zu springen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
accessibility, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.