Skip to content

Latest commit

Β 

History

History
45 lines (40 loc) Β· 1.78 KB

File metadata and controls

45 lines (40 loc) Β· 1.78 KB
@dunky.dev/accordion minor
@dunky.dev/react-accordion minor

Add the Accordion primitive β€” stacked disclosure sections following the WAI-ARIA APG pattern, shipped as an agnostic core (@dunky.dev/accordion) plus a React binding (@dunky.dev/react-accordion).

The type discriminant picks the value shape (single speaks string | null, multiple speaks string[]), so an impossible state β€” two open items in single mode β€” is unrepresentable. Single mode is non-collapsible by default, per the APG single-expansion pattern; opt into collapsible to allow closing the open item. Arrow keys (orientation-aware), Home, and End move focus across enabled triggers with wrap.

A controlled value is authoritative (the Radix semantics): a press reports the value it asked for through onValueChange and the accordion follows the prop, so an update the consumer declines never drifts the UI away from the prop. Per APG, the open item's trigger in single non-collapsible mode is exposed as aria-disabled β€” its panel cannot be collapsed β€” while staying focusable and reachable by keyboard navigation.

import { Accordion } from '@dunky.dev/react-accordion'

function App() {
  return (
    <Accordion type='single' collapsible onValueChange={console.log}>
      <Accordion.Item value='shipping'>
        <Accordion.Header>
          <Accordion.Trigger>Shipping</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>Ships in 3-5 business days.</Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value='returns'>
        <Accordion.Header>
          <Accordion.Trigger>Returns</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>Free returns within 30 days.</Accordion.Content>
      </Accordion.Item>
    </Accordion>
  )
}