@accesslint/storybook-addon 0.6.7 → 0.6.9

package/README.md

@@ -14,31 +14,65 @@ Catch accessibility violations in your Storybook stories as you develop. Powered
 npm install @accesslint/storybook-addon
 ```
 
-Then add it to your `.storybook/main.ts` (or `.storybook/main.js`):
+Add the addon to your `.storybook/main.ts` (or `.storybook/main.js`):
 
 ```ts
 const config = {
-  addons: ["@accesslint/storybook-addon"],
+  addons: ["@storybook/addon-vitest", "@accesslint/storybook-addon"],
 };
 
 export default config;
 ```
 
-That's it. Restart Storybook and an **AccessLint** panel will appear in the addon bar.
+Add the vitest plugin to your `vite.config.ts`:
+
+```ts
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+import { accesslintTest } from "@accesslint/storybook-addon/vitest-plugin";
+
+export default defineConfig({
+  plugins: [
+    storybookTest({ configDir: ".storybook" }),
+    accesslintTest(),
+  ],
+});
+```
+
+Restart Storybook and an **AccessLint** panel will appear in the addon bar.
 
 ## Usage
 
-The addon automatically audits each story on render and displays violations sorted by severity. Expand any violation to see:
+The addon audits each story after it renders and displays violations sorted by severity. Expand any violation to see:
 
 - **Impact level** — critical, serious, moderate, or minor
 - **WCAG criteria** and conformance level (A, AA, AAA)
 - **How to fix** guidance for each rule
 - **Element HTML** snippet of the failing element
 
-Selecting a violation highlights the affected element in the story preview.
-
 ## Configuration
 
+### Parameters
+
+Control AccessLint behavior per-story or globally via `parameters.accesslint`:
+
+```ts
+// .storybook/preview.ts
+const preview = {
+  parameters: {
+    accesslint: {
+      // 'todo' - show violations as warnings in the test UI
+      // 'error' - fail CI on violations
+      // 'off' - skip checks entirely
+      test: "todo",
+    },
+  },
+};
+
+export default preview;
+```
+
+### Disabling rules
+
 Disable specific rules in your preview file:
 
 ```ts

package/dist/manager.js

@@ -1,14 +1,14 @@
-import React, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
-import { addons, types, useAddonState, useChannel, useStorybookApi } from 'storybook/internal/manager-api';
-import { ActionList, AddonPanel, Form } from 'storybook/internal/components';
+import React, { useMemo, useState, useRef, useCallback } from 'react';
+import { addons, types, useChannel, useStorybookApi } from 'storybook/internal/manager-api';
+import { ActionList, Form } from 'storybook/internal/components';
 import { styled, useTheme } from 'storybook/internal/theming';
+import { STORY_CHANGED, STORY_FINISHED } from 'storybook/internal/core-events';
 
 // src/manager.tsx
 
 // src/constants.ts
 var ADDON_ID = "accesslint/a11y";
