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?

https://user-images.githubusercontent.com/6754378/168402413-3a7b29d3-9a2b-4215-9486-5de1b53d2c59.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. :(

[Watso196]

Are there any updates to this issue? My team is also running into these issues.

We found that setting onPointerDownOutside on the menu content component to a function that prevents the default functionality, that allowed us to select an option. That allowed users to select an option. We did still struggle with selecting the correct option via VoiceOver on iOS until making the menu options larger. Together those provided accurate access to the options via VoiceOver iOS and Android TalkBack as well.