Examples · Motion & accessibility
Modal dialog
A native <dialog> driven by a signal: focus trap, Escape, backdrop, focus return.
The browser already has an accessible modal. modal(dialog, open) calls showModal()/close() as the signal changes and writes Escape, the backdrop and the close button back into the signal. No z-index, no focus code.
What to notice
- Escape, the backdrop and Cancel all resolve to “Kept”; only the Delete button returns
ok. - Focus returns to the button that opened the dialog.
- The dialog is server HTML: it renders without JavaScript, only the behaviour is added.
Open it, press Escape, open it again and click outside.