react-native-picker-select
react-native-picker-select copied to clipboard
Accessibility: Picker doesn't open when Talkback is activated
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
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.
No update for this issue?
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.
This is a serious issue for our accessibility support on Android. Any chance we can get an update for this?
I am also facing the same issue :(
fixAndroidTouchableBug={true} solves the issue for me
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