npm - @wcag-checkr/storybook-addon - Versions diffs - 1.0.0-rc.13 - Mend

@wcag-checkr/storybook-addon 1.0.0-rc.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,51 @@
+# @wcag-checkr/storybook-addon
+Multi-state accessibility audit for Storybook. Cycles each story through default, hover, focus, and dark-mode states, runs axe-core at each, and reports per-state findings in a Storybook panel.
+Companion to the [wcagcheckr Chrome extension](https://wcagcheckr.com) — the extension drives the FULL state matrix (forced-colors, RTL, real `:focus-visible`, multiple breakpoints) via the Chrome DevTools Protocol; this addon does what's possible from inside a Storybook preview iframe.
+## Install
+```bash
+npm install --save-dev @wcag-checkr/storybook-addon
+```
+Add to your `.storybook/main.ts`:
+```ts
+import type { StorybookConfig } from '@storybook/react-vite';
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@wcag-checkr/storybook-addon',
+  ],
+  framework: { name: '@storybook/react-vite', options: {} },
+};
+export default config;
+```
+## Use
+Open any story → click the **wcagcheckr** panel → click **Run multi-state audit**.
+Per-state findings appear under each state heading. Pass = no axe-core violations at that state; fail = one or more, with the rule, impact level, affected node count, and a link to the rule documentation.
+## How states are simulated
+| State | Mechanism | Reliability |
+|---|---|---|
+| `default` | No attribute on `<html>`. Ambient state. | High |
+| `hover` | `<html data-wc-state="hover">` — opt-in via your CSS | Medium |
+| `focus` | `<html data-wc-state="focus">` — opt-in via your CSS | Medium |
+| `dark` | `<html class="dark" data-theme="dark">` | High when your CSS targets either selector |
+If your CSS only uses `:hover` / `:focus` pseudo-class selectors (not class-based mirrors), the hover/focus states will run axe-core but the visible style won't change. That still catches non-pseudo-class violations (contrast at rest, ARIA, names/labels) — useful but limited.
+For the FULL multi-state matrix (forced-colors, RTL, real focus-visible, breakpoints, ARIA-state permutations), install the [wcagcheckr Chrome extension](https://wcagcheckr.com) — it drives the rendered component through every state via the Chrome DevTools Protocol, which a Storybook preview iframe cannot.
+## License
+UNLICENSED until commercial release. See `wcagcheckr.com/license`.

package/dist/manager.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ export { }

package/dist/manager.js ADDED Viewed

@@ -0,0 +1,180 @@
+// src/manager.tsx
+import { useEffect, useMemo, useState } from "react";
+import { addons, types, useChannel, useStorybookApi } from "@storybook/manager-api";
+import { AddonPanel, Badge, Button, Placeholder, Separator } from "@storybook/components";
+// src/constants.ts
+var ADDON_ID = "wcagcheckr/storybook-addon";
+var PANEL_ID = `${ADDON_ID}/panel`;
+var EVENTS = {
+  /** Manager → preview: run an audit cycle on the current story. */
+  RUN_AUDIT: `${ADDON_ID}/run-audit`,
+  /** Preview → manager: a single state finished auditing. */
+  STATE_RESULT: `${ADDON_ID}/state-result`,
+  /** Preview → manager: the whole cycle finished. */
+  AUDIT_COMPLETE: `${ADDON_ID}/audit-complete`,
+  /** Preview → manager: the cycle failed (e.g. axe-core threw). */
+  AUDIT_FAILED: `${ADDON_ID}/audit-failed`
+};
+var DEFAULT_STATES = ["default", "hover", "focus", "dark"];
+// src/manager.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var STORY_CHANGED = "storyChanged";
+var STORY_RENDERED = "storyRendered";
+var Panel = ({ active }) => {
+  const api = useStorybookApi();
+  const [running, setRunning] = useState(false);
+  const [results, setResults] = useState([]);
+  const [completedStoryId, setCompletedStoryId] = useState(null);
+  const [axeVersion, setAxeVersion] = useState(null);
+  const [error, setError] = useState(null);
+  function readStoryId() {
+    const fromCurrent = api.getCurrentStoryData?.()?.id ?? null;
+    if (fromCurrent) return fromCurrent;
+    const urlState = api.getUrlState?.();
+    return urlState?.storyId ?? null;
+  }
+  const [currentStoryId, setCurrentStoryId] = useState(() => readStoryId());
+  useEffect(() => {
+    const t = setInterval(() => {
+      const id = readStoryId();
+      if (id && id !== currentStoryId) {
+        setCurrentStoryId(id);
+        clearInterval(t);
+      }
+    }, 200);
+    const timeout = setTimeout(() => clearInterval(t), 5e3);
+    return () => {
+      clearInterval(t);
+      clearTimeout(timeout);
+    };
+  }, [api]);
+  useChannel({
+    [EVENTS.STATE_RESULT]: (r) => {
+      setResults((prev) => [...prev, r]);
+    },
+    [EVENTS.AUDIT_COMPLETE]: (payload) => {
+      setRunning(false);
+      setAxeVersion(payload.axeVersion);
+      setCompletedStoryId(payload.storyId);
+      setResults(payload.results);
+    },
+    [EVENTS.AUDIT_FAILED]: ({ error: msg }) => {
+      setRunning(false);
+      setError(msg);
+    },
+    [STORY_CHANGED]: (id) => setCurrentStoryId(id),
+    [STORY_RENDERED]: (id) => setCurrentStoryId(id)
+  });
+  useEffect(() => {
+    setResults([]);
+    setCompletedStoryId(null);
+    setAxeVersion(null);
+    setError(null);
+  }, [currentStoryId]);
+  function runAudit() {
+    if (!currentStoryId) return;
+    setRunning(true);
+    setResults([]);
+    setError(null);
+    setAxeVersion(null);
+    api.emit(EVENTS.RUN_AUDIT, {
+      storyId: currentStoryId,
+      states: DEFAULT_STATES
+    });
+  }
+  const totalViolations = useMemo(
+    () => results.reduce((sum, r) => sum + r.violations.length, 0),
+    [results]
+  );
+  const distinctRules = useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const r of results) for (const v of r.violations) ids.add(v.id);
+    return ids.size;
+  }, [results]);
+  return /* @__PURE__ */ jsx(AddonPanel, { active, children: /* @__PURE__ */ jsxs("div", { style: { padding: "12px 16px" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsx(Button, { onClick: runAudit, disabled: running || !currentStoryId, variant: "solid", children: running ? "Running\u2026" : "Run multi-state audit" }),
+      completedStoryId && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "#64748b" }, children: [
+        distinctRules,
+        " distinct rule",
+        distinctRules === 1 ? "" : "s",
+        " \xB7",
+        " ",
+        totalViolations,
+        " total finding",
+        totalViolations === 1 ? "" : "s",
+        axeVersion ? ` \xB7 axe ${axeVersion}` : ""
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsxs(Placeholder, { children: [
+      /* @__PURE__ */ jsx("strong", { children: "Audit failed" }),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 12 }, children: error })
+    ] }),
+    !completedStoryId && !running && !error && /* @__PURE__ */ jsxs(Placeholder, { children: [
+      /* @__PURE__ */ jsx("strong", { children: "Multi-state accessibility audit" }),
+      /* @__PURE__ */ jsx("span", { style: { maxWidth: 480 }, children: "Cycles the current story through default, hover, focus, and dark-mode states and runs axe-core at each. The companion wcagcheckr Chrome extension drives a wider state matrix (forced-colors, RTL, real :focus-visible, breakpoints) via the Chrome DevTools Protocol." })
+    ] }),
+    running && /* @__PURE__ */ jsxs(Placeholder, { children: [
+      /* @__PURE__ */ jsx("strong", { children: "Auditing\u2026" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Cycling through ",
+        DEFAULT_STATES.length,
+        " states."
+      ] })
+    ] }),
+    results.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: results.map((r) => /* @__PURE__ */ jsx(StateBlock, { result: r }, r.state)) })
+  ] }) });
+};
+var StateBlock = ({ result }) => {
+  const badgeType = result.violations.length === 0 ? "positive" : "negative";
+  return /* @__PURE__ */ jsxs("section", { style: { border: "1px solid #e2e8f0", borderRadius: 4, padding: "10px 12px" }, children: [
+    /* @__PURE__ */ jsxs("header", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, children: [
+      /* @__PURE__ */ jsx("strong", { style: { fontSize: 13, textTransform: "capitalize" }, children: result.state }),
+      /* @__PURE__ */ jsxs(Badge, { status: badgeType, children: [
+        result.violations.length,
+        " violation",
+        result.violations.length === 1 ? "" : "s"
+      ] }),
+      !result.ran && /* @__PURE__ */ jsxs(Badge, { status: "warning", children: [
+        "skipped: ",
+        result.error ?? "unknown"
+      ] })
+    ] }),
+    result.violations.length > 0 && /* @__PURE__ */ jsx("ul", { style: { margin: 0, paddingLeft: 18, fontSize: 12 }, children: result.violations.map((v, i) => /* @__PURE__ */ jsxs("li", { style: { marginBottom: 6 }, children: [
+      /* @__PURE__ */ jsx("code", { style: { fontFamily: "monospace" }, children: v.id }),
+      " ",
+      /* @__PURE__ */ jsxs("span", { style: { color: "#64748b" }, children: [
+        "(",
+        v.impact ?? "unknown",
+        ", ",
+        v.nodes.length,
+        " node",
+        v.nodes.length === 1 ? "" : "s",
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { marginTop: 2, color: "#334155" }, children: v.description }),
+      v.helpUrl && /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: v.helpUrl,
+          target: "_blank",
+          rel: "noreferrer",
+          style: { fontSize: 11, color: "#1e40af" },
+          children: "Reference \u2192"
+        }
+      )
+    ] }, `${v.id}-${i}`)) }),
+    /* @__PURE__ */ jsx(Separator, {})
+  ] });
+};
+addons.register(ADDON_ID, () => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: "wcagcheckr",
+    match: ({ viewMode }) => viewMode === "story",
+    render: ({ active }) => /* @__PURE__ */ jsx(Panel, { active: active ?? false })
+  });
+});
+//# sourceMappingURL=manager.js.map

