@accesslint/storybook-addon 0.7.0 → 0.8.2

package/README.md

@@ -17,153 +17,111 @@ Add the addon to your `.storybook/main.ts` (or `.storybook/main.js`):
 
 ```ts
 const config = {
-  addons: ["@storybook/addon-vitest", "@accesslint/storybook-addon"],
+  addons: ["@accesslint/storybook-addon"],
 };
 
 export default config;
 ```
 
-Add the vitest plugin to your `vite.config.ts`:
+Restart Storybook and an **AccessLint** panel will appear in the addon bar. Every story is audited automatically after it renders.
+
+## 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:
 
 ```ts
-import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
 import { accesslintTest } from "@accesslint/storybook-addon/vitest-plugin";
 
-export default defineConfig({
-  test: {
-    projects: [
-      {
-        plugins: [
-          storybookTest({ configDir: ".storybook" }),
-          accesslintTest(),
-        ],
-        test: {
-          name: "storybook",
-          browser: {
-            enabled: true,
-            headless: true,
-            provider: playwright({}),
-            instances: [{ browser: "chromium" }],
-          },
-          setupFiles: [".storybook/vitest.setup.ts"],
-        },
-      },
-    ],
-  },
-});
+// Inside your Storybook test project:
+plugins: [
+  storybookTest({ configDir: ".storybook" }),
+  accesslintTest(),
+],
 ```
 
-Restart Storybook and an **AccessLint** panel will appear in the addon bar.
-
-## Usage
+This gives you:
 
-The addon audits each story after it renders and displays violations sorted by severity. Expand any violation to see:
+- Per-story status dots in the sidebar (green/yellow/red)
+- A test widget in the sidebar's testing module
+- The `toBeAccessible()` matcher registered automatically
+- Accessibility results in CI alongside your component tests
 
-- **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
+## Accessibility assertions
 
-### Sidebar status indicators
+Use `toBeAccessible()` to make accessibility a first-class assertion in your tests and play functions.
 
-Each story gets a colored dot in the sidebar tree showing its accessibility status:
+### With the Vitest plugin
 
-- Green — no violations
-- Yellow — violations present, but running in `"todo"` mode (warnings)
-- Red — violations present in `"error"` mode (failures)
-
-Click a status dot to jump to the AccessLint panel for that story. Right-click any story in the sidebar to access "View AccessLint results".
-
-### Test widget
-
-The AccessLint test provider widget appears in the sidebar's testing module alongside Storybook's built-in component tests. It shows the current story's violation count and responds to the global "Run all" and "Clear all" buttons.
-
-## Configuration
-
-### Parameters
-
-Control AccessLint behavior per-story or globally via `parameters.accesslint`:
+If you added `accesslintTest()` above, the matcher is already registered. Use it directly in play functions:
 
 ```ts
-// .storybook/preview.ts
-const preview = {
-  parameters: {
-    accesslint: {
-      // 'todo' - show violations as warnings in the test UI (non-blocking)
-      // 'error' - fail CI on violations
-      // 'off' - skip checks entirely
-      test: "todo",
-    },
-  },
-};
-
-export default preview;
-```
-
-Override per-story:
+import { expect } from "storybook/test";
 
-```ts
-export const Experimental = {
-  parameters: {
-    accesslint: { test: "off" },
+export const Default = {
+  play: async ({ canvasElement }) => {
+    await expect(canvasElement).toBeAccessible();
   },
 };
 ```
 
-### Disabling rules
+### Without the Vitest plugin
 
-Disable specific rules in your preview file:
+For play functions or standalone tests without the plugin, import the matchers entry point to register `toBeAccessible()`:
 
 ```ts
-// .storybook/preview.ts
-import { configureRules } from "@accesslint/core";
-
-configureRules({
-  disabledRules: ["accesslint-045"], // e.g. disable landmark region rule
-});
+import "@accesslint/storybook-addon/matchers";
 ```
 
-### Skipping stories with tags
-
-Tag stories with `"no-a11y"` to skip AccessLint auditing:
+Then use it in a play function:
 
 ```ts
-export const Prototype = {
-  tags: ["no-a11y"],
+import { expect } from "storybook/test";
+import "@accesslint/storybook-addon/matchers";
+
+export const Default = {
+  play: async ({ canvasElement }) => {
+    await expect(canvasElement).toBeAccessible();
+  },
 };
 ```
 
-The tag can also be set at the component level to skip all stories for a component:
+Or in a standalone Vitest/Jest test:
 
 ```ts
-export default {
-  title: "Prototypes/ExperimentalWidget",
-  component: ExperimentalWidget,
-  tags: ["no-a11y"],
-};
+import "@accesslint/storybook-addon/matchers";
+import { render } from "@testing-library/react";
+
+test("LoginForm is accessible", () => {
+  const { container } = render(<LoginForm />);
+  expect(container).toBeAccessible();
+});
 ```
 
