OverlayProvider sets aria-hidden="true" and makes modal/dialog within non-readable by voiceovers

[mmarzullotv]

🐛 Bug Report

Hey guys, i was using OverlayProvider and it sets aria-hidden="true" by default to the main element. And i got a dialog being opened as a children. Because of this, voice overs are not announcing anything within the modal. I attempted on setting aria-hidden={false}, but whenever I open the dialog, it adds the aria-hidden="true" to the OverlayProvider element.

My dialog makes use of useModal, useDialog, useOverlay hooks. It adds aria-modal={true} & aria-role='dialog'

Is there any way to avoid setting aria-hidden to that container? or how can I make the voice-over to read its contents?

This is how my modal looks within the OverlayProvider parent:

<div role="dialog" tabindex="0" id="react-aria-9818271718-3" data-ismodal="true" class="popoverContainer" aria-modal="true"></div>

Thanks in advance.

🌍 Your Environment

Software	Version(s)
react-aria/overlays	"3.7.0" .
Browser	Chrome
Operating System	macOS

[LFDanLu]

Mind attaching a rough codesandbox of your setup here? If I'm reading this correctly, the container of your Dialog is being aria-hidden when opened? Is the setup roughly like the one shown in https://react-spectrum.adobe.com/react-aria/useDialog.html? Or is this a nested modal case?

[mmarzullotv]

@LFDanLu yes, it's almost identical to that structure. An OverlayProvider with the popup/modal structure in inner childrens. We call it "Popover" component in our app. But still, it's the same. A div with {...mergeProps(overlayProps, dialogProps, otherProps, modalProps)}. Our modal component is wrapped in a FocusScope component too. With autoFocus, restoreFocus and contain properties.

The weird thing is that, the OverlayProvider DOM element has no aria-hidden attribute set, but whenever the dialog opens, is being set automatically and with "true" value.

My structure is as follows:

<OverlayProvider>
    <Layout>
         <Header>
               ... some other children
                     <OverlayContainer>
                           <Popover></Popover> // this is a FocusScope with div inside with all the props mentioned above.
                     </OverlayContainer>
         </Header>
    </Layout>
</OverlayProvider>

[LFDanLu]

If I had to guess, that aria-hidden is being set by ariaHideOutside but that should only be hiding content outside the active modal. Since this behavior isn't broken in the docs and your set up is similar to the docs example, I'm not sure what could be happening. Is there anyway you could reproduce your setup in a sharable codesandbox or repo?

[mmarzullotv]

@LFDanLu i'll try to re-create it outside the app and let you know, Thanks Lu for replying and trying to help.

Oh wait, it was on our end. We were using a custom OverlayContainer. I fixed it now :)