{ "$schema": "https://www.digitaltableteur.com/schemas/contract-spec/1.0/contract.schema.json", "specVersion": "1.0", "name": "MultiCombobox", "status": "stable", "description": "Multi-select combobox with inline chips, type-to-filter dropdown, label, error, and helper text.", "package": { "name": "@digitaltableteur/react", "import": "import { MultiCombobox } from \"@digitaltableteur/react\";" }, "props": { "label": { "type": "string", "optional": false, "description": "Field label; associates the input" }, "options": { "type": "MultiComboboxOption[]", "optional": false, "description": "Selectable options" }, "value": { "type": "string[]", "optional": false, "description": "Selected values (controlled)" }, "onValueChange": { "type": "(value: string[]) => void", "optional": false, "description": "Called with the next selected values" }, "id": { "type": "string", "optional": true, "description": "Explicit control id (wires the label); auto-generated when omitted" }, "placeholder": { "type": "string", "optional": true, "description": "Shown when nothing is selected" }, "helperText": { "type": "string", "optional": true, "description": "Assistive text below the field" }, "error": { "type": "string", "optional": true, "description": "Error message; renders above the helper line and sets aria-invalid" }, "status": { "type": "FieldStatus", "optional": true, "description": "Semantic state: colours the border and styles statusMessage. `error` overrides it." }, "statusMessage": { "type": "string", "optional": true, "description": "Message under the field for `status`, above the helper line" }, "actions": { "type": "FieldAction[]", "optional": true, "description": "Icon buttons at the end of the label row: each runs an operation or opens a menu" }, "required": { "type": "boolean", "optional": true, "description": "Marks the field required." }, "disabled": { "type": "boolean", "optional": true, "description": "Disables the control." }, "className": { "type": "string", "optional": true, "description": "Classes on the field wrapper" } }, "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/MultiCombobox/__a11y-evidence__/forms-multicombobox-default.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:19.553Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-default.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:22:30.109Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-default.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:32:41.130Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:20.152Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:22:30.709Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:32:41.770Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-keyboard-multi-select.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:20.512Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-keyboard-multi-select.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:22:31.049Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-keyboard-multi-select.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:32:42.187Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-playground.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:19.845Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-playground.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:22:30.406Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-playground.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:32:41.432Z", "passed": true, "runner": "local-recapture" } ] }, { "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/MultiCombobox/__a11y-evidence__/forms-multicombobox-default.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:19.553Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-default.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:44.600Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-default.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:22:30.109Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-default.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:32:41.130Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:20.152Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:45.195Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:22:30.709Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:32:41.770Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-forced-colors.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:20.563Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-forced-colors.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:45.586Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:22:31.085Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-forced-colors.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:32:42.271Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-keyboard-multi-select.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:20.512Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-keyboard-multi-select.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:45.545Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-keyboard-multi-select.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:22:31.049Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-keyboard-multi-select.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:32:42.187Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-playground.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:19.845Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-playground.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:44.887Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-playground.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:22:30.406Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-playground.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:32:41.432Z", "passed": true, "runner": "local-recapture" } ] }, { "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/MultiCombobox/__a11y-evidence__/forms-multicombobox-default.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:44.600Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:45.195Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-keyboard-multi-select.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:45.545Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/MultiCombobox/__a11y-evidence__/forms-multicombobox-playground.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:44.887Z", "passed": true, "runner": "local-recapture" } ] }, { "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": "Verified 2026-06-02: type-to-filter combobox — input role=combobox with aria-autocomplete=list/aria-expanded/aria-controls/aria-activedescendant, aria-labelledby; portaled role=listbox aria-multiselectable with role=option/aria-selected; chips are removable Badges, Backspace removes the last. Keyboard (ArrowUp/Down, Enter toggle, Escape, Backspace) driven and asserted by the KeyboardMultiSelect play function. Shares ComboboxField CSS (inherits the placeholder contrast fix). Default/Playground/Example/KeyboardMultiSelect pass axe with test:error; light + dark verified in Storybook. 2026-07-07 — beta→stable: 4-mode AT (base/light/dark/forced-colors) re-verified on a non-6010 Storybook.", "reviewedAt": "2026-11-04" } ] }, "governance": { "owner": "design-system", "lastReviewed": "2026-11-04", "note": "Reviewed by Petri Lahdelma; prepared by Claude from a code review on 2026-11-03" }, "source": [ "../../../nextjs-app/shared/components/MultiCombobox/MultiCombobox.module.css", "../../../nextjs-app/shared/components/MultiCombobox/MultiCombobox.tsx" ] }