search

reactjs / react-modal

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

React Modal generates three ARC Toolkit errors when modal is open #962

Open Fordi opened 1 year ago

Fordi commented 1 year ago

Summary:

ARC Toolkit is used for covering accessibility defects. When a modal is open, the data-react-modal-body-trap elements each generate the error "Non-active element in tab order", and the app root generates the error "aria-hidden used on parent of focusable"

Steps to reproduce:

Pre-req: have ARC toolkit installed

  1. browse to https://codesandbox.io/s/9xnen
  2. Open the rendered project in a new window
  3. Click to open the modal
  4. In your dev tools, open ARC Toolkit and click "Run tests"

Expected behavior:

No new errors generated

Link to example of issue:

Sandbox starter: https://codesandbox.io/s/9xnen

Additional notes:

For the "Non-active element in tab order" errors, I was able to suppress them by adding aria-hidden to the body traps. I'm not sure what the solution for setting #root to aria-hidden would be. I was able to suppress the error and keep the button out of the tab order by setting #root[disabled], but I don't know that suppresses all the screen reader content below it.

diasbruno commented 1 year ago

@Fordi This problem happens because you are setting the app element to the #root, which contains all your application. The correct way is to create and adjacent element to place the modals.

<div id="app" />
<div id="modals" />
diasbruno commented 1 year ago

This is on the roadmap for v4. See https://github.com/reactjs/react-modal/issues/988.

ben-matthews6-NHSD commented 2 months ago

@diasbruno do you have an update on this thread?

Can you also explain the purpose of the <div data-react-modal-body-trap="" tabindex="0" style="position: absolute; opacity: 0;"></div> DOM elements?

CC: @Fordi