i

Disclosure

Organising content · researched

A single summary line that expands to reveal extra content only when the person wants it.

atom · also called Details, Collapsible

Carbon has no stand-alone single disclosure (ExpandableTile is closest); HTML calls it details/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, ghost
Sizes
large, medium, small
States documented
disabled
Accessibility guidance
no

Index said not shipped; it missed this. Collapse is a stack of expandable panels (div-based, header role=button; accordion mode uses tablist/tab); a single panel works as a disclosure. accordion prop limits to one open panel.

1 corrected on re-read
  • states_documented: null → ["disabled"] Collapse/panel API: collapsible accepts header|icon|disabled

docs ↗ · code ↗

Carbon

Accordion item variant native: partly @carbon/react 1.117.0
Variants
flush alignment, icon alignment (start or end)
Sizes
sm, md, lg
States documented
hover, focus, disabled
Accessibility guidance
yes

Index said not shipped. A single AccordionItem is a li with a button toggling the panel (no details element); Carbon has no standalone disclosure, only the Accordion list of them. A useDisclosure hook (Disclosure/index.tsx) exists but is not a component. Docs also have a disclosures pattern page.

4 corrected on re-read
  • variants: null → ["flush alignment","icon alignment (start or end)"] Accordion usage 'Alignment': flush, icon alignment; docs name no variants of a single item
  • sizes: null → ["sm","md","lg"] Accordion style 'Sizes' table: Small, Medium, Large header
  • states_documented: null → ["hover","focus","disabled"] Usage: collapsed/expanded plus interactive states focus, hover, disabled
  • urls: {"docs_url":"https://carbondesignsystem.com/components/accordion/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Accordion"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/accordion/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Accordion"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/components/accordion/guidelines; code URL 200

docs ↗ · code ↗

GOV.UK

Details native: yes govuk-frontend 6.5.1
Variants
—
Sizes
—
States documented
default, hover, focus
Accessibility guidance
no

Renders a native details/summary element. Docs page compares details, accordion and tabs.

1 corrected on re-read
  • states_documented: ["default","focus"] → ["default","hover","focus"] scss has :hover and :focus on summary; page shows default and expanded

docs ↗ · code ↗

Material Web

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

Checked docs/components (20 component pages), the repo top-level dirs, labs/, labs/gb/components and the installed 2.5.0 package. No details/accordion/expansion element in the component dirs or labs.

Primer

Details native: yes @primer/react 38.40.1
Variants
—
Sizes
—
States documented
—
Accessibility guidance
yes

Primer React. Wraps native details and summary elements; status ready. Index also mapped the Progressive disclosure UI pattern (low); that is guidance, not a component.

docs ↗ · code ↗

Spectrum

Disclosure native: no @spectrum-web-components/button 1.12.4
Variants
—
Sizes
S, M, L, XL
States documented
—
Accessibility guidance
no

Implementations: S2 Disclosure and v3 Disclosure only (read from S2 Disclosure.mdx: size S to XL, density, isQuiet). React Aria Disclosure renders divs plus a button, not a details element. No spectrum.adobe.com page; SWC has Accordion item instead (accordion is installed at 1.12.4, but its item is the SWC counterpart, not Disclosure). MDX has no accessibility section.

docs ↗ · code ↗

USWDS

Accordion superset native: partly @uswds/uswds 3.14.0
Variants
bordered (usa-accordion--bordered), icon-start, icon-end, multiselectable (data-allow-multiple)
Sizes
—
States documented
default
Accessibility guidance
yes

Index said not shipped. Accordion is a list of expandable sections (button with aria-expanded inside a heading, not details/summary); a single-item accordion does the disclosure job. Docs describe multiselectable use; no standalone single disclosure.

1 corrected on re-read
  • variants: ["bordered (usa-accordion--bordered)","icon-start","icon-end"] → ["bordered (usa-accordion--bordered)","icon-start","icon-end","multiselectable (data-allow-multiple)"] docs variants table lists bordered, icon-start, icon-end; multiselectable preview exists

docs ↗ · code ↗

Platform facts

Native elementdetails with summarySpec: details 'represents a disclosure widget from which the user can obtain additional information or controls'; not for tabs/menus. MDN: open attribute (remove entirely to hide); name attribute links details so only one is open (accordion without script); contents of details give the accessible description of summary. APG ARIA: button with aria-expanded true/false, optional aria-controls. MDN summary: the role assigned to summary varies across browsers; some still give it a button role, which removes roles from its children.
Baseline—
APG patterndisclosure
ARIA role—
Shipped by6 of 7 systems

Anatomy

  1. disclosure button — APG: element with role button that shows and hides the content; HTML summary.
  2. disclosure content — APG: 'a section of content whose visibility is controlled by the button'.
  3. indicator (arrow/triangle) optional — APG: button 'often styled' with a right-pointing arrow collapsed, down when open; HTML details draws a triangle by default (MDN).

Keys the APG binds

  • Enteractivates the disclosure control and toggles the visibility of the disclosure content.
  • Spaceactivates the disclosure control and toggles the visibility of the disclosure content.

The seven states

default Collapsed (aria-expanded false) or expanded.
hover Pointer-only CSS state; not defined by APG or HTML.
focus Focus is on the disclosure button/summary.
active Pressed state while the pointer or key is down; CSS :active. Not defined by APG.
disabled n/a — Not defined by APG Disclosure or HTML details.
error n/a — Not defined.
loading n/a — Not defined.

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