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

[Bug]: [v5] When Talkback is enabled and a modal is displayed, the items below the modal sheet are still accessible by tap and the sheet is not focused #2110

Open
hraschan opened this issue Jan 14, 2025 · 4 comments
Labels
bug Something isn't working

Comments

@hraschan
Copy link

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Android

What happened?

  1. When Talkback is enabled Modal is not focused when presented
  2. Elements below the Modal are accessible.
  3. When dismissing modal, elements are no longer accessible/focusable (no green marker around them and no announcements)

There was already an issue in v4 #1641 but this issue still persists.

In general the accessibility behavior is questionable. Why is the backdrop accessible? Why is each element accessible. Handle, Container, Background. Content elements are not accessible seperatly.

Reproduction steps

  1. When Talkback is enabled Modal is not focused when presented
  2. Elements below the Modal are accessible
  3. When dismissing modal, elements are no longer accessible/focusable (no green marker around them and no announcements)

Describe what you expected to happen:

  1. When Talkback is enabled, if user opens Modal, it should get focus automatically
  2. Elements below the Modal should not be accessible by default (some prop needed maybe)
  3. After dismissing Modal, elements that were below it should be accessible/focusable again

Reproduction sample

https://snack.expo.dev/@gorhom/bottom-sheet---issue-reproduction-template

Relevant log output

No response

@hraschan hraschan added the bug Something isn't working label Jan 14, 2025
@janReitan
Copy link

We're having the same issue.

@laijoann
Copy link

++ Would love a resolution for this as well

@marcogravbrot
Copy link

Made a patch-package to fix this issue if anyone's interested in a quick fix:

  • Added importantForAccessibility prop to BottomSheet, BottomSheetModal, BottomSheetBackdrop, BottomSheetBackground and BottomSheetContainer
  • Added logic to the BottomSheetModalProvider to disable accessibility for app child elements while giving accessibility to the modal content.

Based on the suggestions in #687
Manually focusing the modal does not seem to be necessary once the rest of the content is non-accessible, as the screen reader will jump to the first available element.

@gorhom+bottom-sheet+5.0.6.patch
Gist

I would suggest creating a custom handle for closing the modal that you can make accessible while hiding the backdrop like this:

Image

@ochodnicky
Copy link

@marcogravbrot thank you for the patch, works well! 😊

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

No branches or pull requests

5 participants