Dialog

A dialog is a window overlaid on the page that interrupts the user's flow to request input or display important information.

Dialogs can be used to confirm destructive actions, request information needed to continue a task, or display content that requires immediate attention. They are less suitable for non-urgent information that could be shown inline, since they interrupt the user's flow.

Accessibility Features

  • Keyboard focus must move into the dialog on open and return to the trigger button on close. Focus must be trapped inside the dialog while it is open.
    → A native <dialog> element opened with showModal() provides the modal role and the focus trap automatically. If an element with role="dialog" is used instead, the focus trap must be implemented manually, for example, by adding inert to other elements on the page.
  • aria-labelledby associates the dialog with its heading so screen readers announce its purpose.
  • aria-haspopup="dialog" communicates that the trigger button opens a dialog.
  • Esc closes the dialog.

Example

Code Snippet