Overlays

Modal

How the Modal works with a keyboard and assistive tech.

Guidance#

A native <dialog> opened with showModal(): the page behind becomes inert and focus moves inside.

It is named by its title (aria-labelledby) and described by its copy (aria-describedby).

Escape, the close button and a click on the overlay all close it, and focus returns to the control that opened it.

Use a status modal for decisions, not for news; the icon never carries the meaning alone.