-var PANEL_ID = `${ADDON_ID}/panel`;
-var TEST_PROVIDER_ID = `${ADDON_ID}/test-provider`;
+var PARAM_KEY = "accesslint";
 var IMPACT_COLOR = {
   critical: "#d32f2f",
   serious: "#d32f2f",
@@ -32,8 +32,7 @@ var LEVEL_COLOR = {
   AA: "#1565c0",
   AAA: "#6a1b9a"
 };
-var HIGHLIGHT_ID = `${ADDON_ID}/highlight`;
-var Panel = ({ active, ...rest }) => {
+var Panel = ({ active }) => {
   const theme = useTheme();
   const isDark = theme.base === "dark";
   const colors = useMemo(() => ({
@@ -49,41 +48,29 @@ var Panel = ({ active, ...rest }) => {
     tagText: isDark ? "#ccc" : "#616161",
     ruleId: isDark ? "#64b5f6" : "#1565c0"
   }), [isDark, theme]);
-  const [violations, setViolations] = useAddonState(
-    ADDON_ID,
-    []
-  );
-  const [meta, setMeta] = useState(null);
+  const [violations, setViolations] = useState([]);
+  const [ruleCount, setRuleCount] = useState(0);
   const [expandedIndex, setExpandedIndex] = useState(null);
   const buttonRefs = useRef([]);
-  const emit = useChannel({
-    [`${ADDON_ID}/results`]: (results) => {
-      setViolations(results);
+  useChannel({
+    [STORY_FINISHED]: ({ reporters }) => {
+      const report = reporters.find((r) => r.type === "accesslint");
+      if (!report) return;
+      const result = report.result;
+      setViolations(result.violations ?? []);
+      setRuleCount(result.ruleCount ?? 0);
       setExpandedIndex(null);
     },
-    [`${ADDON_ID}/meta`]: (data) => {
-      setMeta(data);
+    [STORY_CHANGED]: () => {
+      setViolations([]);
+      setRuleCount(0);
+      setExpandedIndex(null);
     }
   });
-  const sorted = [...violations].sort(
-    (a, b) => (IMPACT_ORDER[a.impact] ?? 4) - (IMPACT_ORDER[b.impact] ?? 4)
+  const sorted = useMemo(
+    () => [...violations].sort((a, b) => (IMPACT_ORDER[a.impact] ?? 4) - (IMPACT_ORDER[b.impact] ?? 4)),
+    [violations]
   );
-  const expanded = expandedIndex !== null ? sorted[expandedIndex] : null;
-  useEffect(() => {
-    if (expanded?.selector) {
-      const local = expanded.selector.replace(/^.*>>>\s*iframe>\s*/, "");
-      emit("storybook/highlight/add", {
-        id: HIGHLIGHT_ID,
-        selectors: [local],
-        styles: {
-          outline: `2px solid ${IMPACT_COLOR[expanded.impact] || "#1565c0"}`,
-          outlineOffset: "2px"
-        }
-      });
-    } else {
-      emit("storybook/highlight/remove", { id: HIGHLIGHT_ID });
-    }
-  }, [expandedIndex]);
   const handleKeyDown = useCallback((e, index) => {
     let next = null;
     switch (e.key) {
@@ -106,7 +93,8 @@ var Panel = ({ active, ...rest }) => {
     buttonRefs.current[next]?.focus();
   }, [sorted.length]);
   if (!active) return null;
-  return /* @__PURE__ */ React.createElement(AddonPanel, { active, ...rest }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", height: "100%", fontFamily: "system-ui, sans-serif" } }, meta && /* @__PURE__ */ React.createElement("div", { style: {
+  const passed = ruleCount - new Set(violations.map((v) => v.ruleId)).size;
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", height: "100%", fontFamily: "system-ui, sans-serif" } }, ruleCount > 0 && /* @__PURE__ */ React.createElement("div", { style: {
     display: "flex",
     gap: "12px",
     padding: "8px 12px",
@@ -114,7 +102,7 @@ var Panel = ({ active, ...rest }) => {
     color: colors.textMuted,
     borderBottom: `1px solid ${colors.border}`,
     flexShrink: 0
-  } }, /* @__PURE__ */ React.createElement("span", null, meta.ruleCount, " rules"), /* @__PURE__ */ React.createElement("span", { style: { color: "#2e7d32" } }, meta.passed, " passed"), /* @__PURE__ */ React.createElement("span", { style: { color: meta.failed > 0 ? "#d32f2f" : colors.textMuted } }, meta.failed, " failed"), /* @__PURE__ */ React.createElement("span", null, meta.duration, "ms")), violations.length === 0 ? /* @__PURE__ */ React.createElement("p", { style: { padding: "12px", margin: 0, fontSize: "13px", color: colors.textMuted } }, "No accessibility violations found.") : /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto", minHeight: 0 } }, /* @__PURE__ */ React.createElement(
+  } }, /* @__PURE__ */ React.createElement("span", null, ruleCount, " rules"), /* @__PURE__ */ React.createElement("span", { style: { color: "#2e7d32" } }, passed, " passed"), /* @__PURE__ */ React.createElement("span", { style: { color: violations.length > 0 ? "#d32f2f" : colors.textMuted } }, new Set(violations.map((v) => v.ruleId)).size, " failed")), violations.length === 0 ? /* @__PURE__ */ React.createElement("p", { style: { padding: "12px", margin: 0, fontSize: "13px", color: colors.textMuted } }, "No accessibility violations found.") : /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto", minHeight: 0 } }, /* @__PURE__ */ React.createElement(
     "ul",
     {
       style: { listStyle: "none", padding: 0, margin: 0 },
@@ -201,13 +189,21 @@ var Panel = ({ active, ...rest }) => {
         v.html
       ))));
     })
-  ))));
+  )));
 };
 
 // src/manager.tsx
