The `<dialog>` element ships with focus trapping, Escape-to-close, backdrop rendering, and correct ARIA semantics — no library, no boilerplate. It's been Baseline since 2022.
Building a modal from scratch means writing the same boilerplate every time: a <div> with role="dialog", an aria-modal attribute, a tabindex="-1" to steal focus, a keydown listener to catch Escape, a focus-trap library to keep Tab cycling inside the dialog, and a click listener on the backdrop overlay you rendered yourself. It works, but you're doing the browser's job.
The <dialog> element exists to take that job back.
The baseline API
<dialog id="confirm-dialog">
<h2>Delete item?</h2>
Many developers still rely on heavy, third-party JavaScript frameworks or external UI libraries just...
There's a lot of nuance to the <dialog> element, a seemingly little piece of web architecture. I've got some notes from digging…
A few weeks ago I went through every "headless UI primitive" in @snatuva/primitives — our Angular...
If you've been building React apps for a while, you've probably had the same thought: "Not another...
Every accessibility checklist mentions focus management, and then moves on — as if it were one item....
React dialogs often start simple. You add an isOpen state, then a selected item state, then...
