React Modal generates three ARC Toolkit errors when modal is open

[Fordi]

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]

@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]

This is on the roadmap for v4. See #988.

[ben-matthews6-NHSD]

@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