lawnstarter / react-native-picker-select

🔽 A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
https://npmjs.com/package/react-native-picker-select
MIT License
1.74k stars 497 forks source link

Accessibility: Picker doesn't open when Talkback is activated #447

Open TimDorand opened 3 years ago

TimDorand commented 3 years ago

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.

shadowgroundz commented 3 years ago

No update for this issue?

TimDorand commented 3 years ago

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.

mitchdowney commented 2 years ago

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

satya-imaginea commented 2 years ago

I am also facing the same issue :(

abhishekincap commented 2 years ago

fixAndroidTouchableBug={true} solves the issue for me

simonflk commented 2 years ago

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