@accesslint/storybook-addon 0.8.3 → 0.8.4

package/README.md

@@ -5,7 +5,8 @@
 
 Catch accessibility violations in your Storybook stories as you develop. Powered by [@accesslint/core](https://accesslint.com/core).
 
-<img width="637" height="414" alt="Storybook screenshot with alt text violation in the details of the AccessLint tab" src="https://github.com/user-attachments/assets/01d2de92-0769-4564-8971-f6edc1986010" />
+<img height="414" alt="Storybook screenshot with alt text violation in the details of the AccessLint tab" src="https://github.com/user-attachments/assets/42bb12ee-3a07-4443-8b60-35c2c9c735a9" />
+
 
 ## Getting Started
 
@@ -25,6 +26,8 @@ export default config;
 
 Restart Storybook and an **AccessLint** panel will appear in the addon bar. Every story is audited automatically after it renders.
 
+Expand any violation to see the failing element, WCAG criteria, and remediation guidance. Click **Highlight** to outline the element in the preview.
+
 ## Vitest integration
 
 If you use [`@storybook/addon-vitest`](https://storybook.js.org/docs/writing-tests/vitest-plugin), add the AccessLint plugin next to `storybookTest()` in your Vite config:
@@ -187,18 +190,18 @@ configureRules({
 
 ### Skipping stories with tags
 
-Tag individual stories or entire components with `"no-a11y"` to skip auditing:
+Tag individual stories or entire components with `"skip-accesslint"` to skip auditing:
 
 ```ts
 // Skip a single story
 export const Prototype = {
-  tags: ["no-a11y"],
+  tags: ["skip-accesslint"],
 };
 
 // Skip all stories for a component
 export default {
   component: ExperimentalWidget,
-  tags: ["no-a11y"],
+  tags: ["skip-accesslint"],
 };
 ```
 
@@ -206,7 +209,7 @@ With the Vitest plugin, you can also define custom skip tags:
 
 ```ts
 accesslintTest({
-  tags: { skip: ["no-a11y", "wip"] },
+  tags: { skip: ["skip-accesslint", "wip"] },
 });
 ```
 

package/dist/manager.js

@@ -2,7 +2,7 @@ import React, { useMemo, useState, useRef, useCallback } from 'react';
 import * as managerApi from 'storybook/internal/manager-api';
 import { useChannel } from 'storybook/internal/manager-api';
 import { styled, useTheme } from 'storybook/internal/theming';
-import { STORY_CHANGED, STORY_FINISHED } from 'storybook/internal/core-events';
+import { STORY_CHANGED } from 'storybook/internal/core-events';
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -15,6 +15,10 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 var ADDON_ID = "accesslint/a11y";
 var PARAM_KEY = "accesslint";
 var STATUS_TYPE_ID = "accesslint/a11y";
+var RESULT_EVENT = `${ADDON_ID}/result`;
+var HIGHLIGHT_ADDON_ID = "storybook/highlight";
+var HIGHLIGHT = `${HIGHLIGHT_ADDON_ID}/add`;
+var REMOVE_HIGHLIGHT = `${HIGHLIGHT_ADDON_ID}/remove`;
 var IMPACT_COLOR = {
   critical: "#d32f2f",
   serious: "#d32f2f",
@@ -58,29 +62,30 @@ var Panel = ({ active }) => {
   const [ruleCount, setRuleCount] = useState(0);
   const [skippedReason, setSkippedReason] = useState(null);
   const [expandedIndex, setExpandedIndex] = useState(null);
+  const [highlightedIndex, setHighlightedIndex] = useState(null);
   const buttonRefs = useRef([]);
-  useChannel({
-    [STORY_FINISHED]: ({ reporters }) => {
-      const report = reporters.find((r) => r.type === "accesslint");
-      if (!report) return;
-      const result = report.result;
+  const emit = useChannel({
+    [RESULT_EVENT]: ({ result }) => {
       if (result.skipped) {
         setViolations([]);
         setRuleCount(0);
         setSkippedReason(result.reason ?? "skipped");
         setExpandedIndex(null);
+        setHighlightedIndex(null);
         return;
       }
       setViolations(result.violations ?? []);
       setRuleCount(result.ruleCount ?? 0);
       setSkippedReason(null);
       setExpandedIndex(null);
+      setHighlightedIndex(null);
     },
     [STORY_CHANGED]: () => {
       setViolations([]);
       setRuleCount(0);
       setSkippedReason(null);
       setExpandedIndex(null);
+      setHighlightedIndex(null);
     }
   });
   const sorted = useMemo(
@@ -133,7 +138,13 @@ var Panel = ({ active }) => {
             buttonRefs.current[i] = el;
           },
           type: "button",
-          onClick: () => setExpandedIndex(isOpen ? null : i),
+          onClick: () => {
+            setExpandedIndex(isOpen ? null : i);
+            if (highlightedIndex !== null) {
+              emit(REMOVE_HIGHLIGHT);
+              setHighlightedIndex(null);
+            }
+          },
           onKeyDown: (e) => handleKeyDown(e, i),
           "aria-expanded": isOpen,
           style: {
@@ -186,7 +197,38 @@ var Panel = ({ active }) => {
           }
         },
         ref
-      ))), v.guidance && /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "8px" } }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: "11px", fontWeight: 500, color: colors.textMuted, marginBottom: "4px" } }, "How to fix"), /* @__PURE__ */ React.createElement("p", { style: { margin: 0, fontSize: "12px", color: colors.text, whiteSpace: "pre-wrap" } }, v.guidance)), v.html && /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "8px" } }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: "11px", fontWeight: 500, color: colors.textMuted, marginBottom: "4px" } }, "Element"), /* @__PURE__ */ React.createElement(
+      ))), v.guidance && /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "8px" } }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: "11px", fontWeight: 500, color: colors.textMuted, marginBottom: "4px" } }, "How to fix"), /* @__PURE__ */ React.createElement("p", { style: { margin: 0, fontSize: "12px", color: colors.text, whiteSpace: "pre-wrap" } }, v.guidance)), v.html && /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "8px" } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "4px" } }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: "11px", fontWeight: 500, color: colors.textMuted } }, "Element"), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            if (highlightedIndex === i) {
+              emit(REMOVE_HIGHLIGHT);
+              setHighlightedIndex(null);
+            } else {
+              const color = v.impact === "critical" || v.impact === "serious" ? "#d32f2f" : "#c43e00";
+              const localSelector = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
+              emit(HIGHLIGHT, {
+                elements: [localSelector],
+                color,
+                style: "solid"
+              });
+              setHighlightedIndex(i);
+            }
+          },
+          style: {
+            padding: "2px 8px",
+            fontSize: "11px",
+            fontWeight: 500,
+            border: `1px solid ${colors.codeBorder}`,
+            borderRadius: "4px",
+            background: highlightedIndex === i ? IMPACT_COLOR[v.impact] : colors.codeBg,
+            color: highlightedIndex === i ? "#fff" : colors.text,
+            cursor: "pointer"
+          }
+        },
+        "Highlight"
+      )), /* @__PURE__ */ React.createElement(
         "pre",
         {
           style: {
@@ -234,10 +276,8 @@ try {
 var Title = () => {
   const [count, setCount] = React.useState(0);
   useChannel2({
-    [STORY_FINISHED]: ({ reporters }) => {
-      const report = reporters.find((r) => r.type === "accesslint");
-      const violations = report?.result?.violations;
-      setCount(violations?.length ?? 0);
+    [RESULT_EVENT]: ({ result }) => {
+      setCount(result.skipped ? 0 : result.violations?.length ?? 0);
     }
   });
   return /* @__PURE__ */ React.createElement(React.Fragment, null, "AccessLint", count > 0 && /* @__PURE__ */ React.createElement("span", { style: {
@@ -286,20 +326,18 @@ var TestProviderWidget = () => {
     return unsub;
   }, [api]);
   useChannel2({
-    [STORY_FINISHED]: ({ storyId, reporters }) => {
-      const report = reporters.find((r) => r.type === "accesslint");
-      if (!report) return;
-      const violations = report.result?.violations ?? [];
+    [RESULT_EVENT]: ({ storyId, result, status: status2 }) => {
+      const violations = result.skipped ? [] : result.violations ?? [];
       setViolationCount(violations.length);
-      if (statusStore) {
+      if (statusStore && storyId) {
         const hasViolations2 = violations.length > 0;
-        const isWarning = report.status === "warning";
+        const isWarning = status2 === "warning";
         statusStore.set([{
-          value: hasViolations2 ? isWarning ? "status-value:warning" : "status-value:error" : "status-value:success",
+          value: result.skipped ? "status-value:unknown" : hasViolations2 ? isWarning ? "status-value:warning" : "status-value:error" : "status-value:success",
           typeId: STATUS_TYPE_ID,
           storyId,
           title: "AccessLint",
-          description: hasViolations2 ? `${violations.length} violation${violations.length === 1 ? "" : "s"}` : "No violations",
+          description: result.skipped ? "Skipped" : hasViolations2 ? `${violations.length} violation${violations.length === 1 ? "" : "s"}` : "No violations",
           sidebarContextMenu: true
         }]);
       }

package/dist/portable.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var core = require('@accesslint/core');
+var previewApi = require('storybook/preview-api');
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -13,6 +14,12 @@ var preview_exports = {};
 __export(preview_exports, {
   afterEach: () => afterEach
 });
+
+// src/constants.ts
+var ADDON_ID = "accesslint/a11y";
+var RESULT_EVENT = `${ADDON_ID}/result`;
+
+// src/preview.ts
 core.configureRules({
   disabledRules: ["accesslint-045"]
 });
@@ -51,19 +58,22 @@ var afterEach = async ({
   reporting,
   parameters,
   viewMode,
-  tags
+  tags,
+  id
 }) => {
   const accesslintParam = parameters?.accesslint;
   if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
   if (viewMode !== "story") return;
   const skipTags = typeof __ACCESSLINT_SKIP_TAGS__ !== "undefined" ? __ACCESSLINT_SKIP_TAGS__ : [];
-  const allSkipTags = ["no-a11y", ...skipTags];
+  const allSkipTags = ["skip-accesslint", ...skipTags];
   const matchedTag = tags?.find((t) => allSkipTags.includes(t));
   if (matchedTag) {
+    const result2 = { skipped: true, reason: matchedTag };
+    previewApi.addons.getChannel().emit(RESULT_EVENT, { storyId: id, result: result2 });
     reporting.addReport({
       type: "accesslint",
       version: 1,
-      result: { skipped: true, reason: matchedTag },
+      result: result2,
       status: "passed"
     });
     return;
@@ -77,14 +87,17 @@ var afterEach = async ({
   const enriched = enrichViolations(scoped);
   const hasViolations = enriched.length > 0;
   const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
+  const status = hasViolations ? mode : "passed";
+  const result = {
+    violations: enriched,
+    ruleCount: core.getActiveRules().length
+  };
+  previewApi.addons.getChannel().emit(RESULT_EVENT, { storyId: id, result, status });
   reporting.addReport({
     type: "accesslint",
     version: 1,
-    result: {
-      violations: enriched,
-      ruleCount: core.getActiveRules().length
-    },
-    status: hasViolations ? mode : "passed"
+    result,
+    status
   });
 };
 

package/dist/portable.d.cts

@@ -1,10 +1,11 @@
-declare const afterEach: ({ reporting, parameters, viewMode, tags, }: {
+declare const afterEach: ({ reporting, parameters, viewMode, tags, id, }: {
     reporting: {
         addReport: (report: Record<string, unknown>) => void;
     };
     parameters: Record<string, unknown>;
     viewMode: string;
     tags?: string[];
+    id?: string;
 }) => Promise<void>;
 
 declare const accesslintAnnotations_afterEach: typeof afterEach;

package/dist/portable.d.ts

@@ -1,10 +1,11 @@
-declare const afterEach: ({ reporting, parameters, viewMode, tags, }: {
+declare const afterEach: ({ reporting, parameters, viewMode, tags, id, }: {
     reporting: {
         addReport: (report: Record<string, unknown>) => void;
     };
     parameters: Record<string, unknown>;
     viewMode: string;
     tags?: string[];
+    id?: string;
 }) => Promise<void>;
 
 declare const accesslintAnnotations_afterEach: typeof afterEach;

package/dist/portable.js

@@ -1,4 +1,5 @@
 import { configureRules, createChunkedAudit, getActiveRules, getRuleById } from '@accesslint/core';
+import { addons } from 'storybook/preview-api';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -11,6 +12,12 @@ var preview_exports = {};
 __export(preview_exports, {
   afterEach: () => afterEach
 });
+
+// src/constants.ts
+var ADDON_ID = "accesslint/a11y";
+var RESULT_EVENT = `${ADDON_ID}/result`;
+
+// src/preview.ts
 configureRules({
   disabledRules: ["accesslint-045"]
 });
@@ -49,19 +56,22 @@ var afterEach = async ({
   reporting,
   parameters,
   viewMode,
-  tags
+  tags,
+  id
 }) => {
   const accesslintParam = parameters?.accesslint;
   if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
   if (viewMode !== "story") return;
   const skipTags = typeof __ACCESSLINT_SKIP_TAGS__ !== "undefined" ? __ACCESSLINT_SKIP_TAGS__ : [];
-  const allSkipTags = ["no-a11y", ...skipTags];
+  const allSkipTags = ["skip-accesslint", ...skipTags];
   const matchedTag = tags?.find((t) => allSkipTags.includes(t));
   if (matchedTag) {
+    const result2 = { skipped: true, reason: matchedTag };
+    addons.getChannel().emit(RESULT_EVENT, { storyId: id, result: result2 });
     reporting.addReport({
       type: "accesslint",
       version: 1,
-      result: { skipped: true, reason: matchedTag },
+      result: result2,
       status: "passed"
     });
     return;
@@ -75,14 +85,17 @@ var afterEach = async ({
   const enriched = enrichViolations(scoped);
   const hasViolations = enriched.length > 0;
   const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
+  const status = hasViolations ? mode : "passed";
+  const result = {
+    violations: enriched,
+    ruleCount: getActiveRules().length
+  };
+  addons.getChannel().emit(RESULT_EVENT, { storyId: id, result, status });
   reporting.addReport({
     type: "accesslint",
     version: 1,
-    result: {
-      violations: enriched,
-      ruleCount: getActiveRules().length
-    },
-    status: hasViolations ? mode : "passed"
+    result,
+    status
   });
 };
 

package/dist/preview.cjs

@@ -1,6 +1,13 @@
 'use strict';
 
 var core = require('@accesslint/core');
+var previewApi = require('storybook/preview-api');
+
+// src/preview.ts
+
+// src/constants.ts
+var ADDON_ID = "accesslint/a11y";
+var RESULT_EVENT = `${ADDON_ID}/result`;
 
 // src/preview.ts
 core.configureRules({
@@ -41,19 +48,22 @@ var afterEach = async ({
   reporting,
   parameters,
   viewMode,
-  tags
+  tags,
+  id
 }) => {
   const accesslintParam = parameters?.accesslint;
   if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
   if (viewMode !== "story") return;
   const skipTags = typeof __ACCESSLINT_SKIP_TAGS__ !== "undefined" ? __ACCESSLINT_SKIP_TAGS__ : [];
-  const allSkipTags = ["no-a11y", ...skipTags];
+  const allSkipTags = ["skip-accesslint", ...skipTags];
   const matchedTag = tags?.find((t) => allSkipTags.includes(t));
   if (matchedTag) {
+    const result2 = { skipped: true, reason: matchedTag };
+    previewApi.addons.getChannel().emit(RESULT_EVENT, { storyId: id, result: result2 });
     reporting.addReport({
       type: "accesslint",
       version: 1,
-      result: { skipped: true, reason: matchedTag },
+      result: result2,
       status: "passed"
     });
     return;
@@ -67,14 +77,17 @@ var afterEach = async ({
   const enriched = enrichViolations(scoped);
   const hasViolations = enriched.length > 0;
   const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
+  const status = hasViolations ? mode : "passed";
+  const result = {
+    violations: enriched,
+    ruleCount: core.getActiveRules().length
+  };
+  previewApi.addons.getChannel().emit(RESULT_EVENT, { storyId: id, result, status });
   reporting.addReport({
     type: "accesslint",
     version: 1,
-    result: {
-      violations: enriched,
-      ruleCount: core.getActiveRules().length
-    },
-    status: hasViolations ? mode : "passed"
+    result,
+    status
   });
 };
 

package/dist/preview.d.cts

@@ -1,10 +1,11 @@
-declare const afterEach: ({ reporting, parameters, viewMode, tags, }: {
+declare const afterEach: ({ reporting, parameters, viewMode, tags, id, }: {
     reporting: {
         addReport: (report: Record<string, unknown>) => void;
     };
     parameters: Record<string, unknown>;
     viewMode: string;
     tags?: string[];
+    id?: string;
 }) => Promise<void>;
 
 export { afterEach };

package/dist/preview.d.ts

@@ -1,10 +1,11 @@
-declare const afterEach: ({ reporting, parameters, viewMode, tags, }: {
+declare const afterEach: ({ reporting, parameters, viewMode, tags, id, }: {
     reporting: {
         addReport: (report: Record<string, unknown>) => void;
     };
     parameters: Record<string, unknown>;
     viewMode: string;
     tags?: string[];
+    id?: string;
 }) => Promise<void>;
 
 export { afterEach };

package/dist/preview.js

@@ -1,4 +1,11 @@
 import { configureRules, createChunkedAudit, getActiveRules, getRuleById } from '@accesslint/core';
+import { addons } from 'storybook/preview-api';
+
+// src/preview.ts
+
+// src/constants.ts
+var ADDON_ID = "accesslint/a11y";
+var RESULT_EVENT = `${ADDON_ID}/result`;
 
 // src/preview.ts
 configureRules({
@@ -39,19 +46,22 @@ var afterEach = async ({
   reporting,
   parameters,
   viewMode,
-  tags
+  tags,
+  id
 }) => {
   const accesslintParam = parameters?.accesslint;
   if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
   if (viewMode !== "story") return;
   const skipTags = typeof __ACCESSLINT_SKIP_TAGS__ !== "undefined" ? __ACCESSLINT_SKIP_TAGS__ : [];
-  const allSkipTags = ["no-a11y", ...skipTags];
+  const allSkipTags = ["skip-accesslint", ...skipTags];
   const matchedTag = tags?.find((t) => allSkipTags.includes(t));
   if (matchedTag) {
+    const result2 = { skipped: true, reason: matchedTag };
+    addons.getChannel().emit(RESULT_EVENT, { storyId: id, result: result2 });
     reporting.addReport({
       type: "accesslint",
       version: 1,
-      result: { skipped: true, reason: matchedTag },
+      result: result2,
       status: "passed"
     });
     return;
@@ -65,14 +75,17 @@ var afterEach = async ({
   const enriched = enrichViolations(scoped);
   const hasViolations = enriched.length > 0;
   const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
+  const status = hasViolations ? mode : "passed";
+  const result = {
+    violations: enriched,
+    ruleCount: getActiveRules().length
+  };
+  addons.getChannel().emit(RESULT_EVENT, { storyId: id, result, status });
   reporting.addReport({
     type: "accesslint",
     version: 1,
-    result: {
-      violations: enriched,
-      ruleCount: getActiveRules().length
-    },
-    status: hasViolations ? mode : "passed"
+    result,
+    status
   });
 };
 

package/dist/vitest-plugin.d.cts

@@ -15,7 +15,7 @@ interface AccessLintTestOptions {
     /**
      * Tags-based filtering for which stories to audit.
      *
-     *   accesslintTest({ tags: { skip: ["no-a11y"] } })
+     *   accesslintTest({ tags: { skip: ["skip-accesslint"] } })
      *
      * Stories with any of the `skip` tags will not be audited.
      */

package/dist/vitest-plugin.d.ts

@@ -15,7 +15,7 @@ interface AccessLintTestOptions {
     /**
      * Tags-based filtering for which stories to audit.
      *
-     *   accesslintTest({ tags: { skip: ["no-a11y"] } })
+     *   accesslintTest({ tags: { skip: ["skip-accesslint"] } })
      *
      * Stories with any of the `skip` tags will not be audited.
      */

package/dist/vitest-setup.cjs

@@ -17,6 +17,12 @@ var preview_exports = {};
 __export(preview_exports, {
   afterEach: () => afterEach
 });
+
+// src/constants.ts
+var ADDON_ID = "accesslint/a11y";
+var RESULT_EVENT = `${ADDON_ID}/result`;
+
+// src/preview.ts
 core.configureRules({
   disabledRules: ["accesslint-045"]
 });
@@ -55,19 +61,22 @@ var afterEach = async ({
   reporting,
   parameters,
   viewMode,
-  tags
+  tags,
+  id
 }) => {
   const accesslintParam = parameters?.accesslint;
   if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
   if (viewMode !== "story") return;
   const skipTags = typeof __ACCESSLINT_SKIP_TAGS__ !== "undefined" ? __ACCESSLINT_SKIP_TAGS__ : [];
-  const allSkipTags = ["no-a11y", ...skipTags];
+  const allSkipTags = ["skip-accesslint", ...skipTags];
   const matchedTag = tags?.find((t) => allSkipTags.includes(t));
   if (matchedTag) {
+    const result2 = { skipped: true, reason: matchedTag };
+    previewApi.addons.getChannel().emit(RESULT_EVENT, { storyId: id, result: result2 });
     reporting.addReport({
       type: "accesslint",
       version: 1,
-      result: { skipped: true, reason: matchedTag },
+      result: result2,
       status: "passed"
     });
     return;
@@ -81,14 +90,17 @@ var afterEach = async ({
   const enriched = enrichViolations(scoped);
   const hasViolations = enriched.length > 0;
   const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
+  const status = hasViolations ? mode : "passed";
+  const result = {
+    violations: enriched,
+    ruleCount: core.getActiveRules().length
+  };
+  previewApi.addons.getChannel().emit(RESULT_EVENT, { storyId: id, result, status });
   reporting.addReport({
     type: "accesslint",
     version: 1,
-    result: {
-      violations: enriched,
-      ruleCount: core.getActiveRules().length
-    },
-    status: hasViolations ? mode : "passed"
+    result,
+    status
   });
 };
 test.expect.extend(matchers.accesslintMatchers);

package/dist/vitest-setup.js

@@ -1,6 +1,6 @@
 import { expect } from 'storybook/test';
 import { expect as expect$1 } from 'vitest';
-import { composeConfigs } from 'storybook/preview-api';
+import { composeConfigs, addons } from 'storybook/preview-api';
 import { configureRules, createChunkedAudit, getActiveRules, getRuleById } from '@accesslint/core';
 import { accesslintMatchers } from '@accesslint/vitest/matchers';
 
@@ -15,6 +15,12 @@ var preview_exports = {};
 __export(preview_exports, {
   afterEach: () => afterEach
 });
+
+// src/constants.ts
+var ADDON_ID = "accesslint/a11y";
+var RESULT_EVENT = `${ADDON_ID}/result`;
+
+// src/preview.ts
 configureRules({
   disabledRules: ["accesslint-045"]
 });
@@ -53,19 +59,22 @@ var afterEach = async ({
   reporting,
   parameters,
   viewMode,
-  tags
+  tags,
+  id
 }) => {
   const accesslintParam = parameters?.accesslint;
   if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
   if (viewMode !== "story") return;
   const skipTags = typeof __ACCESSLINT_SKIP_TAGS__ !== "undefined" ? __ACCESSLINT_SKIP_TAGS__ : [];
-  const allSkipTags = ["no-a11y", ...skipTags];
+  const allSkipTags = ["skip-accesslint", ...skipTags];
   const matchedTag = tags?.find((t) => allSkipTags.includes(t));
   if (matchedTag) {
+    const result2 = { skipped: true, reason: matchedTag };
+    addons.getChannel().emit(RESULT_EVENT, { storyId: id, result: result2 });
     reporting.addReport({
       type: "accesslint",
       version: 1,
-      result: { skipped: true, reason: matchedTag },
+      result: result2,
       status: "passed"
     });
     return;
@@ -79,14 +88,17 @@ var afterEach = async ({
   const enriched = enrichViolations(scoped);
   const hasViolations = enriched.length > 0;
   const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
+  const status = hasViolations ? mode : "passed";
+  const result = {
+    violations: enriched,
+    ruleCount: getActiveRules().length
+  };
+  addons.getChannel().emit(RESULT_EVENT, { storyId: id, result, status });
   reporting.addReport({
     type: "accesslint",
     version: 1,
-    result: {
-      violations: enriched,
-      ruleCount: getActiveRules().length
-    },
-    status: hasViolations ? mode : "passed"
+    result,
+    status
   });
 };
 expect.extend(accesslintMatchers);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@accesslint/storybook-addon",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Catch accessibility violations in your Storybook stories as you develop",
   "license": "MIT",
   "publishConfig": {
@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "@accesslint/core": "^0.6.5",
-    "@accesslint/vitest": "^0.1.3"
+    "@accesslint/vitest": "^0.1.4"
   },
   "devDependencies": {
     "react": "^18.2.0",