Radix UI · Accordion

The exact mount the score was measured on. Scored result.

Tabreach the first headerEntershould toggle the sectionSpaceshould toggle it tooTabshould reach the next header

The mount, liveclick in once, then keyboard

Live DOM readout for the Accordion mount.
Reading	Now	APG expects
header inside a heading	…	each header inside h1-h6 or role=heading
header aria-controls	…	references the panel, at least while open
first header aria-expanded	…	toggles between "false" and "true"
document.activeElement	…	the focused header while testing keys

Measured on @radix-ui/react-accordion@1.2.20.

The same mount source, editable, with Radix UI resolved at the exact scored version. Example styling ships as polish.css; delete its import for the bare mount. Runs on CodeSandbox's bundler; the measurement belongs to the untouched mount.

import * as Accordion from "@radix-ui/react-accordion";
import { TEXT } from "./harness-kit";

/**
 * Radix UI accordion, mounted exactly as the Radix documentation describes.
 *
 * `type="single"` with `collapsible` so an expanded section can be closed again
 *  The default without it refuses to collapse the open section,
 * which is a configuration choice rather than the library's natural behaviour.
 * All sections start collapsed, per the protocol.
 *
 * Radix requires the Header/Trigger split, so the heading element comes from
 * Accordion.Header and the button from Accordion.Trigger.
 */
export function AccordionHarness() {
  return (
    <>
      <button data-testid="hr-before" type="button">
        Before
      </button>

      <Accordion.Root type="single" collapsible>
        <Accordion.Item value="shipping">
          <Accordion.Header>
            <Accordion.Trigger data-testid="hr-header-1">{TEXT.accordionHeader1}</Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Content data-testid="hr-panel-1">{TEXT.accordionPanel1}</Accordion.Content>
        </Accordion.Item>

        <Accordion.Item value="payment">
          <Accordion.Header>
            <Accordion.Trigger data-testid="hr-header-2">{TEXT.accordionHeader2}</Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Content data-testid="hr-panel-2">{TEXT.accordionPanel2}</Accordion.Content>
        </Accordion.Item>

        <Accordion.Item value="review">
          <Accordion.Header>
            <Accordion.Trigger data-testid="hr-header-3">{TEXT.accordionHeader3}</Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Content data-testid="hr-panel-3">{TEXT.accordionPanel3}</Accordion.Content>
        </Accordion.Item>
      </Accordion.Root>

      <button data-testid="hr-after" type="button">
        After
      </button>
    </>
  );
}

Open Sandbox

Self-run companion check, approximated in-browser from ARIA attributes and visibility. Official scores are measured by the runner with replayable Playwright traces.