{ "$schema": "https://www.digitaltableteur.com/schemas/contract-spec/1.0/contract.schema.json", "specVersion": "1.0", "name": "FormFieldEditorial", "status": "stable", "description": "Single field for editorial contact flows: a text, email, tel, textarea or select control on the shared FieldShell label, status and helper chrome.", "props": { "type": { "type": "union", "values": [ "text", "tel", "email", "textarea", "select" ], "optional": true, "description": "Control to render; defaults to text. select renders Combobox over a hidden native select element that carries the forwarded ref, name, form and disabled, so the value submits with its form, onChange receives a real change event from that select and onBlur fires when focus leaves the field; defaultValue is an uncontrolled initial value. aria-describedby is passed to the Combobox trigger; other select attributes are dropped." }, "children": { "type": "ReactNode", "optional": true, "description": "Option elements for type=\"select\", parsed into Combobox options; an option with an empty value becomes the placeholder." }, "label": { "type": "string", "optional": false, "description": "Field label, rendered by the shared FieldShell Label (Combobox label for\nselect)." }, "error": { "type": "string", "optional": true, "description": "Error message" }, "required": { "type": "boolean", "optional": true, "description": "Whether the field is required" }, "className": { "type": "string", "optional": true, "description": "Additional className" }, "id": { "type": "string", "optional": true, "description": "Field ID. When omitted it is generated from the label: lowercased, accents folded (Sähköposti becomes sahkoposti), spaces hyphenated and letters of any script kept; a label with no letters or digits gets a unique generated id. Two fields with the same label still need an explicit id." }, "helperText": { "type": "string", "optional": true, "description": "Supporting text under the field, linked with aria-describedby (select passes it to Combobox). Use it, for example, to say why a read-only value is fixed." }, "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" } }, "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/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-default.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:40:10.824Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-default.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:30.932Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-default.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:30:55.223Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:40:11.409Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:31.517Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:30:55.809Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-forced-colors.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:40:11.715Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:31.801Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-forced-colors.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:30:56.132Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-playground.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:40:11.118Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-playground.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:31.228Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-playground.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:30:55.522Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-read-only.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:40:12.040Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-read-only.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:32.098Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-read-only.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:30:56.479Z", "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/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-default.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:40:10.824Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-default.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:48:45.106Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-default.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:30.932Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-default.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:30:55.223Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:40:11.409Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:48:45.652Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:31.517Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:30:55.809Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-forced-colors.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:40:11.715Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-forced-colors.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:48:45.916Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:31.801Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-forced-colors.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:30:56.132Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-playground.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:40:11.118Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-playground.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:48:45.388Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-playground.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:31.228Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-playground.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:30:55.522Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-read-only.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:40:12.040Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-read-only.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:48:46.204Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-read-only.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:32.098Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-read-only.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:30:56.479Z", "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/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-default.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:48:45.106Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:48:45.652Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-forced-colors.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:48:45.916Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-playground.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:48:45.388Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/FormFieldEditorial/__a11y-evidence__/site-formfieldeditorial-read-only.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:48:46.204Z", "passed": true, "runner": "local-recapture" } ] }, { "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-05-28 — Breadth beta port: keyboard/ARIA contract reviewed, ForcedColors story added, Storybook axe gate (parameters.a11y.test: error). 2026-07-09 — Promoted beta→stable: 4-mode AT snapshots captured for all required stories, forced-colors re-verified in a real browser, consumers audited.", "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/FormFieldEditorial/FormFieldEditorial.module.css", "../../../nextjs-app/shared/components/FormFieldEditorial/FormFieldEditorial.tsx" ] }