Bug - [Modal] - models incorrectly mark dom nodes with aria-hidden="true"

[christianvogt]

Describe the problem
Modal components incorrectly update the aria-hidden attribute of the root and siblings.

When a modal is open, the root and all siblings should have aria-hidden="true" except for the modal container.

When using React.StrictMode along with a useEffect somewhere in the app hierarchy, the double rendering effect of strict mode causes the open modal to have aria-hidden="true" when it shouldn't.

Also when using React.StrictMode a new div is appended to the DOM which is never removed until the page is refreshed.

Finally if there are multiple Modals rendered with isOpen={false} and one of them is opened, the root and all siblings lose their attribute aria-hidden="true".

When using Cypress for testing, selectors will fail to find elements within a hidden element if aria-hidden="true". This prevents our developers from using cypress against a dev env and allowing them to develop and run their cypress tests against their dev app.

How do you reproduce the problem?
Here's a sandbox with all the use cases.
https://codesandbox.io/s/withered-frog-qc67dn?file=/index.js

Expected behavior
Using React.StrictMode should have no bearing on the correct functionality of the Modal component. It should work as expected in or out of this mode.

Is this issue blocking you?
Yes.
Unable to run our cypress tests within a development environment which is using React.StrictMode.

Work around is to edit the app and remove strict mode however that is not a viable solution all the time.
Alternatively, devs can run cypress against a production build which takes much longer to iterate with during development.

What is your product and what release date are you targeting?
RHOAI

Any other information?