{ "$schema": "https://www.digitaltableteur.com/schemas/contract-spec/1.0/contract.schema.json", "specVersion": "1.0", "name": "SocialShare", "status": "stable", "description": "Row of social share targets: per-network share deep links plus a native-share or copy-link button, with an optional labelled article-footer variant. The opt-in instagram channel is not a share target: it links to the Digitaltableteur Instagram profile and is named \"Instagram profile\" (contactInstagramLabel).", "props": { "url": { "type": "string", "optional": false, "description": "Page URL passed to the share links and the native share sheet, and copied by the copy-link button." }, "title": { "type": "string", "optional": false, "description": "Share text for the networks that accept one (twitter, reddit, whatsapp) and the native share sheet." }, "channels": { "type": "SocialShareChannel[]", "optional": true, "description": "Ordered list of network share targets. Defaults to linkedin, twitter, facebook, reddit and whatsapp; instagram is opt-in because it links to the Digitaltableteur profile instead of sharing the page." }, "variant": { "type": "union", "values": [ "article", "inline" ], "optional": true, "description": "`article` adds a labelled section suited to blog post footers." }, "showHeading": { "type": "boolean", "optional": true, "description": "Shows the heading text above the row in the inline variant; defaults to false. The article variant always shows it." }, "heading": { "type": "string", "optional": true, "description": "Section label and visible heading text; an empty or missing value falls back to the translated shareHeading." } }, "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/SocialShare/__a11y-evidence__/site-socialshare-default.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:30.080Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-default.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:21.026Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-default.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:31:34.748Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:30.732Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:21.783Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:31:35.419Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-forced-colors.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:31.094Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:22.141Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-forced-colors.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:31:35.752Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-playground.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:30.396Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-playground.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:21.410Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-playground.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:31:35.062Z", "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/SocialShare/__a11y-evidence__/site-socialshare-default.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:30.080Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-default.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:11.532Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-default.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:21.026Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-default.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:31:34.748Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:30.732Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:12.220Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:21.783Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:31:35.419Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-forced-colors.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:31.094Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-forced-colors.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:12.589Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:22.141Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-forced-colors.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:31:35.752Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-playground.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:41:30.396Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-playground.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:11.847Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-playground.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:21:21.410Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-playground.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:31:35.062Z", "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/SocialShare/__a11y-evidence__/site-socialshare-default.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:11.532Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:12.220Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-forced-colors.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:12.589Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/SocialShare/__a11y-evidence__/site-socialshare-playground.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:49:11.847Z", "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-07-05 — beta→stable (fleet #17): renders a real
(contract element corrected div→section). Root-caused + fixed a PRE-EXISTING BlogPost story failure: the section label used `heading ?? t('shareHeading')`, and the controls-autogen args-enhancer seeds `heading=''` for the free-string prop, so `??` passed the empty string through and dropped the section's accessible name (and the region role). Switched to `||` at the use site (the #852 seeded-'' leak class). Also added a prefers-reduced-motion guard to the .channelLink colour transition and removed a stale hardcoded '11/11' compliance story. Re-verified: axe + plays green in light/dark/forced-colors (incl. BlogPost), 100% controls operable / 0 inert, AT snapshots captured 4 modes. 2026-05-28 origin: promoted from alpha with Example + ForcedColors stories and the Storybook axe gate.", "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/SocialShare/SocialShare.module.css", "../../../nextjs-app/shared/components/SocialShare/SocialShare.tsx" ] }