Accordion primitive

Headless Accordion: the behavior, keyboard support and ARIA of the WAI-ARIA Accordion pattern, with no styles.

@ndop/primitives/accordion
WAI-ARIA: Accordion

Import

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

import {
  NdAccordion,
  NdAccordionContent,
  NdAccordionHeader,
  NdAccordionItem,
  NdAccordionTrigger,
} from '@ndop/primitives/accordion';

Accessibility

Implements the Accordion pattern of the WAI-ARIA Authoring Practices.

Keyboard

Keys the component handles.

Key	Action
`Tab`	Moves focus through the triggers and any open content, in document order.
`Enter`or`Space`	Opens or closes the focused trigger's item.
`ArrowDown`	Moves focus to the next enabled trigger, wrapping to the first.
`ArrowUp`	Moves focus to the previous enabled trigger, wrapping to the last.
`Home`	Moves focus to the first enabled trigger.
`End`	Moves focus to the last enabled trigger.

Focus

Every enabled trigger is in the tab order; opening or closing an item keeps focus on its trigger.
Disabled triggers are skipped by the arrow keys.

Right-to-left

Nothing mirrors: the arrow keys follow the vertical order of the triggers.

API reference

NdAccordion

[ndAccordion]from @ndop/primitives/accordion

Root of an accordion: the WAI-ARIA Accordion pattern, a stack of headed sections that each show or hide their content. It composes the CDK's CdkAccordion (ADR-0004, amendment 3) and holds the open items' values.

NdAccordion binding	Type	Default
`[defaultValue]` Initially open items when `value` isn't bound: one value or a list.	`string \| readonly string[] \| null`	`null`
`[multiple]` Lets several items be open at once.	`boolean`	`false`
`[collapsible]` Lets the open item close when only one item may be open.	`boolean`	`false`
`[disabled]` Disables every item.	`boolean`	`false`
`[(value)]` The open items' values. Two-way bindable with `[(value)]`.	`readonly string[]`	`[]`

NdAccordionContent

[ndAccordionContent]role regionfrom @ndop/primitives/accordion

The content its item's trigger shows and hides: a region labelled by the trigger. It has the hidden attribute while closed. For the styled layer to animate it, it sets --nd-accordion-content-height to its height when it opens or closes, stays visible until a closing animation ends, and has data-animating while one runs; no animation plays on the first render.

Manages aria-labelledby, id, hidden.

Data attribute	Values
`data-state`	—
`data-disabled`	—
`data-animating`	—

NdAccordionHeader

[ndAccordionHeader]from @ndop/primitives/accordion

The heading around an item's trigger. Put it on an h2 to h6 that fits the page's outline.

Data attribute	Values
`data-state`	—
`data-disabled`	—

NdAccordionItem

[ndAccordionItem]from @ndop/primitives/accordion

One section of an NdAccordion, composing CdkAccordionItem: a heading with its trigger, and the content the trigger shows.

NdAccordionItem binding	Type	Default
`[value]`required The value `value` lists while it's open.	`string`	`—`
`[disabled]` Disables its trigger.	`boolean`	`false`

Data attribute	Values
`data-state`	—
`data-disabled`	—

NdAccordionTrigger

button[ndAccordionTrigger]from @ndop/primitives/accordion

The button that opens and closes its item, on a native button inside its NdAccordionHeader. ArrowDown, ArrowUp, Home and End move between the accordion's triggers.

Manages aria-expanded, aria-controls, aria-disabled, id.

Data attribute	Values
`data-state`	—
`data-disabled`	—