{ "$schema": "https://www.digitaltableteur.com/schemas/contract-spec/1.0/contract.schema.json", "specVersion": "1.0", "name": "SegmentedControl", "status": "beta", "description": "Single-select segmented control: a compact, pill-shaped row of mutually exclusive options with one visibly selected, as a radiogroup with roving-tabindex arrow-key navigation. The selection indicator slides between options.", "package": { "name": "@digitaltableteur/react", "import": "import { SegmentedControl } from \"@digitaltableteur/react\";" }, "props": { "items": { "type": "SegmentedControlItem[]", "optional": false, "description": "Segments to render, in order." }, "value": { "type": "string", "optional": false, "description": "Currently selected value (controlled)." }, "onValueChange": { "type": "(value: string) => void", "optional": false, "description": "Called with the new value when a segment is selected." }, "size": { "type": "union", "values": [ "sm", "md", "lg" ], "optional": true, "description": "Size token." }, "ariaLabel": { "type": "string", "optional": false, "description": "Accessible name for the group (required; announced by screen readers)." }, "className": { "type": "string", "optional": true, "description": "Additional CSS class names." } }, "accessibility": { "criteria": [ { "id": "axe-no-violations", "statement": "Required stories produce no axe violations at the configured severity.", "verification": "automated", "wcag": [ "2.5.8" ], "check": "npm run test:stories:matrix:ci", "evidence": [ { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-default.dark.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:24:00.562Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-default.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:09:39.728Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-default.light.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:17:37.061Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-example.dark.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:24:01.039Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-example.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:09:40.216Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-example.light.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:17:37.536Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-playground.dark.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:24:00.807Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-playground.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:09:39.976Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-playground.light.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:17:37.302Z", "passed": true, "runner": "local-audit-fixes" } ] }, { "id": "accessibility-tree", "statement": "The accessibility tree (role, name, state) matches the committed snapshot for every required story.", "verification": "automated", "wcag": [ "1.3.1", "4.1.2" ], "check": "npm run test:stories:matrix:ci", "evidence": [ { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-default.dark.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:24:00.562Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-default.forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:30:15.659Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-default.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:09:39.728Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-default.light.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:17:37.061Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-example.dark.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:24:01.039Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-example.forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:30:16.127Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-example.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:09:40.216Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-example.light.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:17:37.536Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-forced-colors.dark.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:24:01.060Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-forced-colors.forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:30:16.150Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:09:40.239Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-forced-colors.light.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:17:37.557Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-playground.dark.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:24:00.807Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-playground.forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:30:15.897Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-playground.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:09:39.976Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-playground.light.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:17:37.302Z", "passed": true, "runner": "local-audit-fixes" } ] }, { "id": "forced-colors-real-browser", "statement": "The component remains legible and operable under a real browser forced-colors: active pass.", "verification": "automated", "check": "npm run test:stories:hc", "evidence": [ { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-default.forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:30:15.659Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-example.forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:30:16.127Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/SegmentedControl/__a11y-evidence__/navigation-segmentedcontrol-playground.forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:30:15.897Z", "passed": true, "runner": "local-audit-fixes" } ] }, { "id": "keyboard-contract", "statement": "Every documented keyboard interaction works as specified.", "verification": "unverified", "wcag": [ "2.1.1", "2.1.2" ], "note": "No exportable evidence record for this check; re-run the check to capture one." }, { "id": "aria-requirements", "statement": "Documented ARIA roles, states, and properties are present on the rendered output.", "verification": "unverified", "wcag": [ "4.1.2" ], "note": "No exportable evidence record for this check; re-run the check to capture one." }, { "id": "human-a11y-review", "statement": "A human completed an end-to-end accessibility review of this component.", "verification": "manual", "note": "2026-07-12 — alpha→beta: code-level a11y review. Container is role=radiogroup with a required aria-label; each segment is role=radio with aria-checked reflecting selection. Roving tabindex keeps exactly one segment tabbable (the selection, else the first enabled); Arrow keys move selection wrapping and skip disabled segments; Home/End jump to first/last enabled. Selection shown by a raised neutral surface (not brand fill) so it reads across light/dark; forced-colors maps the selected segment to a Highlight outline. Motion respects prefers-reduced-motion. Axe asserted in unit test; forced-colors + light/dark verified on a non-6010 Storybook. 2026-10-17: pill shape (radius-full) and a sliding selection indicator (aria-hidden span positioned from the selected segment; the segment paints its own background until measured, so server render and no-JS always show the selection). Reduced motion: no slide. Forced colours: indicator hidden, Highlight outline on the selected segment. Hover colour gated to (hover: hover).", "reviewedAt": "2026-07-12" } ] }, "source": [ "../../../nextjs-app/shared/components/SegmentedControl/SegmentedControl.module.css", "../../../nextjs-app/shared/components/SegmentedControl/SegmentedControl.tsx" ] }