{ "$schema": "https://www.digitaltableteur.com/schemas/contract-spec/1.0/contract.schema.json", "specVersion": "1.0", "name": "ToastStack", "status": "stable", "description": "Docked stack of transient toasts: renders Toast children inline and owns the fixed placement, newest toast nearest the docked edge, so concurrent messages stay visible instead of replacing each other.", "package": { "name": "@digitaltableteur/react", "import": "import { ToastStack } from \"@digitaltableteur/react\";" }, "props": { "toasts": { "type": "ToastStackItem[]", "optional": false, "description": "Toasts to display, oldest first; new toasts are appended by the caller." }, "position": { "type": "union", "values": [ "top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right" ], "optional": true, "description": "Screen corner/edge the stack docks to. Defaults to `bottom-center`." }, "onDismiss": { "type": "(id: string) => void", "optional": true, "description": "Called with the toast id when its auto-dismiss timer fires or its dismiss button is pressed. Timers pause while the pointer is over the stack or focus is inside it." }, "max": { "type": "number", "optional": true, "description": "Maximum toasts rendered at once. Defaults to `5`. The oldest render; newer\nones wait unrendered (their timers only run while rendered), so a burst\ndrains in arrival order." }, "className": { "type": "string", "optional": true, "description": "Optional classes on the stack 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/ToastStack/__a11y-evidence__/feedback-toaststack-default.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:36:10.160Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-default.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:17:03.062Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-default.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:28:29.420Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:36:10.770Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:17:03.592Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:28:30.257Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-playground.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:36:10.467Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-playground.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:17:03.320Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-playground.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:28:29.828Z", "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/ToastStack/__a11y-evidence__/feedback-toaststack-default.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:36:10.160Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-default.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:25.840Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-default.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:17:03.062Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-default.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:28:29.420Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:36:10.770Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:26.432Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:17:03.592Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:28:30.257Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-forced-colors.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:36:10.798Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-forced-colors.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:26.475Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:17:03.638Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-forced-colors.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:28:30.319Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-playground.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:36:10.467Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-playground.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:26.104Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-playground.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:17:03.320Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-playground.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:28:29.828Z", "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/ToastStack/__a11y-evidence__/feedback-toaststack-default.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:25.840Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:26.432Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/ToastStack/__a11y-evidence__/feedback-toaststack-playground.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:26.104Z", "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-07-12 — alpha→stable: the multi-toast surface behind the app ToastProvider (providers/ToastProvider.tsx → app/layout.tsx). position axis migrated to a root CVA (toastStackVariants). 4-mode AT (base/light/dark/forced-colors) captured for all four required stories; each stacked Toast keeps its own live region so concurrent messages announce independently; forced-colors + light/dark re-verified. Exported from @digitaltableteur/react.", "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/ToastStack/ToastStack.module.css", "../../../nextjs-app/shared/components/ToastStack/ToastStack.tsx" ] }