+var PANEL_ID = `${ADDON_ID}/panel`;
+var TEST_PROVIDER_ID = `${ADDON_ID}/test-provider`;
 var Title = () => {
-  const [violations] = useAddonState(ADDON_ID, []);
-  const count = violations.length;
+  const [count, setCount] = React.useState(0);
+  useChannel({
+    [STORY_FINISHED]: ({ reporters }) => {
+      const report = reporters.find((r) => r.type === "accesslint");
+      const violations = report?.result?.violations;
+      setCount(violations?.length ?? 0);
+    }
+  });
   return /* @__PURE__ */ React.createElement(React.Fragment, null, "AccessLint", count > 0 && /* @__PURE__ */ React.createElement("span", { style: {
     display: "inline-block",
     marginLeft: "8px",
@@ -236,9 +232,6 @@ var StatusDot = styled.div(
   ({ status, theme }) => status === "positive" && {
     "--status-color": theme.color.positive
   },
-  ({ status, theme }) => status === "warning" && {
-    "--status-color": theme.color.gold
-  },
   ({ status, theme }) => status === "negative" && {
     "--status-color": theme.color.negative
   },
@@ -247,15 +240,18 @@ var StatusDot = styled.div(
   }
 );
 var TestProviderWidget = () => {
-  const [meta, setMeta] = useState(null);
+  const [violationCount, setViolationCount] = React.useState(null);
   const api = useStorybookApi();
   useChannel({
-    [`${ADDON_ID}/meta`]: (data) => {
-      setMeta(data);
+    [STORY_FINISHED]: ({ reporters }) => {
+      const report = reporters.find((r) => r.type === "accesslint");
+      if (!report) return;
+      const violations = report.result?.violations;
+      setViolationCount(violations?.length ?? 0);
     }
   });
-  const hasViolations = meta !== null && meta.violations > 0;
-  const status = meta === null ? "unknown" : hasViolations ? "negative" : "positive";
+  const hasViolations = violationCount !== null && violationCount > 0;
+  const status = violationCount === null ? "unknown" : hasViolations ? "negative" : "positive";
   const openPanel = () => {
     api.setSelectedPanel(PANEL_ID);
     api.togglePanel(true);
@@ -263,19 +259,20 @@ var TestProviderWidget = () => {
   return /* @__PURE__ */ React.createElement(StyledActionList, null, /* @__PURE__ */ React.createElement(ActionList.Item, null, /* @__PURE__ */ React.createElement(ActionList.Action, { as: "label", readOnly: true }, /* @__PURE__ */ React.createElement(ActionList.Icon, null, /* @__PURE__ */ React.createElement(Form.Checkbox, { name: "AccessLint", checked: true, disabled: true })), /* @__PURE__ */ React.createElement(ActionList.Text, null, "AccessLint")), /* @__PURE__ */ React.createElement(
     ActionList.Button,
     {
-      ariaLabel: meta === null ? "AccessLint: not run yet" : hasViolations ? `AccessLint: ${meta.violations} violation${meta.violations === 1 ? "" : "s"}` : "AccessLint: no violations",
-      disabled: meta === null,
+      ariaLabel: violationCount === null ? "AccessLint: not run yet" : hasViolations ? `AccessLint: ${violationCount} violation${violationCount === 1 ? "" : "s"}` : "AccessLint: no violations",
+      disabled: violationCount === null,
       onClick: openPanel
     },
-    hasViolations ? meta.violations : null,
+    hasViolations ? violationCount : null,
     /* @__PURE__ */ React.createElement(StatusDot, { status })
   )));
 };
 addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
-    type: types.PANEL,
     title: Title,
-    render: Panel
+    type: types.PANEL,
+    render: Panel,
+    paramKey: PARAM_KEY
   });
   addons.add(TEST_PROVIDER_ID, {
     type: types.experimental_TEST_PROVIDER,

package/dist/preview.cjs

@@ -1,62 +1,60 @@
 'use strict';
 
-var previewApi = require('storybook/internal/preview-api');
 var core = require('@accesslint/core');
 
-// src/preview.ts
-
-// src/constants.ts
-var ADDON_ID = "accesslint/a11y";
-
 // src/preview.ts
 core.configureRules({
   disabledRules: ["accesslint-045"]
 });
-var decorator = (storyFn) => {
-  const story = storyFn();
-  setTimeout(() => {
+function scopeViolations(violations) {
+  const root = document.getElementById("storybook-root");
+  if (!root) return violations;
+  return violations.filter((v) => {
+    const local = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
     try {
-      const start = performance.now();
-      const results = core.runAudit(document);
-      const duration = Math.round(performance.now() - start);
-      const root = document.getElementById("storybook-root");
-      const scoped = root ? results.violations.filter((v) => {
-        const local = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
-        try {
-          const el = document.querySelector(local);
-          return el && root.contains(el);
-        } catch {
-          return false;
-        }
-      }) : results.violations;
-      const enriched = scoped.map((v) => {
-        const rule = core.getRuleById(v.ruleId);
-        return {
-          ...v,
-          element: void 0,
-          // not serializable
-          description: rule?.description,
-          wcag: rule?.wcag,
-          level: rule?.level,
-          guidance: rule?.guidance
-        };
-      });
-      const failedRuleIds = new Set(scoped.map((v) => v.ruleId));
-      const channel = previewApi.addons.getChannel();
-      channel.emit(`${ADDON_ID}/results`, enriched);
-      channel.emit(`${ADDON_ID}/meta`, {
-        duration,
-        ruleCount: results.ruleCount,
-        failed: failedRuleIds.size,
-        passed: results.ruleCount - failedRuleIds.size,
-        violations: scoped.length
-      });
-    } catch (err) {
-      console.error("[AccessLint] decorator error:", err);
+      const el = document.querySelector(local);
+      return el && root.contains(el);
+    } catch {
+      return false;
     }
-  }, 0);
-  return story;
+  });
+}
+function enrichViolations(violations) {
+  return violations.map((v) => {
+    const rule = core.getRuleById(v.ruleId);
+    return {
+      ...v,
+      element: void 0,
+      // not serializable
+      description: rule?.description,
+      wcag: rule?.wcag,
+      level: rule?.level,
+      guidance: rule?.guidance
+    };
+  });
+}
+var afterEach = async ({
+  reporting,
+  parameters,
+  viewMode
+}) => {
+  const accesslintParam = parameters?.accesslint;
+  if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
+  if (viewMode !== "story") return;
+  const result = core.runAudit(document);
+  const scoped = scopeViolations(result.violations);
+  const enriched = enrichViolations(scoped);
+  const hasViolations = enriched.length > 0;
+  const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
+  reporting.addReport({
+    type: "accesslint",
+    version: 1,
+    result: {
+      violations: enriched,
+      ruleCount: result.ruleCount
+    },
+    status: hasViolations ? mode : "passed"
+  });
 };
-var decorators = [decorator];
 
-exports.decorators = decorators;
+exports.afterEach = afterEach;

package/dist/preview.d.cts

@@ -1,3 +1,9 @@
-declare const decorators: ((storyFn: () => unknown) => unknown)[];
+declare const afterEach: ({ reporting, parameters, viewMode, }: {
+    reporting: {
+        addReport: (report: Record<string, unknown>) => void;
+    };
+    parameters: Record<string, unknown>;
+    viewMode: string;
+}) => Promise<void>;
 
-export { decorators };
+export { afterEach };

package/dist/preview.d.ts

@@ -1,3 +1,9 @@
-declare const decorators: ((storyFn: () => unknown) => unknown)[];
+declare const afterEach: ({ reporting, parameters, viewMode, }: {
+    reporting: {
+        addReport: (report: Record<string, unknown>) => void;
+    };
+    parameters: Record<string, unknown>;
+    viewMode: string;
+}) => Promise<void>;
 
-export { decorators };
+export { afterEach };

package/dist/preview.js

@@ -1,60 +1,58 @@
-import { addons } from 'storybook/internal/preview-api';
 import { configureRules, runAudit, getRuleById } from '@accesslint/core';
 
-// src/preview.ts
-
-// src/constants.ts
-var ADDON_ID = "accesslint/a11y";
-
 // src/preview.ts
 configureRules({
   disabledRules: ["accesslint-045"]
 });
-var decorator = (storyFn) => {
-  const story = storyFn();
-  setTimeout(() => {
+function scopeViolations(violations) {
+  const root = document.getElementById("storybook-root");
+  if (!root) return violations;
+  return violations.filter((v) => {
+    const local = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
     try {
-      const start = performance.now();
-      const results = runAudit(document);
-      const duration = Math.round(performance.now() - start);
-      const root = document.getElementById("storybook-root");
-      const scoped = root ? results.violations.filter((v) => {
-        const local = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
-        try {
-          const el = document.querySelector(local);
-          return el && root.contains(el);
-        } catch {
-          return false;
-        }
-      }) : results.violations;
-      const enriched = scoped.map((v) => {
-        const rule = getRuleById(v.ruleId);
-        return {
-          ...v,
-          element: void 0,
-          // not serializable
-          description: rule?.description,
-          wcag: rule?.wcag,
-          level: rule?.level,
-          guidance: rule?.guidance
-        };
-      });
-      const failedRuleIds = new Set(scoped.map((v) => v.ruleId));
-      const channel = addons.getChannel();
-      channel.emit(`${ADDON_ID}/results`, enriched);
-      channel.emit(`${ADDON_ID}/meta`, {
-        duration,
-        ruleCount: results.ruleCount,
-        failed: failedRuleIds.size,
-        passed: results.ruleCount - failedRuleIds.size,
-        violations: scoped.length
-      });
-    } catch (err) {
-      console.error("[AccessLint] decorator error:", err);
+      const el = document.querySelector(local);
+      return el && root.contains(el);
+    } catch {
+      return false;
     }
-  }, 0);
-  return story;
+  });
+}
+function enrichViolations(violations) {
+  return violations.map((v) => {
+    const rule = getRuleById(v.ruleId);
+    return {
+      ...v,
+      element: void 0,
+      // not serializable
+      description: rule?.description,
+      wcag: rule?.wcag,
+      level: rule?.level,
+      guidance: rule?.guidance
+    };
+  });
+}
+var afterEach = async ({
+  reporting,
+  parameters,
+  viewMode
+}) => {
+  const accesslintParam = parameters?.accesslint;
+  if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
+  if (viewMode !== "story") return;
+  const result = runAudit(document);
+  const scoped = scopeViolations(result.violations);
+  const enriched = enrichViolations(scoped);
+  const hasViolations = enriched.length > 0;
+  const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
+  reporting.addReport({
+    type: "accesslint",
+    version: 1,
+    result: {
+      violations: enriched,
+      ruleCount: result.ruleCount
+    },
+    status: hasViolations ? mode : "passed"
+  });
 };
-var decorators = [decorator];
 
-export { decorators };
+export { afterEach };

package/dist/vitest-plugin.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+// src/vitest-plugin.ts
+function accesslintTest() {
+  const distDir = new URL(".", (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('vitest-plugin.cjs', document.baseURI).href))).pathname;
+  return {
+    name: "@accesslint/storybook-addon",
+    config() {
+      return {
+        server: {
+          fs: {
+            allow: [distDir]
+          }
+        },
+        test: {
+          setupFiles: ["@accesslint/storybook-addon/vitest-setup"]
+        }
+      };
+    }
+  };
+}
+
+exports.accesslintTest = accesslintTest;

package/dist/vitest-plugin.d.cts

@@ -0,0 +1,19 @@
+/**
+ * Vitest plugin that automatically registers AccessLint's afterEach annotation
+ * so that running component tests produces per-story accessibility badges.
+ *
+ * Usage in vitest.config.ts (or the storybook vitest workspace):
+ *
+ *   import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+ *   import { accesslintTest } from "@accesslint/storybook-addon/vitest-plugin";
+ *
+ *   export default defineConfig({
+ *     plugins: [storybookTest(), accesslintTest()],
+ *   });
+ */
+declare function accesslintTest(): {
+    name: string;
+    config: () => Record<string, unknown>;
+};
+
+export { accesslintTest };

package/dist/vitest-plugin.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Vitest plugin that automatically registers AccessLint's afterEach annotation
+ * so that running component tests produces per-story accessibility badges.
+ *
+ * Usage in vitest.config.ts (or the storybook vitest workspace):
+ *
+ *   import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+ *   import { accesslintTest } from "@accesslint/storybook-addon/vitest-plugin";
+ *
+ *   export default defineConfig({
+ *     plugins: [storybookTest(), accesslintTest()],
+ *   });
+ */
+declare function accesslintTest(): {
+    name: string;
+    config: () => Record<string, unknown>;
+};
+
+export { accesslintTest };

package/dist/vitest-plugin.js

@@ -0,0 +1,21 @@
+// src/vitest-plugin.ts
+function accesslintTest() {
+  const distDir = new URL(".", import.meta.url).pathname;
+  return {
+    name: "@accesslint/storybook-addon",
+    config() {
+      return {
+        server: {
+          fs: {
+            allow: [distDir]
+          }
+        },
+        test: {
+          setupFiles: ["@accesslint/storybook-addon/vitest-setup"]
+        }
+      };
+    }
+  };
+}
+
+export { accesslintTest };

package/dist/vitest-setup.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+var previewApi = require('storybook/preview-api');
+var core = require('@accesslint/core');
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/preview.ts
+var preview_exports = {};
+__export(preview_exports, {
+  afterEach: () => afterEach
+});
+core.configureRules({
+  disabledRules: ["accesslint-045"]
+});
+function scopeViolations(violations) {
+  const root = document.getElementById("storybook-root");
+  if (!root) return violations;
+  return violations.filter((v) => {
+    const local = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
+    try {
+      const el = document.querySelector(local);
+      return el && root.contains(el);
+    } catch {
+      return false;
+    }
+  });
+}
+function enrichViolations(violations) {
+  return violations.map((v) => {
+    const rule = core.getRuleById(v.ruleId);
+    return {
+      ...v,
+      element: void 0,
+      // not serializable
+      description: rule?.description,
+      wcag: rule?.wcag,
+      level: rule?.level,
+      guidance: rule?.guidance
+    };
+  });
+}
+var afterEach = async ({
+  reporting,
+  parameters,
+  viewMode
+}) => {
+  const accesslintParam = parameters?.accesslint;
+  if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
+  if (viewMode !== "story") return;
+  const result = core.runAudit(document);
+  const scoped = scopeViolations(result.violations);
+  const enriched = enrichViolations(scoped);
+  const hasViolations = enriched.length > 0;
+  const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
+  reporting.addReport({
+    type: "accesslint",
+    version: 1,
+    result: {
+      violations: enriched,
+      ruleCount: result.ruleCount
+    },
+    status: hasViolations ? mode : "passed"
+  });
+};
+
+// src/vitest-setup.ts
+var g = globalThis;
+var existing = g.globalProjectAnnotations;
+g.globalProjectAnnotations = existing ? previewApi.composeConfigs([existing, preview_exports]) : previewApi.composeConfigs([preview_exports]);

package/dist/vitest-setup.js

@@ -0,0 +1,72 @@
+import { composeConfigs } from 'storybook/preview-api';
+import { configureRules, runAudit, getRuleById } from '@accesslint/core';
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/preview.ts
+var preview_exports = {};
+__export(preview_exports, {
+  afterEach: () => afterEach
+});
+configureRules({
+  disabledRules: ["accesslint-045"]
+});
+function scopeViolations(violations) {
+  const root = document.getElementById("storybook-root");
+  if (!root) return violations;
+  return violations.filter((v) => {
+    const local = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
+    try {
+      const el = document.querySelector(local);
+      return el && root.contains(el);
+    } catch {
+      return false;
+    }
+  });
+}
+function enrichViolations(violations) {
+  return violations.map((v) => {
+    const rule = getRuleById(v.ruleId);
+    return {
+      ...v,
+      element: void 0,
+      // not serializable
+      description: rule?.description,
+      wcag: rule?.wcag,
+      level: rule?.level,
+      guidance: rule?.guidance
+    };
+  });
+}
+var afterEach = async ({
+  reporting,
+  parameters,
+  viewMode
+}) => {
+  const accesslintParam = parameters?.accesslint;
+  if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
+  if (viewMode !== "story") return;
+  const result = runAudit(document);
+  const scoped = scopeViolations(result.violations);
+  const enriched = enrichViolations(scoped);
+  const hasViolations = enriched.length > 0;
+  const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
+  reporting.addReport({
+    type: "accesslint",
+    version: 1,
+    result: {
+      violations: enriched,
+      ruleCount: result.ruleCount
+    },
+    status: hasViolations ? mode : "passed"
+  });
+};
+
+// src/vitest-setup.ts
+var g = globalThis;
+var existing = g.globalProjectAnnotations;
+g.globalProjectAnnotations = existing ? composeConfigs([existing, preview_exports]) : composeConfigs([preview_exports]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@accesslint/storybook-addon",
-  "version": "0.6.7",
+  "version": "0.6.9",
   "description": "Catch accessibility violations in your Storybook stories as you develop",
   "license": "MIT",
   "publishConfig": {
@@ -24,6 +24,14 @@
     "./preview": {
       "import": "./dist/preview.js",
       "require": "./dist/preview.cjs"
+    },
+    "./vitest-plugin": {
+      "import": "./dist/vitest-plugin.js",
+      "require": "./dist/vitest-plugin.cjs"
+    },
+    "./vitest-setup": {
+      "import": "./dist/vitest-setup.js",
+      "require": "./dist/vitest-setup.cjs"
     }
   },
   "main": "dist/index.cjs",