{ "$schema": "https://www.digitaltableteur.com/schemas/contract-spec/1.0/contract.schema.json", "specVersion": "1.0", "name": "AlertBanner", "status": "stable", "description": "Inline alert for info, warning, success, and error feedback.", "package": { "name": "@digitaltableteur/react", "import": "import { AlertBanner } from \"@digitaltableteur/react\";" }, "props": { "tone": { "type": "union", "values": [ "info", "success", "warning", "error" ], "optional": true, "description": "Semantic tone controlling icon and surface colors." }, "title": { "type": "string", "optional": true, "description": "Alert title, rendered as a bold `` label, not a heading, so it adds\nnothing to the page outline." }, "description": { "type": "React.ReactNode", "optional": true, "description": "Supporting body copy." }, "action": { "type": "React.ReactNode", "optional": true, "description": "Optional action slot rendered under the description (e.g. a tertiary Button)." }, "showIcon": { "type": "boolean", "optional": true, "description": "Show the semantic tone icon. The icon is derived from `tone`; set false for a text-only banner." }, "dismissible": { "type": "boolean", "optional": true, "description": "Shows a localized dismiss control when true and onDismiss is set. The banner does not hide itself: remove it in onDismiss. Without onDismiss no control renders and a development warning names the gap. Error banners must not be dismissible." }, "onDismiss": { "type": "() => void", "optional": true, "description": "Called when the user activates the dismiss control. The consumer removes the banner. Required for the control to render." }, "aria-live": { "type": "union", "values": [ "polite", "assertive", "off" ], "optional": true, "description": "Live region politeness for assistive tech (an explicit value wins over the tone default)." }, "focusOnMount": { "type": "boolean", "optional": true, "description": "Moves focus to the banner when it mounts, for form error summaries: keyboard\nand screen reader users land on the list of problems after a failed submit." } }, "rules": [ { "id": "alertbanner-dismissible-needs-ondismiss", "when": { "dismissible": { "present": true }, "onDismiss": { "absent": true } }, "requireAllOf": [ "onDismiss" ], "reason": "The banner does not hide itself, so dismissible without onDismiss renders no Close button. Pass a handler that removes the banner, e.g. setShown(false)} />.", "severity": "error", "evidence": "AlertBanner.tsx development warning (dismissible && !onDismiss); the dismiss control renders only with onDismiss" }, { "id": "alertbanner-error-not-dismissible", "when": { "tone": { "equals": "error" }, "dismissible": { "present": true } }, "forbid": [ "dismissible" ], "reason": "An error banner explains a blocked flow; letting the user hide it strands them. Drop dismissible and keep the banner until the problem is resolved.", "severity": "error", "evidence": "AlertBanner.tsx development warning (dismissible && tone === \"error\")" } ], "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/AlertBanner/__a11y-evidence__/feedback-alertbanner-info.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:43:23.236Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-info.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:24:19.506Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-info.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:34:34.419Z", "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/AlertBanner/__a11y-evidence__/feedback-alertbanner-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:43:23.303Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:51:32.079Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:24:19.585Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:34:34.508Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-forced-colors.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:43:23.328Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-forced-colors.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:51:32.105Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:24:19.615Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-forced-colors.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:34:34.539Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-info.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:43:23.236Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-info.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:51:32.012Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-info.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:24:19.506Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-info.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:34:34.419Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-playground.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:43:23.263Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-playground.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:51:32.039Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-playground.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:24:19.538Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/AlertBanner/__a11y-evidence__/feedback-alertbanner-playground.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:34:34.456Z", "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/AlertBanner/__a11y-evidence__/feedback-alertbanner-info.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:51:32.012Z", "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": "2026-05-26 — tones and dismiss control reviewed in Storybook. 2026-07-03 (batch 4) — action slot + icon override added; dismiss strings moved to i18next (en/fi/sv, EN output unchanged). 2026-07-08 — promoted after Mermaid adopted AlertBanner for persistent diagram errors; check:beta-promotion-readiness verifies production consumers, snapshots, forced colors, and real Figma evidence.", "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/AlertBanner/AlertBanner.module.css", "../../../nextjs-app/shared/components/AlertBanner/AlertBanner.tsx" ] }