[v4] | [v5] BottomSheetModal not usable on Android with TalkBack enabled

[colintindle]

Bug

BottomSheetModal is not accessible with Android Talkback. Attempts to select elements using single tap inside the modal, instead focus the backdrop. Tapping the header selects elements behind/outside the modal. Swiping left/right will allow user to select any element, not just those inside the modal.

Setting accessible={false} on the backdrop makes the modal body selectable with single tap, but the user can still focus on items behind the modal and backdrop.

BottomSheetModal does not seem to present to the OS as a modal, and does not automatically take focus when opened. All of this works fine on iOS. Sadly, this issue makes the component unusable on Android for users who require the screenreader.

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.3
react-native	0.69.4
react-native-reanimated	2.8.0
react-native-gesture-handler	1.10.3

Steps To Reproduce

1. Start Talkback
2. Open a BottomSheetModal
   • Observe that button used to open BottomSheetModal is still the active element
3. Attempt to navigate with swipe right/left
   • Observe that elements outside of modal are still focusable
   • Observe that modal contents cannot be accessed
4. Attempt to focus elements in modal header using single tap
   • Observe that elements behind the modal will be focused instead
5. Attempt to focus elements in modal body using single tap
   • Observe that BottomSheetBackdrop is focused instead

Describe what you expected to happen:

Opening the BottomSheetModal (particularly when expanded) should:

1. cause accessibility focus to be moved to the first element inside the modal
2. not allow the user to focus elements outside of the modal or backdrop

Reproducible sample code

I have reproduced this using the example provided in the repo, on versions v4.6.3 and v5.0.0-alpha.10.

https://github.com/user-attachments/assets/7f75ac09-b5c7-4c07-a3a8-316d5b104c34

[hraschan]

I think BottomSheetBackdrop component is missing the "importantForAccessibility" prop. This is needed in order to hide the Backdrop for android.

It would be nice if this gets implemented

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.