Accessibility issues when dimmed is true

[wrench7]

I've made the switch from react-native-actions-sheet, and am having issues with the way the dimmed container overlay is still allowing screen readers access to the content underneath the sheet and the dimmed overlay.

I only noticed this as I'm using Maestro to run e2e tests, which have now subsequently all broken as it can now see all of the content behind the sheet (irrespective of any detent sizes I use).

My initial exploration was around the fix described here - #298.
Unfortunately trying all of the "presentation" options has had no effect on the behaviour that I'm seeing.

I'm running the tests on an Android emulator and wondering if anyone else has seen this behaviour?

[wrench7]

Here's an example of what I'm describing, sometimes a picture speaks a thousand words.

The area under the dimmed overlay remains accessible in Maestro (react-native-actions-sheet prevents interactivity underneath the overlay)

[lodev09]

@wrench7 this is a limitation on maestro. The way maestro works is it dumps the entire view tree from the window and there's no way around that, unless I nuke the whole library to use separate window like RN Modal which is not an option. TrueSheet was using separate window before and it's causing major performance issue with undimmed sheets, unlike IOS.

If you're concerned with accessibility, test it with TalkBack instead. The dimming view already handles this and it should keep talkback from reading content behind the dim view by default.

[wrench7]

I haven't spent a great deal of time working in the accessibility space (and I'm guessing you have over the many years of building and maintaining this), but it feels like there's an accessibility option that could flag the sheet as being active when on screen and it is over the top of content that still exists behind it. I did take a good look through https://reactnative.dev/docs/accessibility but nothing really jumped out at me (and I'm not sure whether the accessible options are driven by the native code or the RN JS.

[wrench7]

I tried using both @gorhom/bottom-sheet and react-native-actions-sheet, and both of those libraries behave "correctly" with Maestro - no doubt there's a rather large delta in the 3 codebases, but in case that helps with potentially finding a resolution here.

[lodev09]

how is it exactly working with gorhom/bottom-sheet? I tested using gorhom in the example app and maestro still reads the content behind it. Can you create a repro yourself and do some comparison or example test?

I would assume it's the same on react-native-actions-sheet. Maybe something wrong with your e2e?

[wrench7]

I see the same as you in the Maestro inspection window for both @gorhom/bottom-sheet and react-native-actions-sheet, but for some reason they're able to ignore the components behind the sheet when running the Maestro tests.

I've tested a bit more with @gorhom/bottom-sheet, and it doesn't do a good job with Talkback at all (it will read out everything that is behind the sheet). Your library works well with Talkback, though I've noticed that selecting the backdrop announces, "Unlabelled, double tap to activate". Would be better if it said something about it being the sheets backdrop I guess.

For now I've added accessible={true} and accessibilityLabel="Bottom Sheet" to the wrapper around the children of the TrueSheet and have rewritten the Maestro tests to use the following:

- tapOn:
    text: "Active"
    childOf: Bottom Sheet

My exact use case was getting Maestro to click on checkboxes that were inside the sheet, and the labels of the checkboxes also appeared in components that were behind the sheet. Gorhom displays the same behaviour in Maestro as your library does, react-native-actions-sheet somehow gets the focussed context of what's on screen correct.

[lodev09]

Yeah that's the most important part of the whole accessibility feature, to be able to actually work with screen readers. For e2e, I would suggest using testID instead of labels.

Anyway, I'll create PR sometime tomorrow to add some labels and roles to the native components.