{ "$schema": "https://www.digitaltableteur.com/schemas/contract-spec/1.0/contract.schema.json", "specVersion": "1.0", "name": "BlogMediaImage", "status": "stable", "description": "Blog-optimized responsive image: renders raster sources through next/image and SVG sources as a plain img, with a fill mode (cover/contain fit) and a fluid full-bleed mode for raster images.", "props": { "src": { "type": "string", "optional": false }, "alt": { "type": "string", "optional": false }, "fill": { "type": "boolean", "optional": true }, "width": { "type": "number", "optional": true, "description": "Intrinsic width. Raster images without fill fall back to 800 when omitted; SVG sources pass it through as the width attribute." }, "height": { "type": "number", "optional": true, "description": "Intrinsic height. Raster images without fill fall back to 400 when omitted; SVG sources pass it through as the height attribute." }, "className": { "type": "string", "optional": true }, "priority": { "type": "boolean", "optional": true }, "sizes": { "type": "string", "optional": true }, "onLoad": { "type": "() => void", "optional": true }, "onError": { "type": "() => void", "optional": true }, "fit": { "type": "union", "values": [ "cover", "contain" ], "optional": true, "description": "Object fit in fill mode only: contain for diagram heroes, cover (the\ndefault) for photos. Ignored when fill is not set." }, "fluid": { "type": "boolean", "optional": true, "description": "Raster images without fill only: when true the image spans its container\n(no max-width cap from the width prop). SVG sources and fill mode ignore\nit." } }, "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/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-default.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:37:58.432Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-default.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:19:57.887Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-default.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:27:26.508Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:37:58.700Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:19:58.167Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:27:26.886Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-forced-colors.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:37:58.969Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:19:58.446Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-forced-colors.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:27:27.301Z", "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/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-default.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:37:58.432Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-default.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:47:19.492Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-default.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:19:57.887Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-default.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:27:26.508Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:37:58.700Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:47:19.808Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:19:58.167Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:27:26.886Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-forced-colors.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:37:58.969Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-forced-colors.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:47:20.087Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:19:58.446Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-forced-colors.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:27:27.301Z", "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/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-default.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:47:19.492Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:47:19.808Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/BlogMediaImage/__a11y-evidence__/site-blogmediaimage-forced-colors.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:47:20.087Z", "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-06 alpha->beta: axe clean via test-storybook a11y test:error across base + light + dark + forced-colors on all stories (inline, fluid, fill+contain); 4-mode AT snapshots captured and compare-clean. Alt text is a required prop; SVG sources render as a plain img with lazy loading, raster through next/image. No own animation. 2026-07-08 — beta→stable: 4-mode AT (base/light/dark/forced-colors) verified on a non-6010 Storybook; accessibility tree and real-browser forced-colors confirmed.", "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/BlogMediaImage/BlogMediaImage.tsx" ] }