/api /r tokens.json GitHub

Wiki Modal Dialog

Native <dialog> element modal with showModal() focus trap. Used for image lightbox, search overlay, and confirmation prompts. Dismisses on Escape or backdrop click.

Live previewrendered from recipe via {tokens} resolution
default

{{content}}

Title + body + optional footer actions.

image-lightbox

{{content}}

Full-width <figure> as content; no footer.

search-overlay

{{content}}

Search input + live results as content.

ARIA notes

dialog.showModal() creates a native focus trap; all content outside the dialog is unreachable. aria-labelledby points to visible <h2> title. aria-describedby points to body div. Close button: aria-label='Close dialog', positioned first in DOM for Tab-first focus or autofocus attr. Escape key: native <dialog> handles Escape → 'cancel' event → call dialog.close().

The usage tab for this component is not yet authored. Creative Design Contributors — pick this up.

Recipe is at /api/components/wiki-modal-dialog.json.