package/dist/manager.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/manager.tsx","../src/constants.ts"],"sourcesContent":["// Manager-side bundle: lives in the top-level Storybook UI (the chrome\n// around the iframe). Registers a panel that shows the running audit's\n// per-state results and a \"Run audit\" button that emits RUN_AUDIT to the\n// preview-side bundle.\n\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { addons, types, useChannel, useStorybookApi } from '@storybook/manager-api';\n// STORY_CHANGED / STORY_RENDERED are core-event names — re-deriving current\n// story on these events makes the panel reactive to navigation, which\n// useStorybookApi() alone isn't.\nconst STORY_CHANGED = 'storyChanged';\nconst STORY_RENDERED = 'storyRendered';\nimport { AddonPanel, Badge, Button, Placeholder, Separator } from '@storybook/components';\nimport {\n ADDON_ID,\n PANEL_ID,\n EVENTS,\n DEFAULT_STATES,\n type AuditCompletePayload,\n type AuditStateName,\n type StateResult,\n} from './constants';\n\nconst Panel: React.FC<{ active: boolean }> = ({ active }) => {\n const api = useStorybookApi();\n const [running, setRunning] = useState(false);\n const [results, setResults] = useState<StateResult[]>([]);\n const [completedStoryId, setCompletedStoryId] = useState<string | null>(null);\n const [axeVersion, setAxeVersion] = useState<string | null>(null);\n const [error, setError] = useState<string | null>(null);\n // useStorybookApi() returns the API singleton, but reading\n // api.getCurrentStoryData() during render is NOT reactive — the panel\n // would freeze at \"no story\" if it mounted before the story-change event.\n // Track the current story id as state and update on STORY_CHANGED /\n // STORY_RENDERED so the panel re-renders when navigation happens.\n function readStoryId(): string | null {\n // Several APIs may have the story id depending on Storybook version and\n // panel-mount timing. Try them in order of reliability:\n // 1. api.getCurrentStoryData() — present after STORY_RENDERED\n // 2. api.getUrlState().storyId — derived from the URL, present\n // immediately on page load even before the preview rendered\n const fromCurrent = api.getCurrentStoryData?.()?.id ?? null;\n if (fromCurrent) return fromCurrent;\n const urlState = api.getUrlState?.();\n return urlState?.storyId ?? null;\n }\n\n const [currentStoryId, setCurrentStoryId] = useState<string | null>(() => readStoryId());\n\n // Poll briefly on mount so the panel picks up the active story even when\n // STORY_RENDERED already fired before the panel mounted (common when the\n // panel tab is opened after the story already loaded).\n useEffect(() => {\n const t = setInterval(() => {\n const id = readStoryId();\n if (id && id !== currentStoryId) {\n setCurrentStoryId(id);\n clearInterval(t);\n }\n }, 200);\n // Stop polling after 5 s regardless.\n const timeout = setTimeout(() => clearInterval(t), 5000);\n return () => {\n clearInterval(t);\n clearTimeout(timeout);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [api]);\n\n useChannel({\n [EVENTS.STATE_RESULT]: (r: StateResult) => {\n setResults((prev) => [...prev, r]);\n },\n [EVENTS.AUDIT_COMPLETE]: (payload: AuditCompletePayload) => {\n setRunning(false);\n setAxeVersion(payload.axeVersion);\n setCompletedStoryId(payload.storyId);\n setResults(payload.results);\n },\n [EVENTS.AUDIT_FAILED]: ({ error: msg }: { error: string }) => {\n setRunning(false);\n setError(msg);\n },\n [STORY_CHANGED]: (id: string) => setCurrentStoryId(id),\n [STORY_RENDERED]: (id: string) => setCurrentStoryId(id),\n });\n\n // Reset state when navigating between stories.\n useEffect(() => {\n setResults([]);\n setCompletedStoryId(null);\n setAxeVersion(null);\n setError(null);\n }, [currentStoryId]);\n\n function runAudit() {\n if (!currentStoryId) return;\n setRunning(true);\n setResults([]);\n setError(null);\n setAxeVersion(null);\n // api.emit routes events across the manager/preview boundary correctly\n // (sets the right `from` field). The bare addons.getChannel().emit\n // from manager fails to cross the boundary and the preview rejects it.\n api.emit(EVENTS.RUN_AUDIT, {\n storyId: currentStoryId,\n states: DEFAULT_STATES,\n });\n }\n\n const totalViolations = useMemo(\n () => results.reduce((sum, r) => sum + r.violations.length, 0),\n [results],\n );\n const distinctRules = useMemo(() => {\n const ids = new Set<string>();\n for (const r of results) for (const v of r.violations) ids.add(v.id);\n return ids.size;\n }, [results]);\n\n return (\n <AddonPanel active={active}>\n <div style={{ padding: '12px 16px' }}>\n <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>\n <Button onClick={runAudit} disabled={running || !currentStoryId} variant=\"solid\">\n {running ? 'Running…' : 'Run multi-state audit'}\n </Button>\n {completedStoryId && (\n <span style={{ fontSize: 12, color: '#64748b' }}>\n {distinctRules} distinct rule{distinctRules === 1 ? '' : 's'} ·{' '}\n {totalViolations} total finding{totalViolations === 1 ? '' : 's'}\n {axeVersion ? ` · axe ${axeVersion}` : ''}\n </span>\n )}\n </div>\n\n {error && (\n <Placeholder>\n <strong>Audit failed</strong>\n <span style={{ fontSize: 12 }}>{error}</span>\n </Placeholder>\n )}\n\n {!completedStoryId && !running && !error && (\n <Placeholder>\n <strong>Multi-state accessibility audit</strong>\n <span style={{ maxWidth: 480 }}>\n Cycles the current story through default, hover, focus, and dark-mode\n states and runs axe-core at each. The companion wcagcheckr Chrome\n extension drives a wider state matrix (forced-colors, RTL, real\n :focus-visible, breakpoints) via the Chrome DevTools Protocol.\n </span>\n </Placeholder>\n )}\n\n {running && (\n <Placeholder>\n <strong>Auditing…</strong>\n <span>Cycling through {DEFAULT_STATES.length} states.</span>\n </Placeholder>\n )}\n\n {results.length > 0 && (\n <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>\n {results.map((r) => (\n <StateBlock key={r.state} result={r} />\n ))}\n </div>\n )}\n </div>\n </AddonPanel>\n );\n};\n\nconst StateBlock: React.FC<{ result: StateResult }> = ({ result }) => {\n const badgeType = result.violations.length === 0 ? 'positive' : 'negative';\n return (\n <section style={{ border: '1px solid #e2e8f0', borderRadius: 4, padding: '10px 12px' }}>\n <header style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>\n <strong style={{ fontSize: 13, textTransform: 'capitalize' }}>{result.state}</strong>\n <Badge status={badgeType}>\n {result.violations.length} violation{result.violations.length === 1 ? '' : 's'}\n </Badge>\n {!result.ran && (\n <Badge status=\"warning\">skipped: {result.error ?? 'unknown'}</Badge>\n )}\n </header>\n {result.violations.length > 0 && (\n <ul style={{ margin: 0, paddingLeft: 18, fontSize: 12 }}>\n {result.violations.map((v, i) => (\n <li key={`${v.id}-${i}`} style={{ marginBottom: 6 }}>\n <code style={{ fontFamily: 'monospace' }}>{v.id}</code>{' '}\n <span style={{ color: '#64748b' }}>\n ({v.impact ?? 'unknown'}, {v.nodes.length} node{v.nodes.length === 1 ? '' : 's'})\n </span>\n <div style={{ marginTop: 2, color: '#334155' }}>{v.description}</div>\n {v.helpUrl && (\n <a\n href={v.helpUrl}\n target=\"_blank\"\n rel=\"noreferrer\"\n style={{ fontSize: 11, color: '#1e40af' }}\n >\n Reference →\n </a>\n )}\n </li>\n ))}\n </ul>\n )}\n <Separator />\n </section>\n );\n};\n\naddons.register(ADDON_ID, () => {\n addons.add(PANEL_ID, {\n type: types.PANEL,\n title: 'wcagcheckr',\n match: ({ viewMode }) => viewMode === 'story',\n render: ({ active }) => <Panel active={active ?? false} />,\n });\n});\n","// Identifiers shared between the manager (top-level Storybook UI) and the\n// preview (the story iframe). Keep these stable — they're the message\n// channel between the two contexts.\n\nexport const ADDON_ID = 'wcagcheckr/storybook-addon';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const PARAM_KEY = 'wcagcheckr';\n\nexport const EVENTS = {\n /** Manager → preview: run an audit cycle on the current story. */\n RUN_AUDIT: `${ADDON_ID}/run-audit`,\n /** Preview → manager: a single state finished auditing. */\n STATE_RESULT: `${ADDON_ID}/state-result`,\n /** Preview → manager: the whole cycle finished. */\n AUDIT_COMPLETE: `${ADDON_ID}/audit-complete`,\n /** Preview → manager: the cycle failed (e.g. axe-core threw). */\n AUDIT_FAILED: `${ADDON_ID}/audit-failed`,\n} as const;\n\nexport type AuditStateName = 'default' | 'hover' | 'focus' | 'active' | 'dark';\n\nexport const DEFAULT_STATES: AuditStateName[] = ['default', 'hover', 'focus', 'dark'];\n\nexport type StateResult = {\n state: AuditStateName;\n violations: Array<{\n id: string;\n impact: 'minor' | 'moderate' | 'serious' | 'critical' | null;\n description: string;\n helpUrl: string;\n nodes: Array<{ target: string[]; html: string; failureSummary?: string }>;\n }>;\n ran: boolean;\n error?: string;\n};\n\nexport type AuditCompletePayload = {\n storyId: string;\n axeVersion: string;\n results: StateResult[];\n};\n"],"mappings":"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","names":[]}

