Describe your motivation

Currently, modal overlays are teleported to body, and then all sibling elements in body are set to aria-hidden to hide them from the accessibility tree. This is straight-forward solution to make sure that only the modal element is discoverable.

With refactoring overlays to be based on native popovers, the overlays will stay in the DOM hierarchy and not be moved to the body. As such the approach of hiding sibling elements does not work anymore.

With #9749 the logic was already changed, so that it recursively hides every element except those that are ancestors of the overlay element. However that may not be good enough. For example, if the overlay element is contained in a landmark such as main, that landmark would not be hidden and would still be discoverable in the accessibillity tree.

Describe the solution you'd like

We need an alternative to using aria-hidden, as we can not hide ancestors of the overlay element. The PRD suggests to try aria-modal:

The aria-modal attribute (which seems to have sufficient support in all major browser/screen reader combinations these days) provides a solution, although it requires the overlay's role to be dialog or alertdialog (which may or may not be a problem).

Describe alternatives you've considered

No response

Additional context

No response