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

[karthickj25]

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

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

[karthickj25]

is there any workaround that I could use?

[zarend]

Hello @karthickj25 ,

Thank you for testing with screen reader. We're aware that it is difficult to navigate to the autocomplete popup on Safari. It seems that Safari or VoiceOver do not respect the aria-owns relationship which connects the popup to the autocomplete trigger. This is a difficult issue, and we do not have a solution yet. It requires more research and using native dialog element may be helpful.

If you don't need autocomplete, you can use native element instead of MatAutocomplete. Native select has the best experience for a11y and mobile devices. there are examples of Basic Select and Native Select on https://material.angular.io/components/select/overview.

Best regards,

Zach

[karthick-theta]

thanks @zarend . Thank you for your response and for the suggestion to use native select elements. However, in our current project context, we are heavily reliant on the features provided by MatAutocomplete, and switching to native controls would not be feasible.

We understand the complexity of the issue with Safari and VoiceOver not respecting the aria-owns relationship. Accessibility is a priority for us, and we believe it is crucial for MatAutocomplete to function correctly across all browsers and assistive technologies.

is there are any plans to address this issue in a future update of Angular Material? We would greatly appreciate any information on potential timelines or workarounds that we could implement in the meantime.