Modal should trap screen reader focus #2405
Description
Currently, the method for trapping focus in the Modal component for screen readers is not working as expected. This was previously working, but at some point, the behavior changed. I copied this description of the issue from #1389:
I think the PR where we implemented this was #1011. I'm not sure if there were other updates made since then that intended to modify this behavior, or if updates since then were made unintentionally, but the behavior required to trap focus for screen reader users is no longer working.
The method we use for trapping focus is documented in the accessibility guide:
... apply
aria-hidden="true"to the parent wrapping element of the page contents. Note that the modal element of the component must not be a descendent of this element witharia-hidden="true"and should be included as a sibling to this element.
Currently, if I open a modal, I see that aria-hidden is applied to every child of the <body> element on the page, including the <div> that has the modal. This breaks screen reader accessibility.