New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix: allow screen readers to detect modal content #1764
base: master
Are you sure you want to change the base?
Fix: allow screen readers to detect modal content #1764
Conversation
- remove accessible and accessibilityRole="adjustable" on default background
I think this can currently be overridden by passing |
Hi @Eli-Nathan, setting accessible to false fixes it for VoiceOver only (iOS). I included that in this PR (or well, setting it to I already tried 4.6.0 and 4.6.1 |
This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days. |
Un-stale |
I've been able to get focus to child elements by using accessible=false, however still haven't been able to figure out how to make elements behind the bottom sheet inert, either with BottomSheetModal or regular BottomSheet. Anyone have any ideas on how to fix this? |
I believe it would require some implementation from this library first, as suggested there. At least I have not found any way to achieve that yet |
Hello @gorhom, thank you for this nice package :)
Here is a small contribution based on accessibility findings using TalkBack on Android and Voice Over on iOS.
If you are interested I could also port it to version 5
Motivation
In the project I work on, accessibility support is a requirement. I noticed a few issues when integrating
<BottomSheetModal />
(we currently do not use<BottomSheet />
):importantForAccessibility
props based on that).I recorded videos to illustrate what this PR fixes:
https://github.com/gorhom/react-native-bottom-sheet/assets/1577155/a7fa04c4-2e02-429a-a0f6-6e51d5644cd2
https://github.com/gorhom/react-native-bottom-sheet/assets/1577155/106c7c0c-c625-450a-ba29-3c34a3eb2927
https://github.com/gorhom/react-native-bottom-sheet/assets/1577155/dd0f8f89-71ec-49be-8d0a-09dd84943d6e
https://github.com/gorhom/react-native-bottom-sheet/assets/1577155/2d5ca920-d1e9-4afc-9b67-38122e016844