Disable elements below overlay when using VoiceOver

[carljoachim]

Issue Description

We recently started using the showOverlay-function as an alternative to using a modal. This works out really well. The problem, though, is that while using the app with Voice Over (for accessibility purposes), it seems like the underlying elements, below the overlay, are being accessible with Voice Over.

Steps to Reproduce / Code Snippets / Screenshots

 Navigation.showOverlay({
       component: {
             id: componentId,
             name: componentId,
             passProps: {
                 ...props,
                 onClose: () => {
                     Navigation.dismissOverlay(componentId)
                 },
             },
             options: {
                 layout: {
                     backgroundColor: 'transparent',
                     componentBackgroundColor: 'transparent',
                 },
                 overlay: {
                     interceptTouchOutside: false,
                 },
             },
         },
      })

---

Environment

• React Native Navigation version: 6.0.1
• React Native version: 0.61.4
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): Device - debug

[guyca]

Hey @cjrorvik 👋 Sounds like a great idea. We haven't put much emphasis on accessibility so there are definitely some missing features. I don't think we'll get to this any time soon, if anyone would like to pick this up it would be awesome!

I imaging a possible API for this would be:

Navigation.showOverlay({
  component: {
    name: 'MyComponent',
    options: {
      overlay: {
        disableVoiceOverBehindOverlay: true
      }
    }
  }
});

[carljoachim]

Thanks for the reply @guyca :) I'll have a talk with my team to see if we're able to have closer look at it as well.

[ItsNoHax]

@guyca I wonder if the opposite is also possible, in our app we have 2 overlays that are always open even though they are invisible most of the time, I wonder if it's possible to prevent accessibility related things from seeing these overlays.

[guyca]

@ItsNoHax That also sounds like a valid use case. I have very limited experience with voice over, so I really don't know the answer to your question.

[marcshilling]

The same problem exists on Modals when you use modalPresentationStyle: 'overCurrentContext', but at least that can be resolved by switching to 'overFullScreen'`. There doesn't seem to be a workaround for this currently.

[geroale]

Same issue here

[marf]

We have the same issues from our end with VoiceOver and overlay has someone a fix or a workaround?