i

Accordion

Organising content · researched

A vertical stack of headings that each expand or collapse to show or hide a section of content.

molecule · also called Collapse · contains disclosure

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Collapse superset native: no antd 6.6.5
Variants
bordered, borderless, ghost
Sizes
large, medium, small
States documented
default, disabled
Accessibility guidance
no

Accordion is a mode (accordion prop) of Collapse; custom React implementation, not details. No accessibility section found.

docs ↗ · code ↗

Carbon

Accordion native: no @carbon/react 1.117.0
Variants
flush alignment, chevron at end, chevron at start
Sizes
sm, md, lg
States documented
hover, focus, disabled
Accessibility guidance
yes

Source uses a button with aria-expanded plus a div, not details/summary. Variants listed are alignment/icon-placement options on the docs page.

2 corrected on re-read
  • sizes: null → ["sm","md","lg"] Docs have no sizes; Accordion.tsx prop size?: 'sm'|'md'|'lg' (source union)
  • a11y_documented: "unread" → "yes" accordion/accessibility.mdx exists with What Carbon provides / Labeling and states headings

docs ↗ · code ↗

GOV.UK

Accordion native: no govuk-frontend 6.5.1
Variants
—
Sizes
—
States documented
default
Accessibility guidance
yes

Template renders divs with a span for the section button; JS builds the buttons, and without JS all content shows with section headings. Does not use details element.

1 corrected on re-read
  • a11y_documented: "no" → "yes" Section 'Users that navigate using elements lists' and Known issues discuss screen reader / speech-recognition a11y

docs ↗ · code ↗

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Not in repo root directories (github.com/material-components/material-web), docs/components/ (button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field) or labs/. No accordion, expansion panel or disclosure component appears in any listing, and the roadmap does not mention one.

Primer

absentPrimer does not ship this component. Nothing is drawn in its place.

No Accordion in the docs component index or in packages/react/src. Nearest is Details (wrapper over native details element, documented at /product/components/details/); TreeView also exists.

Spectrum

Accordion native: partly @spectrum-web-components/button 1.12.4
Variants
—
Sizes
s, m, l, xl
States documented
default, hover, active, focus, disabled
Accessibility guidance
no

Also has density (compact, regular, spacious) and heading level (2-6) options. SWC renders a <button> header with a div role=region, not <details>/<summary>.

docs ↗ · code ↗

USWDS

Accordion native: no @uswds/uswds 3.14.0
Variants
bordered, icon-start, icon-end, multiselectable
Sizes
—
States documented
—
Accessibility guidance
yes

Button elements with aria-expanded/aria-controls, not native details. Borderless is the default.

1 corrected on re-read
  • variants: ["bordered","multiselectable"] → ["bordered","icon-start","icon-end","multiselectable"] Table: --bordered, --icon-start, --icon-end (3.14.0); multiselectable is a demoed option (data-allow-multiple), not in table

docs ↗ · code ↗

Platform facts

Native elementdetails with summary (name attribute groups them as exclusive)Spec: details content attributes are only name ('Name of group of mutually-exclusive details elements') and open; there is no disabled attribute, and no heading wrapper. BCD details name: Chrome/Edge 120, Firefox 130, Safari 17.2. The spec describes details as a disclosure widget.
Baselinenewly · 2024-09-03
APG patternaccordion
ARIA role—
Shipped by5 of 7 systems

Anatomy

  1. accordion header — APG term: 'Label for or thumbnail representing a section of content that also serves as a control for showing, and in some implementations, hiding the section of content'. Its title is in an element with role button.
  2. heading — APG: each header button is wrapped in an element with role heading and aria-level; a native h1-h6 may be used. The button is the only element inside the heading.
  3. accordion panel — APG term: section of content associated with an accordion header. Optionally role region with aria-labelledby pointing at the header button.

Keys the APG binds

  • Enter or SpaceWhen focus is on the accordion header for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel. When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing. Some implementations require one panel to be expanded at all times and allow only one panel to be expanded; so, they do not support a collapse function.
  • TabMoves focus to the next focusable element; all focusable elements in the accordion are included in the page Tab sequence.
  • Shift + TabMoves focus to the previous focusable element; all focusable elements in the accordion are included in the page Tab sequence.

The seven states

default Collapsed unless open; aria-expanded false.
hover Pointer-only CSS state on the header.
focus Header button is a Tab stop.
active Expanded (aria-expanded true / open) is the persistent state; also momentary press.
disabled APG: aria-disabled true on a header whose open panel cannot be collapsed; details has no disabled attribute (MDN).
error n/a — Disclosure with no value to validate.
loading n/a — Not defined by APG or HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 4 of 35 fields changed on the second read — open any “corrected” note to see what it said before.