Overlays
Every overlay, live. Each one handles focus, keyboard dismissal and ARIA wiring for you, and closes itself when you leave this page.
<a11y-modal>
A centered dialog: focus trap, scroll lock, and dismissal with Escape, a backdrop click or its close button. It is named after its first heading.
Settings
Press Escape, click the backdrop, or use the close button to dismiss. Focus stays inside until then.
<a11y-drawer>
A panel that slides in from a screen edge, with the same focus trap, scroll lock and dismissal as the modal.
Navigation
Filters
<a11y-emergency-dialog>
A modal that only closes programmatically: no close button, no backdrop click, no Escape. For things the user must consciously resolve.
Session expiring
Your session is about to expire. Escape and backdrop clicks do nothing here; only the button below closes this dialog.
<a11y-blocking-loader>
A full-screen, non-dismissible loader. While it shows, the rest of the page is inert for keyboard and assistive-tech users too. This demo closes it after 2.5 seconds.
<a11y-dropdown>
A menu anchored to its trigger. The trigger toggles it and gets aria-haspopup, aria-controls and aria-expanded. Arrow keys move between items and Escape closes it.
<a11y-context-menu>
A menu that opens at the pointer on right-click of its trigger, replacing the native context menu there. The keyboard context-menu key or Shift+F10 work too.
<a11y-popover>
Content anchored to a trigger. An interactive popover is a dialog that traps focus; a non-interactive one is a plain region. It closes on outside click or Escape.
An interactive popover: focus moves inside and stays there until it closes.
<a11y-tooltip>
Shown on hover or focus after a short delay and linked to its anchor through aria-describedby. It stays open while hovered and Escape dismisses it (WCAG 1.4.13).
<a11y-snackbar>
Toast notifications announced through a live region. They auto-dismiss, pausing while hovered or focused, and get longer when they have an action button.
<a11y-notification-banner>
A persistent banner region: items never auto-dismiss and stay until the user dismisses them.