{ "$schema": "https://www.digitaltableteur.com/schemas/contract-spec/1.0/contract.schema.json", "specVersion": "1.0", "name": "CommandPalette", "status": "beta", "description": "Modal, keyboard-driven command launcher: a search input filters a listbox of commands (matched on label + keywords); Arrow keys move the active option, Enter runs it, Escape closes. Focus is trapped and background scroll locked while open.", "package": { "name": "@digitaltableteur/react", "import": "import { CommandPalette } from \"@digitaltableteur/react\";" }, "props": { "open": { "type": "boolean", "optional": false, "description": "Whether the palette is open (controlled)." }, "onClose": { "type": "() => void", "optional": false, "description": "Called to request close (Escape, overlay click, or after a selection)." }, "items": { "type": "CommandPaletteItem[]", "optional": false, "description": "Commands to show, in order." }, "label": { "type": "string", "optional": true, "description": "Accessible name for the dialog + listbox." }, "placeholder": { "type": "string", "optional": true, "description": "Search input placeholder." }, "emptyText": { "type": "string", "optional": true, "description": "Shown when nothing matches." }, "className": { "type": "string", "optional": true, "description": "Additional CSS class names for the dialog." } }, "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/CommandPalette/__a11y-evidence__/navigation-commandpalette-default.dark.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:27:34.479Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-default.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:12:50.124Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-default.light.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:20:59.375Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-example.dark.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:27:34.937Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-example.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:12:50.577Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-example.light.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:20:59.822Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-playground.dark.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:27:34.713Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-playground.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:12:50.356Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-playground.light.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:20:59.603Z", "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/CommandPalette/__a11y-evidence__/navigation-commandpalette-default.dark.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:27:34.479Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-default.forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:33:34.005Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-default.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:12:50.124Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-default.light.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:20:59.375Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-example.dark.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:27:34.937Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-example.forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:33:34.405Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-example.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:12:50.577Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-example.light.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:20:59.822Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-forced-colors.dark.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:27:34.965Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-forced-colors.forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:33:34.428Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:12:50.604Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-forced-colors.light.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:20:59.853Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-playground.dark.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:27:34.713Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-playground.forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:33:34.205Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-playground.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:12:50.356Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-playground.light.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:20:59.603Z", "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/CommandPalette/__a11y-evidence__/navigation-commandpalette-default.forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:33:34.005Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-example.forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:33:34.405Z", "passed": true, "runner": "local-audit-fixes" }, { "artifact": "../../../nextjs-app/shared/components/CommandPalette/__a11y-evidence__/navigation-commandpalette-playground.forced-colors.json", "sourceCommit": "ffbeeeec52e120b19494e2ac7b4dbab8ff13ceb3", "capturedAt": "2026-11-07T09:33:34.205Z", "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. Overlay dialog is role=dialog aria-modal with an accessible label; the search input is role=combobox with aria-expanded, aria-controls and aria-activedescendant onto the role=listbox; each command is role=option with aria-selected reflecting the active item. Focus is trapped (useFocusTrap) and background scroll locked (useScrollLock) while open; Arrow Up/Down wrap the active option, Enter runs it and closes, Escape closes, overlay mousedown closes. User-facing strings are props so the component carries no i18n dependency. Axe asserted in unit test; forced-colors + light/dark verified on a non-6010 Storybook. Known limitation: virtualization is not implemented, so very long command lists render in full.", "reviewedAt": "2026-07-12" } ] }, "source": [ "../../../nextjs-app/shared/components/CommandPalette/CommandPalette.module.css", "../../../nextjs-app/shared/components/CommandPalette/CommandPalette.tsx" ] }