[v4] How to use the 'new' accessibility overrides?

[fwielstra]

Question

We've been keeping an eye on #1288 for a while now, I'm glad it was merged.

In our application, we currently use a bottom sheet to show forms and information to the user, like in this screenshot:

Before the accessibility overrides PR was merged, using the Accessiblity Inspector, the bottom sheet didn't seem to work right. It's better now, but we're still not entirely sure how to make the bottom sheet work with a screen reader, at least not in the simulator / iOS Accessibility Inspector. When iterating over the elements on the screen, the bottom sheet shows up as one whole blob of type slider, or actually two of them, the next one appearing when you iterate / press the 'next element' button in the inspector:

Iterating further does not advance the pointer to the elements inside of the bottom sheet, which means that as far as a screen reader is concerned, there is nothing there.

We can probably make it work for bottom sheets showing just text/information, but we're not sure how to make it work for interactive / forms like this.

Setting accessible={false} on the bottom sheet or its scroll view does not seem to make a difference.

Our goals, and keep in mind that we're not actually very good at accessibility beyond setting labels:

• When the bottom sheet opens, the user's screen reader should be signaled / the user should be notified of it being open
• When the user iterates to the next element, the bottom sheet's contents should be read out, including text and forms.

Asides from that, we're still assessing whether bottom sheets actually work at all for screen readers; if anyone here can share some experiences, that would be great! This is the preferred user experience at the moment for the average user, but I personally believe that it's not ideal for people using the accessibility features, I would just open the information up in a new page.

Any help or insights would be appreciated!

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.0
react-native	0.72.7
react-native-reanimated	3.3.0
react-native-gesture-handler	2.12.0

[github-actions]

@fwielstra: hello! 👋

This issue is being automatically closed because it does not follow the issue template.

[BethThomas141]

I'm also keen to hear the answer to this question, see if you can upload again following the issue template 🙏

[JosueCuberoSanchez]

I'm also keen to hear the answer to this question, see if you can upload again following the issue template 🙏

Please

[ashishneomenta]

Use
<BottomSheetScrollView style={{flex: 1}}>
your list or scroll