Modal with inert

The button will launch a modal dialog.

Uses inert to take care of focus management (by making any focusable element in the underlying page non-focusable, though we still need to manually move the focus to the dialog and reset it correctly after the dialog is closed) and hide the underlying page from assistive technologies when the modal is open, without the need for aria-hidden="...".

This demo uses the inert polyfill), which "fakes" inert support by adding tabindex="-1" to focusable elements and adding aria-hidden="true"