angular / angular/components

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

Open
#27,442 3 comments 0 reactions 0 assignees View on GitHub
Accessibility area: material/autocomplete area: material/select P2
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.