[Autocomplete] Autocomplete options are not selectable with Android Talkback

[PetroSilenius]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

With Android Talkback trying to select a Autocomplete option from the options list, results in option not being selected and focus moving to the document

Expected behavior 🤔

It should select the field and move focus to the input

Steps to reproduce 🕹

Steps:

1. Activate Android Talkback
2. Navigate to https://mui.com/components/autocomplete
3. Open the option list in the first example, Combo box with movies
4. "Hover" one option and double tap to select it
5. The field does not get selected and instead focus is moved to the document

Context 🔦

I was doing accessibility testing on one of my customer projects and ran into the issue. The Autocomplete component is used as an input for selecting a city, the component lists over 300 options.

Decided to investigate this a bit further and noticed it's occurring in the MUI docs as well

Your environment 🌎

Issue occured on a Android 11 device running Oxygen OS 11.0.5.1.
Talkback version 12.1.
Browser mobile Chrome 98.0.

`npx @mui/envinfo`

System:
    OS: macOS 12.1
  Binaries:
    Node: 16.13.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Edge: Not Found
    Firefox: 96.0.2
    Safari: 15.2
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1
    @emotion/styled: ^11.6.0 => 11.6.0
    @mui/base:  5.0.0-alpha.67
    @mui/icons-material: ^5.2.5 => 5.3.1
    @mui/material: ^5.2.8 => 5.4.0
    @mui/private-theming:  5.3.0
    @mui/styled-engine:  5.3.0
    @mui/system:  5.4.0
    @mui/types:  7.1.0
    @mui/utils:  5.3.0
    @types/react: 17.0.39 => 17.0.39
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2
    typescript: 4.5.5 => 4.5.5

[nicholas-aponte]

I'm currently seeing this issue as well

[NW516]

Any plans to fix this? This renders the Autocomplete component inaccessible for Android screen reader users, especially when the freeSolo prop isn't being used (so the user does not have the option of just entering input but rather must select from the predefined options)

[AnttiSarjanoja]

We also had an Android Talkback user reporting this issue of our site and debugging it lead to this thread. Any workaround tips would be welcome

[nicholas-aponte]

Sadly I never got to find one, we moved on to more pressing tasks. I believe we replaced the component with something more custom sadly.

…

On Wed, Sep 6, 2023, 6:14 AM Antti Sarjanoja ***@***.***> wrote: We also had an Android Talkback user reporting this issue of our site and debugging it lead to this thread. Any workaround tips would be welcome — Reply to this email directly, view it on GitHub <#31081 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AU42MYNPV5UAOTSBEV52E6TXZBEG3ANCNFSM5OMOH3MQ> . You are receiving this because you commented.Message ID: ***@***.***>

[susheelahegde]

@nicholas-aponte which component are you using now?

[nicholas-aponte]

We wrote our own component in the end.

…

On Fri, Oct 13, 2023, 5:20 AM susheelahegde ***@***.***> wrote: @nicholas-aponte <https://github.com/nicholas-aponte> which component are you using now? — Reply to this email directly, view it on GitHub <#31081 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AU42MYLHD7EN6JHVDX2P7J3X7EBVDAVCNFSM5OMOH3M2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCNZWGEYTSNJZG4ZQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[susheelahegde]

your own component is based out of any existing library components? and is it support iOS too?

[HarlesPilter]

The issue is that talkback has this weird feature?/bug?, where you can't select an item that has tabIndex={-1}. The same issue is happening in a react-select library. JedWatson/react-select#5190 (comment)

[ste163]

@nicholas-aponte would you be able to share any information on that component and/or share the component under an MIT license?

I'm also running into issues with Autocomplete not being accessible using iOS's VoiceOver and looking for solutions

[ydhnwb]

I'm also facing this, any onClick, onSelect or onChange is not trigger inside the renderOption.

Any workaround for this?

[moshekagan]

I'm facing the same issue :/

[VietNguyenQuoc]

This workaround works for both Android Talkback and iOS VoiceOver

#22956 (comment)