React-modal: aria-hidden="true" on body makes the whole page inaccessible

Created on 19 Apr 2021  路  4Comments  路  Source: reactjs/react-modal

Summary:

I've found that by default the package adds aria-hidden="true" on body element, which makes the whole page inaccessible because modal dialog is placed inside of body. According to specification (https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_roles_states_props) aria-hidden is not needed at all as aria-modal="true" already prevents users of assistive technologies from perceiving content outside the dialog.
Because of this 'aria-hidden' attribute it is easy to make a modal completelly inaccessible by mistake, if a user doesn't call .setAppElement with a container that is not a body. Why the package adds this attribute, if it is not required by specification?

Steps to reproduce:

  1. Use react-modal not calling setAppElement and not setting ariaHideApp={false}.
  2. Open modal.
  3. Observe body tag, that has 'aria-hidden=true'.

Expected behavior:

body doens't have such an attribute.

bug accessibility
Source
picture Julia1996
👍1

All 4 comments

Hi @Julia1996, yes...it's true. I would like to remove the default in this case, but I don't know if it would break someone's code.

If we are going to do something about this, it think the right way is to bump a major version to treat as a breaking change.

Also, I'd love to hear other opinions regarding this issue.

diasbruno picture diasbruno on 19 Apr 2021

We just came across this issue _sort of_ as some of our devs were passing html to setAppElement.
The problem we're now encountering is that the way our site is laid out, passing only one element id will not solve our problem. If we have a layout similar to something below, we'd need to pass an array of ids in order to have expected accessibility behavior.

<body>
  <header id="someheader"></header>
  <main id="somemain"></main>
  <footer id="somefooter"></footer>
</body>
LeeroyJenks picture LeeroyJenks on 24 May 2021

@LeeroyJenks This is available on the latest version.

diasbruno picture diasbruno on 24 May 2021
🎉1

Both appElement on the component and setAppElement can receive a list of elements to hide.

diasbruno picture diasbruno on 24 May 2021
🎉1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

istok20 picture istok20  路  3Comments
fabien-somnier picture fabien-somnier  路  3Comments
phaedryx picture phaedryx  路  4Comments
yaoyao1024 picture yaoyao1024  路  3Comments
claydiffrient picture claydiffrient  路  4Comments