search

peacechen / react-native-modal-selector

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
MIT License
369 stars 129 forks source link

Accessibility IOS problems #88

Closed jessamp closed 5 years ago

jessamp commented 6 years ago

There are some issues with the IOS accessibility. When the accessibility prop is turned on and VoiceOver is turned on, it reads the entire list when the user opens it. However, in android only the individual items will be read when the user clicks on that specific item; it ignores the current accessibility label props.

I did some digging and it looks like any touchable react component is automatically accessible, including TouchableWithoutFeedback. If you set that accessible prop to false, then it will read the current accessibility props for the modal, but it still won't read the individual items when clicked. You would have to remove the other accessibility labels in the ScrollView and TouchableOpacity component in order to read the individual labels in IOS and match the behavior in Android.

To make it fit with your current modal, you can maybe add more accessibility props for more flexibility. Then people can pick and choose exactly what component can be accessible. Or you can make the changes I mentioned above to get the same behavior for IOS and Android - items being read only when clicked. Be careful with accessibility when it comes to parent/child view. It may not work the way you want it to.

peacechen commented 6 years ago

Thanks for bringing this to our attention. Is there an open issue about the difference between iOS and Android accessibility? Ideally it should be fixed in RN instead of hacking around it in this component.

jessamp commented 6 years ago

From what I've seen in my research there is:

http://facebook.github.io/react-native/blog/2018/08/13/react-native-accessibility-updates

But I don't think these will address the issue here. I think for this it's a matter of what the developer will want the TalkBack/VoiceOver to see/read, and we can do that by picking and choosing which components are accessible.

peacechen commented 6 years ago

Would you mind submitting a PR? From your description, it sounds like adding additional accessibility props for the ScrollView and TouchableOpacity, defaulting the props to false, would be the most flexible and consistent across iOS and Android.

jessamp commented 6 years ago

Sure. I'll give it a go!

jessamp commented 6 years ago

submitted a PR. Thanks!