Building an accessible modal dialog on the native

“Building an accessible modal dialog on the native <dialog>” title above a modal “Delete account?” with the text “This permanently removes your account and data. This cannot be undone” and buttons.

Agustin Barrientos leans on showModal() to get focus trapping, Escape to close, and focus restoration for free, then wraps it in a reusable Lit component with typed events. He sets deliberate initial focus, adds light-dismiss with the closedby attribute, animates with the :open pseudo-class and @starting-style, and respects prefers-reduced-motion.

agustinbarrientos.com/writing/senior-eye/accessible-modal-dialog