Skip to content
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

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

Closed
colintindle opened this issue Jul 25, 2024 · 3 comments
Closed
Labels
bug Something isn't working no-issue-activity

Comments

@colintindle
Copy link

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.

2024-07-24.at.16.07.03.mov
@colintindle colintindle added the bug Something isn't working label Jul 25, 2024
@hraschan
Copy link

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

Copy link

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.

Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working no-issue-activity
Projects
None yet
Development

No branches or pull requests

2 participants