« Back to home

A minimal viable modal - option 2

This builds on option 1 by adding two small, deliberate enhancements: focus is sent to the dialog's heading specifically (rather than left to the browser's default), and clicking the backdrop closes the dialog.

This content should become inert while the modal is open.

A link (should not be focusable while modal is open)

Expected results:

1. Focus should go to the dialog's heading specifically.
2. The role should be announced e.g. dialog.
3. The heading should be announced, since it is the focused element.
4. Clicking the backdrop (outside the dialog box) should close the dialog.

Notes

What this requires to function: like option 1, this uses the command/commandfor Invoker Commands API for opening and closing the dialog (Baseline: Chrome 135+, Firefox 144+, Safari 26.2+). The additional JavaScript below only handles focus and backdrop-click, opening and closing the dialog itself still needs no JavaScript at all.

Because this uses a native <dialog> shown via show-modal, role="dialog" and aria-modal="true" are applied automatically by the browser. Compare this with the traditional (old-school) version, where both had to be written by hand. Escape also closes the dialog automatically, no JavaScript needed for that either.