bug(MatAutocompleteModule): Unable to navigate between autocomplete input and overlay options panel using iOS VoiceOver
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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
Contributor guide
Research direction
Start with the Autocomplete example on the Material components page or the linked StackBlitz reproduction, using iOS VoiceOver and the listed reproduction steps. Trace the MatAutocompleteModule overlay and focus behavior when the options appear. Done means Swipe Right moves through the available options instead of skipping to the next form field.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100