a11y/dialog-focus

Why

If focus stays behind the overlay, keyboard and screen reader users keep working in a page they cannot see. If it is lost on close, they start again from the top of the page.

Fix

On open, focus the first field, or the least destructive button in a confirmation, or the dialog heading (tabindex="-1") when the content is long; autofocus on that element inside <dialog> does it. While open, the rest of the page is inert (showModal() does this). On close, focus the trigger again; if it is gone, focus the next logical place. Test with the keyboard and a screen reader.

Examples

let trigger
openButton.addEventListener('click', () => { trigger = document.activeElement; dialog.showModal() })
dialog.addEventListener('close', () => trigger?.focus())

Sources

• WAI-ARIA Authoring Practices, Dialog (Modal) pattern
• WCAG 2.2, Understanding SC 2.4.3 Focus Order

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/dialog-focus