a11y/dialog-focus

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

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

Przeczytaj w terminalu

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