search

reactjs / react-modal

Accessible modal dialog component for React
http://reactcommunity.org/react-modal
MIT License
7.37k stars 809 forks source link

Question: will setAppElement(document.body) work as expected? #718

Open vincerubinetti opened 5 years ago

vincerubinetti commented 5 years ago

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.

diasbruno commented 5 years ago

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.

ghost commented 5 years ago

So what is the right way to do it then?

paul-mesnilgrente commented 2 years ago

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?

diasbruno commented 2 years ago

[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.