package/dist/preview.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+declare const ADDON_ID = "wcagcheckr/storybook-addon";
+declare const PARAM_KEY = "wcagcheckr";
+declare const EVENTS: {
+    /** Manager → preview: run an audit cycle on the current story. */
+    readonly RUN_AUDIT: "wcagcheckr/storybook-addon/run-audit";
+    /** Preview → manager: a single state finished auditing. */
+    readonly STATE_RESULT: "wcagcheckr/storybook-addon/state-result";
+    /** Preview → manager: the whole cycle finished. */
+    readonly AUDIT_COMPLETE: "wcagcheckr/storybook-addon/audit-complete";
+    /** Preview → manager: the cycle failed (e.g. axe-core threw). */
+    readonly AUDIT_FAILED: "wcagcheckr/storybook-addon/audit-failed";
+};
+type AuditStateName = 'default' | 'hover' | 'focus' | 'active' | 'dark';
+declare const DEFAULT_STATES: AuditStateName[];
+export { ADDON_ID, DEFAULT_STATES, EVENTS, PARAM_KEY };

package/dist/preview.js ADDED Viewed

@@ -0,0 +1,144 @@
+// src/preview.ts
+import { addons } from "@storybook/preview-api";
+// src/constants.ts
+var ADDON_ID = "wcagcheckr/storybook-addon";
+var PANEL_ID = `${ADDON_ID}/panel`;
+var PARAM_KEY = "wcagcheckr";
+var EVENTS = {
+  /** Manager → preview: run an audit cycle on the current story. */
+  RUN_AUDIT: `${ADDON_ID}/run-audit`,
+  /** Preview → manager: a single state finished auditing. */
+  STATE_RESULT: `${ADDON_ID}/state-result`,
+  /** Preview → manager: the whole cycle finished. */
+  AUDIT_COMPLETE: `${ADDON_ID}/audit-complete`,
+  /** Preview → manager: the cycle failed (e.g. axe-core threw). */
+  AUDIT_FAILED: `${ADDON_ID}/audit-failed`
+};
+var DEFAULT_STATES = ["default", "hover", "focus", "dark"];
+// src/preview.ts
+var axePromise = null;
+function loadAxe() {
+  if (!axePromise) {
+    axePromise = import("axe-core").then((m) => {
+      const mod = m;
+      const candidate = "default" in mod && mod.default ? mod.default : mod;
+      return candidate;
+    });
+  }
+  return axePromise;
+}
+function getStoryRoot() {
+  return document.getElementById("storybook-root") ?? document.body;
+}
+var STATE_HELPER_STYLE_ID = `${ADDON_ID}--state-helper`;
+var STATE_HELPER_CSS = `
+  /* wcagcheckr state helper \u2014 opt-in styles for sites that want their hover/
+     focus/active styles to apply during the multi-state audit. Sites that
+     use class-based state mirrors (e.g. .is-hover, .is-focus) can wire those
+     to the attribute selectors below; sites that rely purely on :hover /
+     :focus selectors will only see the audit run, not the styling. */
+  [data-wc-state="hover"]  *:not(:disabled) { /* hint: apply hover styles via .is-hover */ }
+  [data-wc-state="focus"]  *:not(:disabled) { /* hint: apply focus styles via .is-focus */ }
+  [data-wc-state="active"] *:not(:disabled) { /* hint: apply active styles via .is-active */ }
+`;
+function ensureStateHelperCss() {
+  if (document.getElementById(STATE_HELPER_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STATE_HELPER_STYLE_ID;
+  style.textContent = STATE_HELPER_CSS;
+  document.head.appendChild(style);
+}
+function applyState(state) {
+  const root = document.documentElement;
+  ensureStateHelperCss();
+  if (state === "dark") {
+    root.setAttribute("data-theme", "dark");
+    root.classList.add("dark");
+    root.removeAttribute("data-wc-state");
+  } else if (state === "default") {
+    root.removeAttribute("data-theme");
+    root.classList.remove("dark");
+    root.removeAttribute("data-wc-state");
+  } else {
+    root.removeAttribute("data-theme");
+    root.classList.remove("dark");
+    root.setAttribute("data-wc-state", state);
+  }
+}
+function clearState() {
+  const root = document.documentElement;
+  root.removeAttribute("data-theme");
+  root.classList.remove("dark");
+  root.removeAttribute("data-wc-state");
+}
+async function runAuditCycle(storyId, states) {
+  const channel2 = addons.getChannel();
+  let axe;
+  try {
+    axe = await loadAxe();
+  } catch (err) {
+    channel2.emit(EVENTS.AUDIT_FAILED, {
+      storyId,
+      error: err instanceof Error ? err.message : String(err)
+    });
+    return;
+  }
+  const results = [];
+  const root = getStoryRoot();
+  for (const state of states) {
+    applyState(state);
+    await new Promise((r) => setTimeout(r, 50));
+    try {
+      const axeResult = await axe.run(root, {
+        resultTypes: ["violations"]
+      });
+      const stateResult = {
+        state,
+        ran: true,
+        violations: axeResult.violations.map((v) => ({
+          id: v.id,
+          impact: v.impact,
+          description: v.description,
+          helpUrl: v.helpUrl,
+          nodes: v.nodes.map((n) => ({
+            target: n.target.flat(),
+            html: n.html,
+            failureSummary: n.failureSummary
+          }))
+        }))
+      };
+      results.push(stateResult);
+      channel2.emit(EVENTS.STATE_RESULT, stateResult);
+    } catch (err) {
+      const failure = {
+        state,
+        ran: false,
+        violations: [],
+        error: err instanceof Error ? err.message : String(err)
+      };
+      results.push(failure);
+      channel2.emit(EVENTS.STATE_RESULT, failure);
+    }
+  }
+  clearState();
+  const complete = {
+    storyId,
+    axeVersion: axe.version,
+    results
+  };
+  channel2.emit(EVENTS.AUDIT_COMPLETE, complete);
+}
+var channel = addons.getChannel();
+channel.on(EVENTS.RUN_AUDIT, (payload) => {
+  const states = payload.states ?? DEFAULT_STATES;
+  void runAuditCycle(payload.storyId, states);
+});
+export {
+  ADDON_ID,
+  DEFAULT_STATES,
+  EVENTS,
+  PARAM_KEY
+};
+//# sourceMappingURL=preview.js.map

package/dist/preview.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/preview.ts","../src/constants.ts"],"sourcesContent":["// Preview-side bundle: runs inside the story iframe. Listens for RUN_AUDIT\n// from the manager, cycles the story's root through the requested states by\n// injecting/removing a class on the documentElement that scoped CSS picks\n// up, runs axe-core at each state, and emits results.\n//\n// State simulation strategy:\n//\n// - `default`: no class, ambient state.\n// - `hover` / `focus` / `active`: inject CSS that targets the story body\n// and forces a state-like style by adding a class chain. Real `:hover`\n// and `:focus` selectors only fire on actual cursor/focus events, which\n// we can't synthesize headlessly from a Storybook preview. So we use a\n// class-substitution approach: each state appends a `data-wc-state`\n// attribute that the audit harness CSS maps to a forced-style rule.\n// Sites that don't opt into the helper CSS will see no visible state\n// change, but axe-core will still run — surfacing rules that don't\n// depend on pseudo-state (color contrast at REST, ARIA, names/labels)\n// in EVERY state-iteration, which is still useful for catching base\n// issues across themes.\n// - `dark`: toggles `[data-theme=\"dark\"]` and `prefers-color-scheme:dark`\n// emulation via a class on documentElement.\n//\n// This is intentionally a lighter-weight version of the wcagcheckr Chrome\n// extension's chrome.debugger-driven state matrix. The extension can drive\n// REAL :hover / :focus / :focus-visible / :active via the DevTools Protocol;\n// a Storybook addon cannot. The addon's value-add: catches the rest (theme,\n// RTL, contrast at multiple breakpoints) without requiring the extension.\n\nimport { addons } from '@storybook/preview-api';\nimport {\n ADDON_ID,\n DEFAULT_STATES,\n EVENTS,\n type AuditCompletePayload,\n type AuditStateName,\n type StateResult,\n} from './constants';\n\ntype AxeResult = {\n violations: Array<{\n id: string;\n impact: 'minor' | 'moderate' | 'serious' | 'critical' | null;\n description: string;\n helpUrl: string;\n nodes: Array<{ target: unknown[]; html: string; failureSummary?: string }>;\n }>;\n};\ntype AxeApi = {\n run: (context: Node | Element, options?: Record<string, unknown>) => Promise<AxeResult>;\n version: string;\n};\n\nlet axePromise: Promise<AxeApi> | null = null;\nfunction loadAxe(): Promise<AxeApi> {\n if (!axePromise) {\n axePromise = import('axe-core').then((m) => {\n // axe-core ships as both CJS and ESM. Depending on the bundler the\n // module shape can be either `{ default: axe, run, ... }` or just the\n // namespace with run() at the top level. Normalize.\n const mod = m as unknown as Record<string, unknown>;\n const candidate =\n 'default' in mod && mod.default ? (mod.default as AxeApi) : (mod as unknown as AxeApi);\n return candidate;\n });\n }\n return axePromise;\n}\n\nfunction getStoryRoot(): HTMLElement {\n return (document.getElementById('storybook-root') ?? document.body) as HTMLElement;\n}\n\nconst STATE_HELPER_STYLE_ID = `${ADDON_ID}--state-helper`;\nconst STATE_HELPER_CSS = `\n /* wcagcheckr state helper — opt-in styles for sites that want their hover/\n focus/active styles to apply during the multi-state audit. Sites that\n use class-based state mirrors (e.g. .is-hover, .is-focus) can wire those\n to the attribute selectors below; sites that rely purely on :hover /\n :focus selectors will only see the audit run, not the styling. */\n [data-wc-state=\"hover\"] *:not(:disabled) { /* hint: apply hover styles via .is-hover */ }\n [data-wc-state=\"focus\"] *:not(:disabled) { /* hint: apply focus styles via .is-focus */ }\n [data-wc-state=\"active\"] *:not(:disabled) { /* hint: apply active styles via .is-active */ }\n`;\n\nfunction ensureStateHelperCss() {\n if (document.getElementById(STATE_HELPER_STYLE_ID)) return;\n const style = document.createElement('style');\n style.id = STATE_HELPER_STYLE_ID;\n style.textContent = STATE_HELPER_CSS;\n document.head.appendChild(style);\n}\n\nfunction applyState(state: AuditStateName) {\n const root = document.documentElement;\n ensureStateHelperCss();\n if (state === 'dark') {\n root.setAttribute('data-theme', 'dark');\n root.classList.add('dark');\n root.removeAttribute('data-wc-state');\n } else if (state === 'default') {\n root.removeAttribute('data-theme');\n root.classList.remove('dark');\n root.removeAttribute('data-wc-state');\n } else {\n root.removeAttribute('data-theme');\n root.classList.remove('dark');\n root.setAttribute('data-wc-state', state);\n }\n}\n\nfunction clearState() {\n const root = document.documentElement;\n root.removeAttribute('data-theme');\n root.classList.remove('dark');\n root.removeAttribute('data-wc-state');\n}\n\nasync function runAuditCycle(storyId: string, states: AuditStateName[]): Promise<void> {\n const channel = addons.getChannel();\n let axe: AxeApi;\n try {\n axe = await loadAxe();\n } catch (err) {\n channel.emit(EVENTS.AUDIT_FAILED, {\n storyId,\n error: err instanceof Error ? err.message : String(err),\n });\n return;\n }\n\n const results: StateResult[] = [];\n const root = getStoryRoot();\n\n for (const state of states) {\n applyState(state);\n // Allow a tick for the DOM to settle (style recalculation).\n await new Promise((r) => setTimeout(r, 50));\n try {\n const axeResult: AxeResult = await axe.run(root, {\n resultTypes: ['violations'],\n });\n const stateResult: StateResult = {\n state,\n ran: true,\n violations: axeResult.violations.map((v) => ({\n id: v.id,\n impact: v.impact,\n description: v.description,\n helpUrl: v.helpUrl,\n nodes: v.nodes.map((n) => ({\n target: (n.target as unknown[]).flat() as string[],\n html: n.html,\n failureSummary: n.failureSummary,\n })),\n })),\n };\n results.push(stateResult);\n channel.emit(EVENTS.STATE_RESULT, stateResult);\n } catch (err) {\n const failure: StateResult = {\n state,\n ran: false,\n violations: [],\n error: err instanceof Error ? err.message : String(err),\n };\n results.push(failure);\n channel.emit(EVENTS.STATE_RESULT, failure);\n }\n }\n\n clearState();\n const complete: AuditCompletePayload = {\n storyId,\n axeVersion: axe.version,\n results,\n };\n channel.emit(EVENTS.AUDIT_COMPLETE, complete);\n}\n\n// Hook the channel once per preview iframe load.\nconst channel = addons.getChannel();\nchannel.on(EVENTS.RUN_AUDIT, (payload: { storyId: string; states?: AuditStateName[] }) => {\n const states = payload.states ?? DEFAULT_STATES;\n void runAuditCycle(payload.storyId, states);\n});\n\n// No default export required — the file is loaded by Storybook via the\n// \"preview\" entry in the addon's package.json exports. Re-export the\n// constants so consumers can import the parameter key + event names for\n// custom decorators / story-level overrides if they need them.\nexport { ADDON_ID, EVENTS, DEFAULT_STATES, PARAM_KEY } from './constants';\n","// Identifiers shared between the manager (top-level Storybook UI) and the\n// preview (the story iframe). Keep these stable — they're the message\n// channel between the two contexts.\n\nexport const ADDON_ID = 'wcagcheckr/storybook-addon';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const PARAM_KEY = 'wcagcheckr';\n\nexport const EVENTS = {\n /** Manager → preview: run an audit cycle on the current story. */\n RUN_AUDIT: `${ADDON_ID}/run-audit`,\n /** Preview → manager: a single state finished auditing. */\n STATE_RESULT: `${ADDON_ID}/state-result`,\n /** Preview → manager: the whole cycle finished. */\n AUDIT_COMPLETE: `${ADDON_ID}/audit-complete`,\n /** Preview → manager: the cycle failed (e.g. axe-core threw). */\n AUDIT_FAILED: `${ADDON_ID}/audit-failed`,\n} as const;\n\nexport type AuditStateName = 'default' | 'hover' | 'focus' | 'active' | 'dark';\n\nexport const DEFAULT_STATES: AuditStateName[] = ['default', 'hover', 'focus', 'dark'];\n\nexport type StateResult = {\n state: AuditStateName;\n violations: Array<{\n id: string;\n impact: 'minor' | 'moderate' | 'serious' | 'critical' | null;\n description: string;\n helpUrl: string;\n nodes: Array<{ target: string[]; html: string; failureSummary?: string }>;\n }>;\n ran: boolean;\n error?: string;\n};\n\nexport type AuditCompletePayload = {\n storyId: string;\n axeVersion: string;\n results: StateResult[];\n};\n"],"mappings":"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","names":["channel"]}

package/package.json ADDED Viewed

@@ -0,0 +1,73 @@
+{
+  "name": "@wcag-checkr/storybook-addon",
+  "version": "1.0.0-rc.13",
+  "description": "Multi-state accessibility audit for Storybook. Cycles each story through default, hover, focus, and dark-mode states, runs axe-core at each, and surfaces per-state findings in a Storybook panel. Companion to the wcagcheckr Chrome extension.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "./dist/preview.js",
+  "module": "./dist/preview.js",
+  "types": "./dist/preview.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/preview.d.ts",
+      "import": "./dist/preview.js"
+    },
+    "./manager": "./dist/manager.js",
+    "./preview": "./dist/preview.js",
+    "./register.js": "./dist/manager.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/**",
+    "preset.js",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "storybook": "^8.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "axe-core": "^4.10.0"
+  },
+  "devDependencies": {
+    "@storybook/manager-api": "^8.6.0",
+    "@storybook/preview-api": "^8.6.0",
+    "@storybook/components": "^8.6.0",
+    "@storybook/theming": "^8.6.0",
+    "@storybook/icons": "^1.4.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0"
+  },
+  "storybook": {
+    "displayName": "wcagcheckr — multi-state a11y",
+    "supportedFrameworks": [
+      "react",
+      "vue",
+      "angular",
+      "html",
+      "svelte",
+      "web-components"
+    ],
+    "icon": "https://wcagcheckr.com/icon.svg"
+  },
+  "homepage": "https://wcagcheckr.com",
+  "keywords": [
+    "storybook",
+    "storybook-addons",
+    "addon",
+    "a11y",
+    "accessibility",
+    "wcag",
+    "axe-core",
+    "multi-state",
+    "audit"
+  ]
+}

package/preset.js ADDED Viewed

@@ -0,0 +1,17 @@
+// Storybook addon preset (ESM — package is `type: module`). Tells
+// Storybook where to find the preview-side entry so the channel listener
+// for RUN_AUDIT registers inside the story iframe. The manager-side entry
+// is auto-discovered via package.json `exports['./manager']`.
+//
+// Without this preset, `addons: ['@wcag-checkr/storybook-addon']` in
+// main.ts loads only the manager bundle and the preview entry never runs.
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+const here = dirname(fileURLToPath(import.meta.url));
+export const previewAnnotations = (entry = []) => [
+  ...entry,
+  join(here, 'dist/preview.js'),
+];