APG · Dialog (Modal)

Modal dialog

Focus goes in, cannot get out, and comes back to exactly where it started — including when the trigger is destroyed while the dialog is open.

Try each of these with the keyboard alone.

A background field, to prove the background is really inert:

What to check. Open a dialog, then press Tab past the last control — focus returns to the first, it does not reach the page. Click the background field: focus refuses to leave. Close with Esc and focus lands back on the button you opened it from. With VoiceOver, VO+→ cannot walk out of the dialog.

Keyboard interaction
`Tab`	Move to the next focusable element inside the dialog. From the last one, wrap to the first.
`Shift + Tab`	Move to the previous element. From the first, wrap to the last.
`Esc`	Close the dialog and return focus to the element that opened it.

Notes

The alert variant uses role="alertdialog" and points aria-describedby at the consequence text, so the stakes are read out with the title rather than found later. The third example has no focusable content at all — focus moves to the dialog container itself (tabindex="-1"), which is what makes the title get announced instead of focus silently staying on the now-inert page behind.

Modal dialog

Notes

Rename workspace

Delete this project?

Nothing to focus here