Radix UI · Tabs

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

Tabreach the selected tab in one stop→ / ←should move between tabsTabshould leave the tablist for the panel

The mount, liveclick in once, then keyboard

Live DOM readout for the Tabs mount.
Reading	Now	APG expects
tablist role	…	one element with role=tablist
selected tab	…	exactly one tab with aria-selected="true"
panel labelled by its tab	…	visible tabpanel has aria-labelledby
document.activeElement	…	the selected tab while arrowing

Measured on @radix-ui/react-tabs@1.1.14.

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 Tabs from "@radix-ui/react-tabs";
import { TEXT } from "./harness-kit";

/**
 * Radix UI tabs, mounted exactly as the Radix documentation describes.
 *
 * Panels contain text and nothing focusable, per the protocol, so the APG
 * requirement that an otherwise-empty panel be reachable is actually testable.
 */
export function TabsHarness() {
  return (
    <>
      <button data-testid="hr-before" type="button">
        Before
      </button>

      <Tabs.Root defaultValue="one">
        <Tabs.List data-testid="hr-tablist">
          <Tabs.Trigger value="one" data-testid="hr-tab-1">
            {TEXT.tab1}
          </Tabs.Trigger>
          <Tabs.Trigger value="two" data-testid="hr-tab-2">
            {TEXT.tab2}
          </Tabs.Trigger>
          <Tabs.Trigger value="three" data-testid="hr-tab-3">
            {TEXT.tab3}
          </Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content value="one" data-testid="hr-panel-1">
          {TEXT.panel1}
        </Tabs.Content>
        <Tabs.Content value="two" data-testid="hr-panel-2">
          {TEXT.panel2}
        </Tabs.Content>
        <Tabs.Content value="three" data-testid="hr-panel-3">
          {TEXT.panel3}
        </Tabs.Content>
      </Tabs.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.