-You can also configure the `accesslintTest()` plugin with custom skip tags:
+### Disabling rules per assertion
 
 ```ts
-accesslintTest({
-  tags: { skip: ["no-a11y", "wip"] },
+await expect(canvasElement).toBeAccessible({
+  disabledRules: ["accesslint-045"],
 });
 ```
 
-## Accessibility assertions in play functions
+### Failure output
 
-The `toBeAccessible()` matcher lets you make accessibility a first-class assertion in interaction tests and play functions.
+When the assertion fails, the error message lists each violation with its rule ID, WCAG criteria, conformance level, message, and the CSS selector of the failing element:
 
-### Setup
+```
+Expected element to have no accessibility violations, but found 2:
 
-Import the matchers entry point in your test setup or directly in a story file:
+  accesslint-001 [A] (1.1.1): Image is missing alt text
+    img[src="hero.png"]
 
-```ts
-import "@accesslint/storybook-addon/matchers";
+  accesslint-012 [A] (1.3.1): Form input is missing a label
+    input[type="email"]
 ```
 
-For TypeScript support, add the type reference to your `tsconfig.json`:
+### TypeScript support
+
+Add the type reference to your `tsconfig.json`:
 
 ```json
 {
@@ -179,60 +137,82 @@ Or add a triple-slash reference in a `.d.ts` file:
 /// <reference types="@accesslint/storybook-addon/matchers" />
 ```
 
-### Usage in a play function
+## Configuration
 
-```ts
-import { expect } from "storybook/test";
-import "@accesslint/storybook-addon/matchers";
+### Test mode
 
-export const Default = {
-  play: async ({ canvasElement }) => {
-    await expect(canvasElement).toBeAccessible();
+Control how violations are reported via `parameters.accesslint`:
+
+```ts
+// .storybook/preview.ts — applies to all stories
+const preview = {
+  parameters: {
+    accesslint: {
+      test: "todo", // "error" (default) | "todo" | "off"
+    },
   },
 };
+
+export default preview;
 ```
 
-### Usage in a standalone Vitest test
+| Mode | Behavior |
+| --- | --- |
+| `"error"` | Violations fail the test (default) |
+| `"todo"` | Violations show as warnings — yellow sidebar dots, non-blocking in CI |
+| `"off"` | Skip auditing entirely |
 
-```ts
-import "@accesslint/storybook-addon/matchers";
-import { render } from "@testing-library/react";
+Override per-story:
 
-test("LoginForm is accessible", () => {
-  const { container } = render(<LoginForm />);
-  expect(container).toBeAccessible();
-});
+```ts
+export const Experimental = {
+  parameters: {
+    accesslint: { test: "off" },
+  },
+};
 ```
 
-### Options
+### Disabling rules
 
-Pass options to disable specific rules for a single assertion:
+Disable specific rules globally in your preview file:
 
 ```ts
-await expect(canvasElement).toBeAccessible({
-  disabledRules: ["accesslint-045"],
+// .storybook/preview.ts
+import { configureRules } from "@accesslint/core";
+
+configureRules({
+  disabledRules: ["accesslint-045"], // e.g. disable landmark region rule
 });
 ```
 
-### Failure output
+### Skipping stories with tags
 
-When the assertion fails, the error message lists each violation with its rule ID, WCAG criteria, conformance level, message, and the CSS selector of the failing element:
+Tag individual stories or entire components with `"no-a11y"` to skip auditing:
+
+```ts
+// Skip a single story
+export const Prototype = {
+  tags: ["no-a11y"],
+};
 
+// Skip all stories for a component
+export default {
+  component: ExperimentalWidget,
+  tags: ["no-a11y"],
+};
 ```
-Expected element to have no accessibility violations, but found 2:
 
-  accesslint-001 [A] (1.1.1): Image is missing alt text
-    img[src="hero.png"]
+With the Vitest plugin, you can also define custom skip tags:
 
-  accesslint-012 [A] (1.3.1): Form input is missing a label
-    input[type="email"]
+```ts
+accesslintTest({
+  tags: { skip: ["no-a11y", "wip"] },
+});
 ```
 
 ## Portable stories
 
-Use AccessLint with `composeStories` outside of Storybook (plain Vitest, Jest, or Playwright CT).
-
-### Setup
+Use AccessLint with [`composeStories`](https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest) outside of Storybook (plain Vitest, Jest, or Playwright CT).
 
 In your test setup file, pass the AccessLint annotations to `setProjectAnnotations`:
 
@@ -250,7 +230,7 @@ const project = setProjectAnnotations([
 beforeAll(project.beforeAll);
 ```
 
-### Usage
+Then in your tests:
 
 ```ts
 import { composeStories } from "@storybook/react";
@@ -273,22 +253,13 @@ test("Primary button is accessible", async () => {
 | `@accesslint/storybook-addon` | Main addon registration (manager + preview) |
 | `@accesslint/storybook-addon/vitest-plugin` | `accesslintTest()` Vite plugin for Vitest integration |
 | `@accesslint/storybook-addon/vitest-setup` | Setup file registered by the Vite plugin |
-| `@accesslint/storybook-addon/matchers` | `toBeAccessible()` custom Vitest/Jest matcher |
+| `@accesslint/storybook-addon/matchers` | `toBeAccessible()` custom matcher |
 | `@accesslint/storybook-addon/portable` | `enableAccessLint()` for portable stories |
 | `@accesslint/storybook-addon/preview` | Preview annotations (afterEach hook) |
 
 ### `accesslintTest(options?)`
 
-Vite plugin that registers AccessLint's `afterEach` annotation for Vitest story tests.
-
-```ts
-import { accesslintTest } from "@accesslint/storybook-addon/vitest-plugin";
-
-accesslintTest();
-accesslintTest({ tags: { skip: ["no-a11y"] } });
-```
-
-**Options:**
+Vite plugin that registers AccessLint's `afterEach` annotation and the `toBeAccessible()` matcher for Vitest story tests.
 
 | Option | Type | Description |
 | --- | --- | --- |
@@ -298,20 +269,13 @@ accesslintTest({ tags: { skip: ["no-a11y"] } });
 
 | Parameter | Type | Default | Description |
 | --- | --- | --- | --- |
-| `test` | `"todo" \| "error" \| "off"` | `"error"` | `"todo"` reports violations as warnings. `"error"` fails the test. `"off"` skips auditing. |
+| `test` | `"todo" \| "error" \| "off"` | `"error"` | Controls how violations are reported |
 | `disable` | `boolean` | `false` | Set to `true` to skip auditing (same as `test: "off"`) |
 
 ### `toBeAccessible(options?)`
 
 Custom matcher for asserting an element has no accessibility violations.
 
-```ts
-expect(element).toBeAccessible();
-expect(element).toBeAccessible({ disabledRules: ["accesslint-045"] });
-```
-
-**Options:**
-
 | Option | Type | Description |
 | --- | --- | --- |
 | `disabledRules` | `string[]` | Rule IDs to skip for this assertion |
@@ -320,14 +284,11 @@ expect(element).toBeAccessible({ disabledRules: ["accesslint-045"] });
 
 Returns AccessLint's preview annotations for use with `setProjectAnnotations` in portable stories setups.
 
-```ts
-import { enableAccessLint } from "@accesslint/storybook-addon/portable";
-```
-
 ## Compatibility
 
 | Addon version | Storybook version |
 | ------------- | ----------------- |
+| 0.7.x         | 10.x              |
 | 0.6.x         | 10.x              |
 
 ## Issues

package/dist/manager.js

@@ -1,10 +1,15 @@
 import React, { useMemo, useState, useRef, useCallback } from 'react';
-import { experimental_getStatusStore, experimental_getTestProviderStore, addons, types, useChannel, useStorybookApi, experimental_useTestProviderStore } from 'storybook/internal/manager-api';
-import { ActionList, Form } from 'storybook/internal/components';
+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';
 
-// src/manager.tsx
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/constants.ts
 var ADDON_ID = "accesslint/a11y";
@@ -194,16 +199,31 @@ var Panel = ({ active }) => {
 };
 
 // src/manager.tsx
+var { addons, types, useChannel: useChannel2, useStorybookApi } = managerApi;
 var PANEL_ID = `${ADDON_ID}/panel`;
 var TEST_PROVIDER_ID = `${ADDON_ID}/test-provider`;
-var statusStore = experimental_getStatusStore(STATUS_TYPE_ID);
-var testProviderStore = experimental_getTestProviderStore(TEST_PROVIDER_ID);
-testProviderStore.onClearAll(() => {
-  statusStore.unset();
-});
+var _getStatusStore = managerApi.experimental_getStatusStore;
+var _getTestProviderStore = managerApi.experimental_getTestProviderStore;
+var _useTestProviderStore = managerApi.experimental_useTestProviderStore ?? null;
+var hasTestProvider = !!(_getStatusStore && _getTestProviderStore);
+var statusStore = hasTestProvider ? _getStatusStore(STATUS_TYPE_ID) : null;
+var testProviderStore = hasTestProvider ? _getTestProviderStore(TEST_PROVIDER_ID) : null;
+if (testProviderStore && statusStore) {
+  testProviderStore.onClearAll(() => {
+    statusStore.unset();
+  });
+}
+var ActionList = null;
+var Form = null;
+try {
+  const components = __require("storybook/internal/components");
+  ActionList = components.ActionList ?? null;
+  Form = components.Form ?? null;
+} catch {
+}
 var Title = () => {
   const [count, setCount] = React.useState(0);
-  useChannel({
+  useChannel2({
     [STORY_FINISHED]: ({ reporters }) => {
       const report = reporters.find((r) => r.type === "accesslint");
       const violations = report?.result?.violations;
@@ -224,9 +244,7 @@ var Title = () => {
     color: "inherit"
   } }, /* @__PURE__ */ React.createElement("span", { style: { color: "#fff" } }, count)));
 };
-var StyledActionList = styled(ActionList)({
-  padding: 0
-});
+var StyledActionList = ActionList ? styled(ActionList)({ padding: 0 }) : styled.div({ padding: 0 });
 var StatusDot = styled.div(
   {
     width: 6,
@@ -248,33 +266,34 @@ var StatusDot = styled.div(
 var TestProviderWidget = () => {
   const [violationCount, setViolationCount] = React.useState(null);
   const api = useStorybookApi();
-  const providerState = experimental_useTestProviderStore(
-    (state) => state[TEST_PROVIDER_ID]
-  );
+  const providerState = _useTestProviderStore ? _useTestProviderStore((state) => state[TEST_PROVIDER_ID]) : null;
   React.useEffect(() => {
+    if (!statusStore) return;
     const unsub = statusStore.onSelect(() => {
       api.setSelectedPanel(PANEL_ID);
       api.togglePanel(true);
     });
     return unsub;
   }, [api]);
-  useChannel({
+  useChannel2({
     [STORY_FINISHED]: ({ storyId, reporters }) => {
       const report = reporters.find((r) => r.type === "accesslint");
       if (!report) return;
       const violations = report.result?.violations ?? [];
       setViolationCount(violations.length);
-      const hasViolations2 = violations.length > 0;
-      const isWarning = report.status === "warning";
-      statusStore.set([{
-        value: 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",
-        sidebarContextMenu: true
-      }]);
-      if (providerState === "test-provider-state:running") {
+      if (statusStore) {
+        const hasViolations2 = violations.length > 0;
+        const isWarning = report.status === "warning";
+        statusStore.set([{
+          value: 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",
+          sidebarContextMenu: true
+        }]);
+      }
+      if (testProviderStore && providerState === "test-provider-state:running") {
         testProviderStore.setState("test-provider-state:succeeded");
       }
     }
@@ -285,20 +304,32 @@ var TestProviderWidget = () => {
     api.setSelectedPanel(PANEL_ID);
     api.togglePanel(true);
   };
-  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,
+  if (ActionList && Form) {
+    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: violationCount === null ? "AccessLint: not run yet" : hasViolations ? `AccessLint: ${violationCount} violation${violationCount === 1 ? "" : "s"}` : "AccessLint: no violations",
+        disabled: violationCount === null,
+        onClick: openPanel
+      },
+      hasViolations ? violationCount : null,
+      /* @__PURE__ */ React.createElement(StatusDot, { status })
+    )));
+  }
+  return /* @__PURE__ */ React.createElement(
+    StyledActionList,
     {
-      ariaLabel: violationCount === null ? "AccessLint: not run yet" : hasViolations ? `AccessLint: ${violationCount} violation${violationCount === 1 ? "" : "s"}` : "AccessLint: no violations",
-      disabled: violationCount === null,
+      style: { display: "flex", alignItems: "center", gap: 8, padding: "6px 8px", cursor: "pointer" },
       onClick: openPanel
     },
-    hasViolations ? violationCount : null,
-    /* @__PURE__ */ React.createElement(StatusDot, { status })
-  )));
+    /* @__PURE__ */ React.createElement(StatusDot, { status }),
+    /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12 } }, "AccessLint"),
+    hasViolations && /* @__PURE__ */ React.createElement("span", { style: { fontSize: 11, fontWeight: "bold" } }, violationCount)
+  );
 };
 var SidebarContextMenu = ({ context }) => {
   const api = useStorybookApi();
-  if (context.type !== "story") return null;
+  if (context.type !== "story" || !ActionList) return null;
   return /* @__PURE__ */ React.createElement(
     ActionList.Item,
     {
@@ -318,9 +349,11 @@ addons.register(ADDON_ID, () => {
     render: Panel,
     paramKey: PARAM_KEY
   });
-  addons.add(TEST_PROVIDER_ID, {
-    type: types.experimental_TEST_PROVIDER,
-    render: () => /* @__PURE__ */ React.createElement(TestProviderWidget, null),
-    sidebarContextMenu: ({ context }) => /* @__PURE__ */ React.createElement(SidebarContextMenu, { context })
-  });
+  if (hasTestProvider && types.experimental_TEST_PROVIDER) {
+    addons.add(TEST_PROVIDER_ID, {
+      type: types.experimental_TEST_PROVIDER,
+      render: () => /* @__PURE__ */ React.createElement(TestProviderWidget, null),
+      sidebarContextMenu: ({ context }) => /* @__PURE__ */ React.createElement(SidebarContextMenu, { context })
+    });
+  }
 });

package/dist/matchers.cjs

@@ -1,57 +1,14 @@
 'use strict';
 
-var core = require('@accesslint/core');
+var matchers = require('@accesslint/vitest/matchers');
 
-// src/matchers.ts
-function scopeViolationsToElement(violations, root) {
-  return violations.filter((v) => {
-    try {
-      const el = root.ownerDocument.querySelector(v.selector);
-      return el && root.contains(el);
-    } catch {
-      return false;
-    }
-  });
-}
-function formatViolation(v) {
-  const rule = core.getRuleById(v.ruleId);
-  const wcag = rule?.wcag?.length ? ` (${rule.wcag.join(", ")})` : "";
-  const level = rule?.level ? ` [${rule.level}]` : "";
-  return `  ${v.ruleId}${level}${wcag}: ${v.message}
-    ${v.selector}`;
-}
-var toBeAccessible = function(received, options) {
-  if (!(received instanceof Element)) {
-    return {
-      pass: false,
-      message: () => `toBeAccessible() expects an Element (e.g. canvasElement), but received ${typeof received}`
-    };
-  }
-  if (options?.disabledRules) {
-    core.configureRules({ disabledRules: options.disabledRules });
-  }
-  const result = core.runAudit(received.ownerDocument);
-  const scoped = scopeViolationsToElement(result.violations, received);
-  const pass = scoped.length === 0;
-  return {
-    pass,
-    message: () => {
-      if (pass) {
-        return "Expected element to have accessibility violations, but none were found";
-      }
-      const summary = scoped.map(formatViolation).join("\n\n");
-      return `Expected element to have no accessibility violations, but found ${scoped.length}:
 
-${summary}`;
-    }
-  };
-};
-if (typeof globalThis !== "undefined") {
-  const g = globalThis;
-  const expectFn = g.expect;
-  if (expectFn?.extend) {
-    expectFn.extend({ toBeAccessible });
-  }
-}
 
-exports.toBeAccessible = toBeAccessible;
+Object.defineProperty(exports, "accesslintMatchers", {
+  enumerable: true,
+  get: function () { return matchers.accesslintMatchers; }
+});
+Object.defineProperty(exports, "toBeAccessible", {
+  enumerable: true,
+  get: function () { return matchers.toBeAccessible; }
+});

package/dist/matchers.d.cts

@@ -1,11 +1 @@
-interface AccessibleMatcherOptions {
-    disabledRules?: string[];
-}
-declare const toBeAccessible: (this: {
-    isNot: boolean;
-}, received: Element, options?: AccessibleMatcherOptions) => {
-    pass: boolean;
-    message: () => string;
-};
-
-export { type AccessibleMatcherOptions, toBeAccessible };
+export { AccessibleMatcherOptions, accesslintMatchers, toBeAccessible } from '@accesslint/vitest/matchers';

package/dist/matchers.d.ts

@@ -1,11 +1 @@
-interface AccessibleMatcherOptions {
-    disabledRules?: string[];
-}
-declare const toBeAccessible: (this: {
-    isNot: boolean;
-}, received: Element, options?: AccessibleMatcherOptions) => {
-    pass: boolean;
-    message: () => string;
-};
-
-export { type AccessibleMatcherOptions, toBeAccessible };
+export { AccessibleMatcherOptions, accesslintMatchers, toBeAccessible } from '@accesslint/vitest/matchers';

package/dist/matchers.js

@@ -1,55 +1 @@
-import { configureRules, runAudit, getRuleById } from '@accesslint/core';
-
-// src/matchers.ts
-function scopeViolationsToElement(violations, root) {
-  return violations.filter((v) => {
-    try {
-      const el = root.ownerDocument.querySelector(v.selector);
-      return el && root.contains(el);
-    } catch {
-      return false;
-    }
-  });
-}
-function formatViolation(v) {
-  const rule = getRuleById(v.ruleId);
-  const wcag = rule?.wcag?.length ? ` (${rule.wcag.join(", ")})` : "";
-  const level = rule?.level ? ` [${rule.level}]` : "";
-  return `  ${v.ruleId}${level}${wcag}: ${v.message}
-    ${v.selector}`;
-}
-var toBeAccessible = function(received, options) {
-  if (!(received instanceof Element)) {
-    return {
-      pass: false,
-      message: () => `toBeAccessible() expects an Element (e.g. canvasElement), but received ${typeof received}`
-    };
-  }
-  if (options?.disabledRules) {
-    configureRules({ disabledRules: options.disabledRules });
-  }
-  const result = runAudit(received.ownerDocument);
-  const scoped = scopeViolationsToElement(result.violations, received);
-  const pass = scoped.length === 0;
-  return {
-    pass,
-    message: () => {
-      if (pass) {
-        return "Expected element to have accessibility violations, but none were found";
-      }
-      const summary = scoped.map(formatViolation).join("\n\n");
-      return `Expected element to have no accessibility violations, but found ${scoped.length}:
-
-${summary}`;
-    }
-  };
-};
-if (typeof globalThis !== "undefined") {
-  const g = globalThis;
-  const expectFn = g.expect;
-  if (expectFn?.extend) {
-    expectFn.extend({ toBeAccessible });
-  }
-}
-
-export { toBeAccessible };
+export { accesslintMatchers, toBeAccessible } from '@accesslint/vitest/matchers';

package/dist/portable.cjs

@@ -16,6 +16,10 @@ __export(preview_exports, {
 core.configureRules({
   disabledRules: ["accesslint-045"]
 });
+var BUDGET_MS = 12;
+function yieldToMain() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
 function scopeViolations(violations) {
   const root = document.getElementById("storybook-root");
   if (!root) return violations;
@@ -53,8 +57,14 @@ var afterEach = async ({
   if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
   if (viewMode !== "story") return;
   if (tags?.includes("no-a11y")) return;
-  const result = core.runAudit(document);
-  const scoped = scopeViolations(result.violations);
+  const skipTags = typeof __ACCESSLINT_SKIP_TAGS__ !== "undefined" ? __ACCESSLINT_SKIP_TAGS__ : [];
+  if (skipTags.length > 0 && tags?.some((t) => skipTags.includes(t))) return;
+  const audit = core.createChunkedAudit(document);
+  while (audit.processChunk(BUDGET_MS)) {
+    await yieldToMain();
+  }
+  const violations = audit.getViolations();
+  const scoped = scopeViolations(violations);
   const enriched = enrichViolations(scoped);
   const hasViolations = enriched.length > 0;
   const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
@@ -63,7 +73,7 @@ var afterEach = async ({
     version: 1,
     result: {
       violations: enriched,
-      ruleCount: result.ruleCount
+      ruleCount: core.getActiveRules().length
     },
     status: hasViolations ? mode : "passed"
   });

package/dist/portable.d.cts

@@ -4,7 +4,7 @@ declare const afterEach: ({ reporting, parameters, viewMode, tags, }: {
     };
     parameters: Record<string, unknown>;
     viewMode: string;
-    tags: string[];
+    tags?: string[];
 }) => Promise<void>;
 
 declare const accesslintAnnotations_afterEach: typeof afterEach;

package/dist/portable.d.ts

@@ -4,7 +4,7 @@ declare const afterEach: ({ reporting, parameters, viewMode, tags, }: {
     };
     parameters: Record<string, unknown>;
     viewMode: string;
-    tags: string[];
+    tags?: string[];
 }) => Promise<void>;
 
 declare const accesslintAnnotations_afterEach: typeof afterEach;

package/dist/portable.js

@@ -1,4 +1,4 @@
-import { configureRules, runAudit, getRuleById } from '@accesslint/core';
+import { configureRules, createChunkedAudit, getActiveRules, getRuleById } from '@accesslint/core';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -14,6 +14,10 @@ __export(preview_exports, {
 configureRules({
   disabledRules: ["accesslint-045"]
 });
+var BUDGET_MS = 12;
+function yieldToMain() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
 function scopeViolations(violations) {
   const root = document.getElementById("storybook-root");
   if (!root) return violations;
@@ -51,8 +55,14 @@ var afterEach = async ({
   if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
   if (viewMode !== "story") return;
   if (tags?.includes("no-a11y")) return;
-  const result = runAudit(document);
-  const scoped = scopeViolations(result.violations);
+  const skipTags = typeof __ACCESSLINT_SKIP_TAGS__ !== "undefined" ? __ACCESSLINT_SKIP_TAGS__ : [];
+  if (skipTags.length > 0 && tags?.some((t) => skipTags.includes(t))) return;
+  const audit = createChunkedAudit(document);
+  while (audit.processChunk(BUDGET_MS)) {
+    await yieldToMain();
+  }
+  const violations = audit.getViolations();
+  const scoped = scopeViolations(violations);
   const enriched = enrichViolations(scoped);
   const hasViolations = enriched.length > 0;
   const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
@@ -61,7 +71,7 @@ var afterEach = async ({
     version: 1,
     result: {
       violations: enriched,
-      ruleCount: result.ruleCount
+      ruleCount: getActiveRules().length
     },
     status: hasViolations ? mode : "passed"
   });

package/dist/preview.cjs

@@ -6,6 +6,10 @@ var core = require('@accesslint/core');
 core.configureRules({
   disabledRules: ["accesslint-045"]
 });
+var BUDGET_MS = 12;
+function yieldToMain() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
 function scopeViolations(violations) {
   const root = document.getElementById("storybook-root");
   if (!root) return violations;
@@ -43,8 +47,14 @@ var afterEach = async ({
   if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
   if (viewMode !== "story") return;
   if (tags?.includes("no-a11y")) return;
-  const result = core.runAudit(document);
-  const scoped = scopeViolations(result.violations);
+  const skipTags = typeof __ACCESSLINT_SKIP_TAGS__ !== "undefined" ? __ACCESSLINT_SKIP_TAGS__ : [];
+  if (skipTags.length > 0 && tags?.some((t) => skipTags.includes(t))) return;
+  const audit = core.createChunkedAudit(document);
+  while (audit.processChunk(BUDGET_MS)) {
+    await yieldToMain();
+  }
+  const violations = audit.getViolations();
+  const scoped = scopeViolations(violations);
   const enriched = enrichViolations(scoped);
   const hasViolations = enriched.length > 0;
   const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
@@ -53,7 +63,7 @@ var afterEach = async ({
     version: 1,
     result: {
       violations: enriched,
-      ruleCount: result.ruleCount
+      ruleCount: core.getActiveRules().length
     },
     status: hasViolations ? mode : "passed"
   });

package/dist/preview.d.cts

@@ -4,7 +4,7 @@ declare const afterEach: ({ reporting, parameters, viewMode, tags, }: {
     };
     parameters: Record<string, unknown>;
     viewMode: string;
-    tags: string[];
+    tags?: string[];
 }) => Promise<void>;
 
 export { afterEach };

package/dist/preview.d.ts

@@ -4,7 +4,7 @@ declare const afterEach: ({ reporting, parameters, viewMode, tags, }: {
     };
     parameters: Record<string, unknown>;
     viewMode: string;
-    tags: string[];
+    tags?: string[];
 }) => Promise<void>;
 
 export { afterEach };

package/dist/preview.js

@@ -1,9 +1,13 @@
-import { configureRules, runAudit, getRuleById } from '@accesslint/core';
+import { configureRules, createChunkedAudit, getActiveRules, getRuleById } from '@accesslint/core';
 
 // src/preview.ts
 configureRules({
   disabledRules: ["accesslint-045"]
 });
+var BUDGET_MS = 12;
+function yieldToMain() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
 function scopeViolations(violations) {
   const root = document.getElementById("storybook-root");
   if (!root) return violations;
@@ -41,8 +45,14 @@ var afterEach = async ({
   if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
   if (viewMode !== "story") return;
   if (tags?.includes("no-a11y")) return;
-  const result = runAudit(document);
-  const scoped = scopeViolations(result.violations);
+  const skipTags = typeof __ACCESSLINT_SKIP_TAGS__ !== "undefined" ? __ACCESSLINT_SKIP_TAGS__ : [];
+  if (skipTags.length > 0 && tags?.some((t) => skipTags.includes(t))) return;
+  const audit = createChunkedAudit(document);
+  while (audit.processChunk(BUDGET_MS)) {
+    await yieldToMain();
+  }
+  const violations = audit.getViolations();
+  const scoped = scopeViolations(violations);
   const enriched = enrichViolations(scoped);
   const hasViolations = enriched.length > 0;
   const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
@@ -51,7 +61,7 @@ var afterEach = async ({
     version: 1,
     result: {
       violations: enriched,
-      ruleCount: result.ruleCount
+      ruleCount: getActiveRules().length
     },
     status: hasViolations ? mode : "passed"
   });

package/dist/vitest-setup.cjs

@@ -1,7 +1,10 @@
 'use strict';
 
+var test = require('storybook/test');
+var vitest = require('vitest');
 var previewApi = require('storybook/preview-api');
 var core = require('@accesslint/core');
+var matchers = require('@accesslint/vitest/matchers');
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -17,6 +20,10 @@ __export(preview_exports, {
 core.configureRules({
   disabledRules: ["accesslint-045"]
 });
+var BUDGET_MS = 12;
+function yieldToMain() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
 function scopeViolations(violations) {
   const root = document.getElementById("storybook-root");
   if (!root) return violations;
@@ -54,8 +61,14 @@ var afterEach = async ({
   if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
   if (viewMode !== "story") return;
   if (tags?.includes("no-a11y")) return;
-  const result = core.runAudit(document);
-  const scoped = scopeViolations(result.violations);
+  const skipTags = typeof __ACCESSLINT_SKIP_TAGS__ !== "undefined" ? __ACCESSLINT_SKIP_TAGS__ : [];
+  if (skipTags.length > 0 && tags?.some((t) => skipTags.includes(t))) return;
+  const audit = core.createChunkedAudit(document);
+  while (audit.processChunk(BUDGET_MS)) {
+    await yieldToMain();
+  }
+  const violations = audit.getViolations();
+  const scoped = scopeViolations(violations);
   const enriched = enrichViolations(scoped);
   const hasViolations = enriched.length > 0;
   const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
@@ -64,13 +77,13 @@ var afterEach = async ({
     version: 1,
     result: {
       violations: enriched,
-      ruleCount: result.ruleCount
+      ruleCount: core.getActiveRules().length
     },
     status: hasViolations ? mode : "passed"
   });
 };
-
-// src/vitest-setup.ts
+test.expect.extend(matchers.accesslintMatchers);
+vitest.expect.extend(matchers.accesslintMatchers);
 var g = globalThis;
 var existing = g.globalProjectAnnotations;
 g.globalProjectAnnotations = existing ? previewApi.composeConfigs([existing, preview_exports]) : previewApi.composeConfigs([preview_exports]);

package/dist/vitest-setup.d.cts

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

package/dist/vitest-setup.d.ts

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

package/dist/vitest-setup.js

@@ -1,5 +1,8 @@
+import { expect } from 'storybook/test';
+import { expect as expect$1 } from 'vitest';
 import { composeConfigs } from 'storybook/preview-api';
-import { configureRules, runAudit, getRuleById } from '@accesslint/core';
+import { configureRules, createChunkedAudit, getActiveRules, getRuleById } from '@accesslint/core';
+import { accesslintMatchers } from '@accesslint/vitest/matchers';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -15,6 +18,10 @@ __export(preview_exports, {
 configureRules({
   disabledRules: ["accesslint-045"]
 });
+var BUDGET_MS = 12;
+function yieldToMain() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
 function scopeViolations(violations) {
   const root = document.getElementById("storybook-root");
   if (!root) return violations;
@@ -52,8 +59,14 @@ var afterEach = async ({
   if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
   if (viewMode !== "story") return;
   if (tags?.includes("no-a11y")) return;
-  const result = runAudit(document);
-  const scoped = scopeViolations(result.violations);
+  const skipTags = typeof __ACCESSLINT_SKIP_TAGS__ !== "undefined" ? __ACCESSLINT_SKIP_TAGS__ : [];
+  if (skipTags.length > 0 && tags?.some((t) => skipTags.includes(t))) return;
+  const audit = createChunkedAudit(document);
+  while (audit.processChunk(BUDGET_MS)) {
+    await yieldToMain();
+  }
+  const violations = audit.getViolations();
+  const scoped = scopeViolations(violations);
   const enriched = enrichViolations(scoped);
   const hasViolations = enriched.length > 0;
   const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
@@ -62,13 +75,13 @@ var afterEach = async ({
     version: 1,
     result: {
       violations: enriched,
-      ruleCount: result.ruleCount
+      ruleCount: getActiveRules().length
     },
     status: hasViolations ? mode : "passed"
   });
 };
-
-// src/vitest-setup.ts
+expect.extend(accesslintMatchers);
+expect$1.extend(accesslintMatchers);
 var g = globalThis;
 var existing = g.globalProjectAnnotations;
 g.globalProjectAnnotations = existing ? composeConfigs([existing, preview_exports]) : composeConfigs([preview_exports]);

package/matchers.d.ts

@@ -1,4 +1,4 @@
-import type { AccessibleMatcherOptions } from "./dist/matchers";
+import type { AccessibleMatcherOptions } from "@accesslint/vitest/matchers";
 
 declare module "vitest" {
   interface Assertion<T> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@accesslint/storybook-addon",
-  "version": "0.7.0",
+  "version": "0.8.2",
   "description": "Catch accessibility violations in your Storybook stories as you develop",
   "license": "MIT",
   "publishConfig": {
@@ -30,6 +30,7 @@
       "require": "./dist/vitest-plugin.cjs"
     },
     "./vitest-setup": {
+      "types": "./dist/vitest-setup.d.ts",
       "import": "./dist/vitest-setup.js",
       "require": "./dist/vitest-setup.cjs"
     },
@@ -57,17 +58,20 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@accesslint/core": "^0.6.5"
+    "@accesslint/core": "^0.6.5",
+    "@accesslint/vitest": "^0.1.3"
   },
   "devDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^10.2.0",
     "tsup": "^8.4.0",
-    "typescript": "^5.7.0"
+    "typescript": "^5.7.0",
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
-    "storybook": "^10.0.0"
+    "storybook": "^9.0.0 || ^10.0.0",
+    "vitest": ">=3.0.0"
   },
   "keywords": [
     "storybook-addon",