Can't select option on iOS using VoiceOver

[doubleforte]

I'm using the sample fields on https://react-select.com/ to test accessibility. If I activate VoiceOver (on my iPhone, iOS 15) I am able to open the menu by double tapping. I can highlight another option, but I can't seem to select that other option. See the video for an example.

In the video, I start with VoiceOver off and select "Purple" from the "Single (Ocean)" menu. No problem. Then I reset it back to "Ocean".

Then I turn on VoiceOver. I can open the menu (single-tap to highlight, double-tap to open the menu). I can highlight another option "Green" (single-tap), but when I double-tap to select, the menu closes and does not select "Green". I have tried highlighting then using "Done" or "Return", but nothing seems to work.

Also, the built-in VoiceOver instructions for selecting an option are just wrong. It's asking to use "tab", "escape", and "up/down", but on iOS, it's just tapping -- no keys. Works great on a desktop/laptop.

Am I doing something wrong, or is VoiceOver not supported?

voiceover720.mov

[amcgrawww]

I'm experiencing the same issue. However, a triple-tap seems to work...

[xiaogwu]

I'm experiencing the same issue. However, a triple-tap seems to work...

I can confirm the "triple-tap" seems to work but I don't think the triple tap is a recognized VoiceOver interaction.

[doubleforte]

I'm not a VoiceOver expert by any means, but I also don't think triple-tap is a thing? It works, but there's no way I'd ever even think to try it. Should really work with a standard double-tap, IMO.

[jphawk]

Experiencing the same. On iOS 15.5 with Voiceover it works with triple-tap, but that's definitely not how it should be. Also same happens when I'm testing with Android - in this case, triple-tap works just from time to time.

[MarcieMarc425]

Currently experiencing same issue with iOS Voiceover as well as Android Talkback. However, iPad Voiceover seems to work fine. Not sure if a mobile specific issue.

[itshak]

Currently experiencing same issue with iOS Voiceover as well as Android Talkback. However, iPad Voiceover seems to work fine. Not sure if a mobile specific issue.

iPad on iPadOS 15.7 also has this issue. Only the triple-tap seems to work

[zivkovicn]

I'm experiencing the same issue. When iOS VoiceOver is on on iPhone 13 pro max, I'm unable to select any option, triple-tap is not working either - this is happening for the typeahead.

react-select version: 5.3.2
iOS version: 16.1

[soloko]

Same issue

device: iPhone 13 pro
iOS: 15.7
react-select version: 5.7.0

[nouhab]

Any solution for this issue please ?

[zivkovicn]

@nouhab the solution for me was to switch to the async select (https://react-select.com/async), there everything is behaving as it should.

[ailinpedrossian]

Same issue with the Async Select

device: iPhone 12
iOS: 16.2
react-select version: 5.4.0

[darvi-sh]

Any update on this?

Apple M1 Pro - Ventura 13.4.1 (22F82)
react-select 5.7.3

[charerimana]

I had the same issue and I realized that at some reasons, VoiceOver/TalkBack ignore element with tabindex="-1" and do not allow it to be focused or selected.

To make options selectable with VoiceOver and TalkBack, I had to avoid using tabindex="-1" by creating a custom option component. Instead, I focused on making the select element and its options more accessible by adding role and aria-selected on option.

import React from "react";
import Select, { components } from "react-select";

const  Option = props => {
  const { isSelected, innerProps } = props;
  // To make options selectable with VoiceOver/TalkBack, We should avoid using tabindex="-1".
  const { tabIndex: _, ...rest } = innerProps;

  return (
    <components.Option
      {...props}
      innerProps={{
        ...rest,
        role: "option",
        "aria-selected": isSelected
      }}
    />
  );
}

const SelectComponent = props => <Select {...props} components={{ Option }} />

[doubleforte]

Any progress on this? It's still very broken. :(