Drawer primitive

Headless Drawer: the behavior, keyboard support and ARIA of the WAI-ARIA Dialog (Modal) pattern, with no styles.

@ndop/primitives/drawer
WAI-ARIA: Dialog (Modal)

Import

Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Drawer is built on this one.

import {
  NdDrawer,
  NdDrawerHandle,
  NdDrawerClose,
  NdDrawerContent,
  NdDrawerDescription,
  NdDrawerOverlay,
  NdDrawerPortal,
  NdDrawerTitle,
  NdDrawerTrigger,
} from '@ndop/primitives/drawer';

Accessibility

Implements the Dialog (Modal) pattern of the WAI-ARIA Authoring Practices.

Keyboard

Keys the component handles.

Key	Action
`Tab`	Moves focus to the next focusable element inside; wraps from last to first.
`ShiftTab`	Moves focus to the previous focusable element inside; wraps from first to last.
`Escape`	Closes the drawer, unless `closeOnEscape` is `false`.
`Tab`	Moves focus to the next focusable element inside the dialog; from the last one, wraps to the first.
`ShiftTab`	Moves focus to the previous focusable element inside the dialog; from the first one, wraps to the last.
`Escape`	Closes the dialog, unless `closeOnEscape` is `false`.

Focus

On open: focus moves to the first focusable element in the content, or to the content element itself when it has none.
While open: focus is trapped in the content.
On close: focus returns to the element that had it before opening, usually the trigger.

Right-to-left

start and end drawers come from the right and left in right-to-left layouts, and are dragged toward those edges. Direction comes from the nearest dir attribute. Nothing mirrors: the dialog is centered, and Tab order follows the DOM.

API reference

NdDrawer

[ndDrawer]from @ndop/primitives/drawer

Root of a drawer: a modal dialog (the Dialog primitive) that slides in from an edge, set by its content's direction, and can be dragged back out. open, defaultOpen, closeOnEscape and closeOnOverlayClick are Dialog's. Put it on an ng-container.

NdDrawer binding	Type	Default
`[defaultOpen]` Initial open state when `open` is not bound.	`boolean`	`false`
`[closeOnEscape]` Whether Escape closes the dialog.	`boolean`	`true`
`[closeOnOverlayClick]` Whether a click on `[ndDialogOverlay]` closes the dialog.	`boolean`	`true`
`[(open)]` Whether the dialog is open. Two-way bindable with `[(open)]`.	`boolean`	`false`

NdDrawerHandle

[ndDrawerHandle]from @ndop/primitives/drawer

A decorative grip that shows the drawer can be dragged, hidden from assistive technology.

Manages aria-hidden.

NdDrawerClose

[ndDrawerClose]from @ndop/primitives/drawer

A button that closes its NdDrawer.

NdDrawerContent

[ndDrawerContent]role dialogfrom @ndop/primitives/drawer

The drawer panel: Dialog's content (role="dialog", modal, labelled and described) that can be dragged toward its edge to close. While dragged it has data-dragging and the distance in --nd-drawer-drag, for the styled layer to move it; the primitive sets no other style.

Manages aria-modal, aria-labelledby, aria-describedby.

NdDrawerContent binding	Type	Default
`[direction]` The edge it slides in from and is dragged back to.	`'start' \| 'end' \| 'bottom' \| 'top'`	`'bottom'`

Data attribute	Values
`data-direction`	—
`data-dragging`	—
`data-state`	—

NdDrawerDescription

[ndDrawerDescription]from @ndop/primitives/drawer

The description of an NdDrawer.

NdDrawerOverlay

[ndDrawerOverlay]from @ndop/primitives/drawer

The backdrop behind an NdDrawer; clicking it closes the drawer unless closeOnOverlayClick is false.

Manages aria-hidden.

Data attribute	Values
`data-state`	—

NdDrawerPortal

ng-template[ndDrawerPortal]from @ndop/primitives/drawer

Marks the ng-template an NdDrawer renders while open.

NdDrawerTitle

[ndDrawerTitle]from @ndop/primitives/drawer

The title of an NdDrawer, which labels it.

NdDrawerTrigger

[ndDrawerTrigger]from @ndop/primitives/drawer

The button that opens an NdDrawer.

Manages aria-haspopup, aria-expanded, aria-controls.

Data attribute	Values
`data-state`	—