abaabil

Dialog

7th lightest of the eight, by js weight

A wrapper around the native <dialog> element. The library does not reimplement focus trapping, Escape handling, top-layer stacking or background inerting: the browser already does all of that for a modal opened with showModal().

Example (a11y tier)

Example dialog

This is a native <dialog>. Focus containment, Escape to dismiss, top-layer rendering and the inert background all come from the browser, not from this library.

Import

import Dialog from 'abaabil/dialog'         // structure only
import Dialog from 'abaabil/dialog/styled'  // + CSS
import Dialog from 'abaabil/dialog/a11y'    // + open/close, labeling, light dismiss

What the a11y tier adds, and what it deliberately doesn't

  • Calls showModal() / close() on the underlying <dialog> in response to the open prop.
  • Sets an accessible name from label, and renders it as a visible title. Warns in development if label is omitted.
  • Light dismiss: a mousedown that lands on the dialog element itself (not its children, which is what a click on the native backdrop area looks like) closes it.
  • Does not implement a focus trap. That is deliberate: dialog.showModal() natively provides focus containment, Escape dismissal, aria-modal="true", top-layer rendering and an inert background. Reimplementing that in JavaScript is most of why other libraries' dialogs are far larger than this one.

Props

PropTypeDefaultTierDescription
classNamestring—allMerged with the base class.
openbooleanfalsea11yDrives showModal() / close().
onClosefunction—a11yCalled on the native close event (Escape, form method=dialog, light dismiss, or a programmatic close).
labelstring—a11yAccessible name. The platform does not supply one; also rendered as a visible title.
refref—a11yComposes with the component's own ref to the <dialog> element.
onMouseDownfunction—a11yComposes with the component's own light-dismiss handler.
...props——allEverything else spreads onto the <dialog> element.