Application hidden from screen readers when lightbox up.

[betaorbust]

Reporting a Bug?

The current implementation of lightbox targets the body element as the appRoot for use by react-modal but that isn't the actual app root, which means that react-modal applies an `aria-hidden="true" to the whole body. This causes the entire application to not be visible to screen readers when the lightbox is up.

You can see this by inspecting the DOM after launching a lightbox in the sandbox: https://codesandbox.io/s/wkw2mjm5l8

I believe this can be mitigated by passing a reference to the actual app root in the invocation via reactModalProps, but that's a bit rough on the DX side.

<lightbox reactModalProps={{appElement: referenceToYourActualAppRoot}} ...otherPropsYouNeed /> 

It seems like making a required property of appElement (similar to react-modal) might be the right path forward if there's not a way to detect the app root automatically. Otherwise, the default case will be that the app silently vanishes for screen readers.

[henrikland]

Can confirm that this is an issue when using Firefox and NVDA screen reader on Windows. The buttons (prev/next image, etc) are not visible to the screen reader which makes this component unusable. I tried simply setting the appElement to undefined which resolved that issue, but probably causes others. Being able to specify the appElement would be helpful.

[thiemeljiri]

There should be an option to set the root element.