Modal
Accessible dialog overlay with focus trap, ESC to close, backdrop dismiss, and flexible header/footer slots.
API
All inputs and configuration options for zyra-modal.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Two-way bound visibility state via [(open)] |
title | string | '' | Dialog heading displayed in the header |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Maximum width of the dialog panel |
dismissible | boolean | true | Shows a close × button and allows ESC / backdrop click to close |
closed (output) | void | - | Emits after the modal finishes closing |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Renders with role="dialog" and aria-modal="true" to isolate screen-reader focus
- Focus is trapped inside the modal while it is open
- ESC key closes the modal; focus returns to the trigger element on close
- aria-labelledby links the title to the dialog for screen reader announcement