react-native-picker-select icon indicating copy to clipboard operation
react-native-picker-select copied to clipboard

Accessibility: Picker doesn't open when Talkback is activated

Open TimDorand opened this issue 3 years ago • 6 comments

Describe the bug

When the Talkback (VoicerOver on iOS) is activated, the Picker vocalize the "accessibilityLabel" but doesn't open on double-tap. If I specify useNativeAndroidPickerStyle={true} it works but I lose my specific design. With useNativeAndroidPickerStyle={false} it doesn't work.

To Reproduce

Activate Talkback on Android

Expected behavior
To open as usual.

Screenshots
n/a

Additional details
Device: [Pixel 4a API 30] OS: [Android 11] react-native-picker-select version: [8.0.3] "react": "16.13.1", "react-native": "0.63.4",

Reproduction and/or code sample

type Props = {
  Icon?: RNPickerSelect["props"]["Icon"];
  items: RNPickerSelect["props"]["items"];
  value: RNPickerSelect["props"]["value"];
  disabled?: RNPickerSelect["props"]["disabled"];
  placeholder?: RNPickerSelect["props"]["placeholder"];
  onValueChange: RNPickerSelect["props"]["onValueChange"];
  useNativeAndroidPickerStyle?: RNPickerSelect["props"]["useNativeAndroidPickerStyle"];
  touchableWrapperProps?: RNPickerSelect["props"]["touchableWrapperProps"];
} & PickerProps;

export type PickerSelect = ReturnType<typeof PickerSelect>;
export const PickerSelect = ({
  Icon,
  items,
  value,
  onValueChange,
  disabled = false,
  placeholder = {},
  useNativeAndroidPickerStyle = false,
  touchableWrapperProps = {}
}: Props): ReactElement<Props> => (
  <PickerSelect
    items={items}
    value={value}
    disabled={disabled}
    placeholder={placeholder}
    onValueChange={onValueChange}
    useNativeAndroidPickerStyle={false} // not working
    useNativeAndroidPickerStyle={true} // working

    Icon={() => <Image ... />
    }
    touchableWrapperProps={{
        accessible: true,
        accessibilityLabel: "Select",
        accessibilityHint: "Double tap to select an option.",
        accessibilityRole: "combobox"}}
    pickerProps={{
        accessible: true,
        accessibilityLabel: "Select", }}
  />
);

Do you know any workaround? Thanks in advance.

TimDorand avatar Jun 24 '21 14:06 TimDorand

No update for this issue?

shadowgroundz avatar Jul 02 '21 09:07 shadowgroundz

I have tried updating from

    "react-native-picker-select": "6.6.0",

to

    "react-native-picker-select": "8.0.3",

Also I've tried several implementations but none have worked so far.

    touchableWrapperProps={{
        accessible: true,
        accessibilityLabel: "Select",
        accessibilityHint: "Double tap to select an option.",
        accessibilityRole: "combobox"}}
    pickerProps={{
        accessible: true,
        accessibilityLabel: "Select", }}

While TalkBack activated, the "accessibilityLabel" is read but the Picker does not open.

TimDorand avatar Jul 02 '21 09:07 TimDorand

This is a serious issue for our accessibility support on Android. Any chance we can get an update for this?

mitchdowney avatar Sep 28 '21 05:09 mitchdowney

I am also facing the same issue :(

satya-imaginea avatar Mar 18 '22 12:03 satya-imaginea

fixAndroidTouchableBug={true} solves the issue for me

abhishekincap avatar Apr 11 '22 15:04 abhishekincap

This is working for me on Android without issues without any additional props: https://snack.expo.dev/@simonflk/select-a11y-comparisons

I do have issues with Voiceover/iOS combination however

simonflk avatar May 02 '22 18:05 simonflk