Accordion

1import { Accordion, AccordionItem } from '@/ui/Surface'23<Accordion multiple defaultOpen={['rollback']}>4  {faqs.map((f) => (5    <AccordionItem key={f.id} id={f.id} title={f.title} meta={f.category}>6      {f.body}7    </AccordionItem>8  ))}9</Accordion>1011// A collapsed section holding a validation error is a submit that fails for12// a reason the user cannot see. Open it and mark the heading.13React.useEffect(() => {14  const withErrors = sections15    .filter((s) => s.fields.some((f) => errors[f]))16    .map((s) => s.id)17  if (withErrors.length) setOpen((o) => [...new Set([...o, ...withErrors])])18}, [errors])1920// Native <details> is a legitimate implementation and gets the semantics,21// the keyboard and the print behaviour for free.22<details>23  <summary>How do rollbacks work?</summary>24  <p>A rollback re-points the load balancer at the previous healthy build.</p>25</details>2627// Animating height needs a measured value; 'auto' does not transition.28const [height, setHeight] = React.useState(0)29React.useLayoutEffect(() => {30  setHeight(open ? panelRef.current!.scrollHeight : 0)31}, [open, children])

<div class="ds-accordion">
  <!-- The heading gives it a place in the outline; the button gives it
       state. Both are required. -->
  <h3>
    <button
      type="button"
      id="trigger-rollback"
      aria-expanded="true"
      aria-controls="panel-rollback"
    >
      <svg aria-hidden="true">…</svg>
      How do rollbacks work?
    </button>
  </h3>

  <div id="panel-rollback" role="region" aria-labelledby="trigger-rollback">
    <p>A rollback re-points the load balancer at the previous healthy build.</p>
  </div>

  <h3>
    <button type="button" id="trigger-regions"
            aria-expanded="false" aria-controls="panel-regions">
      <svg aria-hidden="true">…</svg>
      Which regions can I deploy to?
    </button>
  </h3>

  <!-- hidden, not height:0 — a collapsed panel must be gone from the
       accessibility tree, not merely invisible. -->
  <div id="panel-regions" role="region" aria-labelledby="trigger-regions" hidden>
    <p>Twenty-four regions across four continents.</p>
  </div>
</div>

.ds-accordion {
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Between items only. A rule above the first or below the last doubles the
   container border and reads as a rendering fault. */
.ds-accordion > * + * {
  border-block-start: 1px solid var(--ds-border-subtle);
}

.ds-accordion button {
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
  /* The whole row, not the chevron: a 15px target on a 52px row is a miss
     waiting to happen. */
  padding: 14px 16px;
  text-align: start;
}

.ds-accordion button:hover { background: var(--ds-layer-hover); }

/* Leading, so it stays in one column as titles wrap. */
.ds-accordion svg {
  flex: 0 0 auto;
  transition: rotate 180ms cubic-bezier(0.2, 0, 0, 1);
}
.ds-accordion button[aria-expanded='true'] svg { rotate: 180deg; }

/* Panel aligns to the TITLE's left edge, not the container's — that is what
   makes it read as belonging to its heading. */
.ds-accordion [role='region'] {
  padding: 0 16px 16px calc(16px + 15px + 12px);
}

/* Modern height animation with no JS measurement. */
@supports (interpolate-size: allow-keywords) {
  .ds-accordion [role='region'] {
    interpolate-size: allow-keywords;
    transition: height 180ms, content-visibility 180ms allow-discrete;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-accordion svg,
  .ds-accordion [role='region'] { transition: none; }
}