@accesslint/storybook-addon 0.8.9 → 0.8.11
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.
- package/README.md +26 -30
- package/dist/chunk-pbuEa-1d.js +13 -0
- package/dist/index.cjs +6 -116
- package/dist/index.d.cts +4 -4
- package/dist/index.d.ts +5 -4
- package/dist/index.js +6 -6
- package/dist/manager.d.ts +1 -0
- package/dist/manager.js +404 -395
- package/dist/matchers.cjs +10 -10
- package/dist/matchers.d.cts +2 -1
- package/dist/matchers.d.ts +2 -1
- package/dist/matchers.js +2 -1
- package/dist/portable.cjs +146 -105
- package/dist/portable.d.cts +37 -54
- package/dist/portable.d.ts +37 -54
- package/dist/portable.js +130 -104
- package/dist/preview-B3suakeJ.js +118 -0
- package/dist/preview-B8cvp9pY.cjs +148 -0
- package/dist/preview.cjs +6 -102
- package/dist/preview.d.cts +32 -17
- package/dist/preview.d.ts +32 -17
- package/dist/preview.js +2 -1
- package/dist/vitest-plugin.cjs +15 -27
- package/dist/vitest-plugin.d.cts +15 -14
- package/dist/vitest-plugin.d.ts +15 -14
- package/dist/vitest-plugin.js +14 -24
- package/dist/vitest-setup.cjs +131 -108
- package/dist/vitest-setup.d.cts +1 -2
- package/dist/vitest-setup.d.ts +1 -2
- package/dist/vitest-setup.js +127 -103
- package/package.json +86 -24
- package/dist/chunk-XTEGJNR3.js +0 -110
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
[](https://www.npmjs.com/package/@accesslint/storybook-addon)
|
|
2
|
-
[](https://github.com/AccessLint/accesslint/blob/main/core/LICENSE)
|
|
3
3
|
|
|
4
4
|
# @accesslint/storybook-addon
|
|
5
5
|
|
|
@@ -7,7 +7,6 @@ Catch accessibility violations in your Storybook stories as you develop. Powered
|
|
|
7
7
|
|
|
8
8
|
<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" />
|
|
9
9
|
|
|
10
|
-
|
|
11
10
|
## Getting Started
|
|
12
11
|
|
|
13
12
|
```sh
|
|
@@ -159,11 +158,11 @@ const preview = {
|
|
|
159
158
|
export default preview;
|
|
160
159
|
```
|
|
161
160
|
|
|
162
|
-
| Mode
|
|
163
|
-
|
|
|
164
|
-
| `"error"` | Violations fail the test (default)
|
|
165
|
-
| `"todo"`
|
|
166
|
-
| `"off"`
|
|
161
|
+
| Mode | Behavior |
|
|
162
|
+
| --------- | --------------------------------------------------------------------- |
|
|
163
|
+
| `"error"` | Violations fail the test (default) |
|
|
164
|
+
| `"todo"` | Violations show as warnings — yellow sidebar dots, non-blocking in CI |
|
|
165
|
+
| `"off"` | Skip auditing entirely |
|
|
167
166
|
|
|
168
167
|
Override per-story:
|
|
169
168
|
|
|
@@ -177,13 +176,13 @@ export const Experimental = {
|
|
|
177
176
|
|
|
178
177
|
### Disabling rules
|
|
179
178
|
|
|
180
|
-
|
|
179
|
+
Extend the addon's audit options from your preview file:
|
|
181
180
|
|
|
182
181
|
```ts
|
|
183
182
|
// .storybook/preview.ts
|
|
184
|
-
import {
|
|
183
|
+
import { setAuditOptions } from "@accesslint/storybook-addon/preview";
|
|
185
184
|
|
|
186
|
-
|
|
185
|
+
setAuditOptions({
|
|
187
186
|
disabledRules: ["accesslint-045"], // e.g. disable landmark region rule
|
|
188
187
|
});
|
|
189
188
|
```
|
|
@@ -225,10 +224,7 @@ import { setProjectAnnotations } from "@storybook/react";
|
|
|
225
224
|
import { enableAccessLint } from "@accesslint/storybook-addon/portable";
|
|
226
225
|
import * as previewAnnotations from "./.storybook/preview";
|
|
227
226
|
|
|
228
|
-
const project = setProjectAnnotations([
|
|
229
|
-
previewAnnotations,
|
|
230
|
-
enableAccessLint(),
|
|
231
|
-
]);
|
|
227
|
+
const project = setProjectAnnotations([previewAnnotations, enableAccessLint()]);
|
|
232
228
|
|
|
233
229
|
beforeAll(project.beforeAll);
|
|
234
230
|
```
|
|
@@ -251,36 +247,36 @@ test("Primary button is accessible", async () => {
|
|
|
251
247
|
|
|
252
248
|
### Exports
|
|
253
249
|
|
|
254
|
-
| Entry point
|
|
255
|
-
|
|
|
256
|
-
| `@accesslint/storybook-addon`
|
|
250
|
+
| Entry point | Description |
|
|
251
|
+
| ------------------------------------------- | ----------------------------------------------------- |
|
|
252
|
+
| `@accesslint/storybook-addon` | Main addon registration (manager + preview) |
|
|
257
253
|
| `@accesslint/storybook-addon/vitest-plugin` | `accesslintTest()` Vite plugin for Vitest integration |
|
|
258
|
-
| `@accesslint/storybook-addon/vitest-setup`
|
|
259
|
-
| `@accesslint/storybook-addon/matchers`
|
|
260
|
-
| `@accesslint/storybook-addon/portable`
|
|
261
|
-
| `@accesslint/storybook-addon/preview`
|
|
254
|
+
| `@accesslint/storybook-addon/vitest-setup` | Setup file registered by the Vite plugin |
|
|
255
|
+
| `@accesslint/storybook-addon/matchers` | `toBeAccessible()` custom matcher |
|
|
256
|
+
| `@accesslint/storybook-addon/portable` | `enableAccessLint()` for portable stories |
|
|
257
|
+
| `@accesslint/storybook-addon/preview` | Preview annotations (afterEach hook) |
|
|
262
258
|
|
|
263
259
|
### `accesslintTest(options?)`
|
|
264
260
|
|
|
265
261
|
Vite plugin that registers AccessLint's `afterEach` annotation and the `toBeAccessible()` matcher for Vitest story tests.
|
|
266
262
|
|
|
267
|
-
| Option
|
|
268
|
-
|
|
|
263
|
+
| Option | Type | Description |
|
|
264
|
+
| ----------- | ---------- | -------------------------------------------------- |
|
|
269
265
|
| `tags.skip` | `string[]` | Stories with any of these tags will not be audited |
|
|
270
266
|
|
|
271
267
|
### `parameters.accesslint`
|
|
272
268
|
|
|
273
|
-
| Parameter | Type
|
|
274
|
-
|
|
|
275
|
-
| `test`
|
|
276
|
-
| `disable` | `boolean`
|
|
269
|
+
| Parameter | Type | Default | Description |
|
|
270
|
+
| --------- | ---------------------------- | --------- | ------------------------------------------------------ |
|
|
271
|
+
| `test` | `"todo" \| "error" \| "off"` | `"error"` | Controls how violations are reported |
|
|
272
|
+
| `disable` | `boolean` | `false` | Set to `true` to skip auditing (same as `test: "off"`) |
|
|
277
273
|
|
|
278
274
|
### `toBeAccessible(options?)`
|
|
279
275
|
|
|
280
276
|
Custom matcher for asserting an element has no accessibility violations.
|
|
281
277
|
|
|
282
|
-
| Option
|
|
283
|
-
|
|
|
278
|
+
| Option | Type | Description |
|
|
279
|
+
| --------------- | ---------- | ----------------------------------- |
|
|
284
280
|
| `disabledRules` | `string[]` | Rule IDs to skip for this assertion |
|
|
285
281
|
|
|
286
282
|
### `enableAccessLint()`
|
|
@@ -296,7 +292,7 @@ Returns AccessLint's preview annotations for use with `setProjectAnnotations` in
|
|
|
296
292
|
|
|
297
293
|
## Issues
|
|
298
294
|
|
|
299
|
-
Please report issues in the [AccessLint
|
|
295
|
+
Please report issues in the [AccessLint monorepo](https://github.com/AccessLint/accesslint/issues).
|
|
300
296
|
|
|
301
297
|
## License
|
|
302
298
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
//#region \0rolldown/runtime.js
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __exportAll = (all, no_symbols) => {
|
|
4
|
+
let target = {};
|
|
5
|
+
for (var name in all) __defProp(target, name, {
|
|
6
|
+
get: all[name],
|
|
7
|
+
enumerable: true
|
|
8
|
+
});
|
|
9
|
+
if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
|
|
10
|
+
return target;
|
|
11
|
+
};
|
|
12
|
+
//#endregion
|
|
13
|
+
export { __exportAll as t };
|
package/dist/index.cjs
CHANGED
|
@@ -1,116 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var __defProp = Object.defineProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
// src/preview.ts
|
|
14
|
-
var preview_exports = {};
|
|
15
|
-
__export(preview_exports, {
|
|
16
|
-
afterEach: () => afterEach,
|
|
17
|
-
initialGlobals: () => initialGlobals,
|
|
18
|
-
parameters: () => parameters
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
// src/constants.ts
|
|
22
|
-
var ADDON_ID = "accesslint/a11y";
|
|
23
|
-
var RESULT_EVENT = `${ADDON_ID}/result`;
|
|
24
|
-
|
|
25
|
-
// src/preview.ts
|
|
26
|
-
var initialGlobals = {
|
|
27
|
-
accesslint: {}
|
|
28
|
-
};
|
|
29
|
-
var parameters = {
|
|
30
|
-
accesslint: {}
|
|
31
|
-
};
|
|
32
|
-
core.configureRules({
|
|
33
|
-
disabledRules: ["accesslint-045"]
|
|
34
|
-
});
|
|
35
|
-
var BUDGET_MS = 12;
|
|
36
|
-
function yieldToMain() {
|
|
37
|
-
return new Promise((resolve) => setTimeout(resolve, 0));
|
|
38
|
-
}
|
|
39
|
-
function scopeViolations(violations) {
|
|
40
|
-
const root = document.getElementById("storybook-root");
|
|
41
|
-
if (!root) return violations;
|
|
42
|
-
return violations.filter((v) => {
|
|
43
|
-
const local = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
|
|
44
|
-
try {
|
|
45
|
-
const el = document.querySelector(local);
|
|
46
|
-
return el && root.contains(el);
|
|
47
|
-
} catch {
|
|
48
|
-
return false;
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
function enrichViolations(violations) {
|
|
53
|
-
return violations.map((v) => {
|
|
54
|
-
const rule = core.getRuleById(v.ruleId);
|
|
55
|
-
return {
|
|
56
|
-
...v,
|
|
57
|
-
element: void 0,
|
|
58
|
-
// not serializable
|
|
59
|
-
description: rule?.description,
|
|
60
|
-
wcag: rule?.wcag,
|
|
61
|
-
level: rule?.level,
|
|
62
|
-
guidance: rule?.guidance
|
|
63
|
-
};
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
var afterEach = async ({
|
|
67
|
-
reporting,
|
|
68
|
-
parameters: parameters2,
|
|
69
|
-
viewMode,
|
|
70
|
-
tags,
|
|
71
|
-
id
|
|
72
|
-
}) => {
|
|
73
|
-
const accesslintParam = parameters2?.accesslint;
|
|
74
|
-
if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
|
|
75
|
-
if (viewMode !== "story") return;
|
|
76
|
-
const skipTags = typeof __ACCESSLINT_SKIP_TAGS__ !== "undefined" ? __ACCESSLINT_SKIP_TAGS__ : [];
|
|
77
|
-
const allSkipTags = ["skip-accesslint", ...skipTags];
|
|
78
|
-
const matchedTag = tags?.find((t) => allSkipTags.includes(t));
|
|
79
|
-
if (matchedTag) {
|
|
80
|
-
const result2 = { skipped: true, reason: matchedTag };
|
|
81
|
-
previewApi.addons.getChannel().emit(RESULT_EVENT, { storyId: id, result: result2 });
|
|
82
|
-
reporting.addReport({
|
|
83
|
-
type: "accesslint",
|
|
84
|
-
version: 1,
|
|
85
|
-
result: result2,
|
|
86
|
-
status: "passed"
|
|
87
|
-
});
|
|
88
|
-
return;
|
|
89
|
-
}
|
|
90
|
-
const audit = core.createChunkedAudit(document);
|
|
91
|
-
while (audit.processChunk(BUDGET_MS)) {
|
|
92
|
-
await yieldToMain();
|
|
93
|
-
}
|
|
94
|
-
const violations = audit.getViolations();
|
|
95
|
-
const scoped = scopeViolations(violations);
|
|
96
|
-
const enriched = enrichViolations(scoped);
|
|
97
|
-
const hasViolations = enriched.length > 0;
|
|
98
|
-
const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
|
|
99
|
-
const status = hasViolations ? mode : "passed";
|
|
100
|
-
const result = {
|
|
101
|
-
violations: enriched,
|
|
102
|
-
ruleCount: core.getActiveRules().length
|
|
103
|
-
};
|
|
104
|
-
previewApi.addons.getChannel().emit(RESULT_EVENT, { storyId: id, result, status });
|
|
105
|
-
reporting.addReport({
|
|
106
|
-
type: "accesslint",
|
|
107
|
-
version: 1,
|
|
108
|
-
result,
|
|
109
|
-
status
|
|
110
|
-
});
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
// src/index.ts
|
|
114
|
-
var index_default = () => csf.definePreviewAddon(preview_exports);
|
|
115
|
-
|
|
116
|
-
module.exports = index_default;
|
|
1
|
+
const require_preview = require("./preview-B8cvp9pY.cjs");
|
|
2
|
+
let storybook_internal_csf = require("storybook/internal/csf");
|
|
3
|
+
//#region src/index.ts
|
|
4
|
+
var src_default = () => (0, storybook_internal_csf.definePreviewAddon)(require_preview.preview_exports);
|
|
5
|
+
//#endregion
|
|
6
|
+
module.exports = src_default;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as _$storybook_internal_csf0 from "storybook/internal/csf";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export
|
|
3
|
+
//#region src/index.d.ts
|
|
4
|
+
declare const _default: () => _$storybook_internal_csf0.PreviewAddon<_$storybook_internal_csf0.AddonTypes>;
|
|
5
|
+
export = _default;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as _$storybook_internal_csf0 from "storybook/internal/csf";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
//#region src/index.d.ts
|
|
4
|
+
declare const _default: () => _$storybook_internal_csf0.PreviewAddon<_$storybook_internal_csf0.AddonTypes>;
|
|
5
|
+
//#endregion
|
|
6
|
+
export { _default as default };
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { preview_exports } from
|
|
2
|
-
import { definePreviewAddon } from
|
|
3
|
-
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
export {
|
|
1
|
+
import { i as preview_exports } from "./preview-B3suakeJ.js";
|
|
2
|
+
import { definePreviewAddon } from "storybook/internal/csf";
|
|
3
|
+
//#region src/index.ts
|
|
4
|
+
var src_default = () => definePreviewAddon(preview_exports);
|
|
5
|
+
//#endregion
|
|
6
|
+
export { src_default as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|