Fix: allow screen readers to detect modal content

[flo-sch]

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 />):

1. Children cannot be read by Voice Over (iOS), only the modal itself is interpreted as a single "adjustable" view (my guess here is that elements with "accessibleRole: 'adjustable'" are not meant to have children? I could be wrong, this is just an assumption)
2. Text elements cannot be interpreted by Talk Back (Android) when using the default background, due to its accessibility props. This could easily be workaround by providing a custom background but I figured I could also propose this fix here.
3. I also face the issues described in #1641, but I did not manage to understand how to fix those myself unfortunately. I tried implementing some state in BottomSheetModalProvider (as initially proposed in #687), but since modals can be closed/dismissed in different ways, I could not implement a reliable state determining whether or not a modal is currently being presented (and adjust importantForAccessibility props based on that).

I recorded videos to illustrate what this PR fixes:

1. TalkBack

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

2. Voice Over (unavailable in iOS simulator, but I used Accessibility Inspector instead)

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

[Eli-Nathan]

I think this can currently be overridden by passing accessible={false} to the BottomSheet. Accessibility was only just recently added back in to this repo so you may need to update to at least 4.6.0

https://github.com/gorhom/react-native-bottom-sheet/issues/1288 Release notes

[flo-sch]

I think this can currently be overridden by passing accessible={false} to the BottomSheet. Accessibility was only just recently added back in to this repo so you may need to update to at least 4.6.0

Hi @Eli-Nathan, setting accessible to false fixes it for VoiceOver only (iOS). I included that in this PR (or well, setting it to null which works as well)

I already tried 4.6.0 and 4.6.1

[github-actions[bot]]

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.

[flo-sch]

Un-stale

[thienautran]

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?

[flo-sch]

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

[github-actions[bot]]

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.