react-modal
react-modal copied to clipboard
reactjs
Question: will setAppElement(document.body) work as expected?
As I understand it, setAppElement() is needed so everything in the background, behind the modal, will be set to "hidden" for screen readers. The documentation specifies that setAppElement() should be applied to a React app (top-level) element.
However, what if we are developing a smaller React app that gets injected to a larger existing (third-party) page that does not use React. How do we make sure the rest of the whole page gets "hidden" when our modal is open? I would think I would just do ReactModal.setAppElement(document.body), but I'm not sure if the plugin was designed to handle this.
No errors appear to be thrown, but I don't know if it will actually work because I do not own a Screen Reader. Also could not find anything about this in the docs.
Hi @vincerubinetti, ReactModal.setAppElement(document.body) is not a good idea because the modal will be a children of the element that has the aria-hidden.
I am guessing that we should have a div inside the body like this:
<body>
<div id="root">
Put all your html here
</div>
</body>
and give it root?
[EDIT]
Now that I read better @paul-mesnilgrente's response 😂....yes, that's it. Everything else will be take care by react-modal.
ReactModal.setAppElement("#root") will do the job.