Overlays
Every overlay, live. Each one handles focus, keyboard dismissal and ARIA wiring for you, and closes itself when you leave this page.
<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-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-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-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-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-floating>
Content pinned to a corner of the viewport, visible by default (no open attribute): it is shown and hidden through hidden. With controls, its button opens another overlay and keeps aria-expanded in sync. Expandable, it opens a non-modal panel that Escape, an outside click or its launcher collapse, returning focus to the launcher. Several in the same corner stack instead of overlapping. These start hidden; leaving this page removes them.
Dark mode is here. Dismiss this bubble with its × button; it also slides away while you scroll down.
Need help?
A non-modal panel: focus moved to its first control, and Escape or a click outside collapses it.
<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-notification-banner>
A persistent banner region: items never auto-dismiss and stay until the user dismisses them.
<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-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-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).