@accesslint/storybook-addon 0.8.10 → 0.8.12
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 +32 -34
- 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/dist/preview.d.ts
CHANGED
|
@@ -1,22 +1,37 @@
|
|
|
1
|
+
import { AuditOptions } from "@accesslint/core";
|
|
2
|
+
|
|
3
|
+
//#region src/preview.d.ts
|
|
1
4
|
declare const initialGlobals: {
|
|
2
|
-
|
|
5
|
+
accesslint: {};
|
|
3
6
|
};
|
|
4
7
|
declare const parameters: {
|
|
5
|
-
|
|
8
|
+
accesslint: {};
|
|
6
9
|
};
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
10
|
+
/**
|
|
11
|
+
* Merge additional audit options (disabledRules, additionalRules, includeAAA,
|
|
12
|
+
* componentMode, locale) into the options used for every Storybook audit.
|
|
13
|
+
* Call from your `.storybook/preview.ts` after importing the addon.
|
|
14
|
+
*/
|
|
15
|
+
declare function setAuditOptions(options: AuditOptions): void;
|
|
16
|
+
declare const afterEach: ({
|
|
17
|
+
reporting,
|
|
18
|
+
parameters,
|
|
19
|
+
viewMode,
|
|
20
|
+
tags,
|
|
21
|
+
id
|
|
22
|
+
}: {
|
|
23
|
+
reporting: {
|
|
24
|
+
addReport: (report: {
|
|
25
|
+
type: string;
|
|
26
|
+
version?: number;
|
|
27
|
+
result: unknown;
|
|
28
|
+
status: "failed" | "passed" | "warning";
|
|
29
|
+
}) => void;
|
|
30
|
+
};
|
|
31
|
+
parameters: Record<string, unknown>;
|
|
32
|
+
viewMode: string;
|
|
33
|
+
tags?: string[];
|
|
34
|
+
id?: string;
|
|
20
35
|
}) => Promise<void>;
|
|
21
|
-
|
|
22
|
-
export { afterEach, initialGlobals, parameters };
|
|
36
|
+
//#endregion
|
|
37
|
+
export { afterEach, initialGlobals, parameters, setAuditOptions };
|
package/dist/preview.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import { a as setAuditOptions, n as initialGlobals, r as parameters, t as afterEach } from "./preview-B3suakeJ.js";
|
|
2
|
+
export { afterEach, initialGlobals, parameters, setAuditOptions };
|
package/dist/vitest-plugin.cjs
CHANGED
|
@@ -1,30 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
|
|
4
|
-
// src/vitest-plugin.ts
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
//#region src/vitest-plugin.ts
|
|
5
3
|
function accesslintTest(options) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
if (options?.tags) {
|
|
21
|
-
config.define = {
|
|
22
|
-
"__ACCESSLINT_SKIP_TAGS__": JSON.stringify(options.tags.skip ?? [])
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
return config;
|
|
26
|
-
}
|
|
27
|
-
};
|
|
4
|
+
const distDir = new URL(".", require("url").pathToFileURL(__filename).href).pathname;
|
|
5
|
+
return {
|
|
6
|
+
name: "@accesslint/storybook-addon",
|
|
7
|
+
config() {
|
|
8
|
+
const config = {
|
|
9
|
+
server: { fs: { allow: [distDir] } },
|
|
10
|
+
test: { setupFiles: ["@accesslint/storybook-addon/vitest-setup"] }
|
|
11
|
+
};
|
|
12
|
+
if (options?.tags) config.define = { __ACCESSLINT_SKIP_TAGS__: JSON.stringify(options.tags.skip ?? []) };
|
|
13
|
+
return config;
|
|
14
|
+
}
|
|
15
|
+
};
|
|
28
16
|
}
|
|
29
|
-
|
|
17
|
+
//#endregion
|
|
30
18
|
exports.accesslintTest = accesslintTest;
|
package/dist/vitest-plugin.d.cts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
//#region src/vitest-plugin.d.ts
|
|
1
2
|
/**
|
|
2
3
|
* Vitest plugin that automatically registers AccessLint's afterEach annotation
|
|
3
4
|
* so that running component tests produces per-story accessibility badges.
|
|
@@ -12,20 +13,20 @@
|
|
|
12
13
|
* });
|
|
13
14
|
*/
|
|
14
15
|
interface AccessLintTestOptions {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
16
|
+
/**
|
|
17
|
+
* Tags-based filtering for which stories to audit.
|
|
18
|
+
*
|
|
19
|
+
* accesslintTest({ tags: { skip: ["skip-accesslint"] } })
|
|
20
|
+
*
|
|
21
|
+
* Stories with any of the `skip` tags will not be audited.
|
|
22
|
+
*/
|
|
23
|
+
tags?: {
|
|
24
|
+
skip?: string[];
|
|
25
|
+
};
|
|
25
26
|
}
|
|
26
27
|
declare function accesslintTest(options?: AccessLintTestOptions): {
|
|
27
|
-
|
|
28
|
-
|
|
28
|
+
name: string;
|
|
29
|
+
config: () => Record<string, unknown>;
|
|
29
30
|
};
|
|
30
|
-
|
|
31
|
-
export {
|
|
31
|
+
//#endregion
|
|
32
|
+
export { AccessLintTestOptions, accesslintTest };
|
package/dist/vitest-plugin.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
//#region src/vitest-plugin.d.ts
|
|
1
2
|
/**
|
|
2
3
|
* Vitest plugin that automatically registers AccessLint's afterEach annotation
|
|
3
4
|
* so that running component tests produces per-story accessibility badges.
|
|
@@ -12,20 +13,20 @@
|
|
|
12
13
|
* });
|
|
13
14
|
*/
|
|
14
15
|
interface AccessLintTestOptions {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
16
|
+
/**
|
|
17
|
+
* Tags-based filtering for which stories to audit.
|
|
18
|
+
*
|
|
19
|
+
* accesslintTest({ tags: { skip: ["skip-accesslint"] } })
|
|
20
|
+
*
|
|
21
|
+
* Stories with any of the `skip` tags will not be audited.
|
|
22
|
+
*/
|
|
23
|
+
tags?: {
|
|
24
|
+
skip?: string[];
|
|
25
|
+
};
|
|
25
26
|
}
|
|
26
27
|
declare function accesslintTest(options?: AccessLintTestOptions): {
|
|
27
|
-
|
|
28
|
-
|
|
28
|
+
name: string;
|
|
29
|
+
config: () => Record<string, unknown>;
|
|
29
30
|
};
|
|
30
|
-
|
|
31
|
-
export {
|
|
31
|
+
//#endregion
|
|
32
|
+
export { AccessLintTestOptions, accesslintTest };
|
package/dist/vitest-plugin.js
CHANGED
|
@@ -1,27 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
//#region src/vitest-plugin.ts
|
|
2
2
|
function accesslintTest(options) {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
if (options?.tags) {
|
|
18
|
-
config.define = {
|
|
19
|
-
"__ACCESSLINT_SKIP_TAGS__": JSON.stringify(options.tags.skip ?? [])
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
return config;
|
|
23
|
-
}
|
|
24
|
-
};
|
|
3
|
+
const distDir = new URL(".", import.meta.url).pathname;
|
|
4
|
+
return {
|
|
5
|
+
name: "@accesslint/storybook-addon",
|
|
6
|
+
config() {
|
|
7
|
+
const config = {
|
|
8
|
+
server: { fs: { allow: [distDir] } },
|
|
9
|
+
test: { setupFiles: ["@accesslint/storybook-addon/vitest-setup"] }
|
|
10
|
+
};
|
|
11
|
+
if (options?.tags) config.define = { __ACCESSLINT_SKIP_TAGS__: JSON.stringify(options.tags.skip ?? []) };
|
|
12
|
+
return config;
|
|
13
|
+
}
|
|
14
|
+
};
|
|
25
15
|
}
|
|
26
|
-
|
|
16
|
+
//#endregion
|
|
27
17
|
export { accesslintTest };
|
package/dist/vitest-setup.cjs
CHANGED
|
@@ -1,118 +1,141 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var test = require('storybook/test');
|
|
4
|
-
var vitest = require('vitest');
|
|
5
|
-
var previewApi = require('storybook/preview-api');
|
|
6
|
-
var core = require('@accesslint/core');
|
|
7
|
-
var matchers = require('@accesslint/vitest/matchers');
|
|
8
|
-
|
|
1
|
+
//#region \0rolldown/runtime.js
|
|
9
2
|
var __defProp = Object.defineProperty;
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
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;
|
|
13
11
|
};
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
12
|
+
//#endregion
|
|
13
|
+
let storybook_test = require("storybook/test");
|
|
14
|
+
let vitest = require("vitest");
|
|
15
|
+
let storybook_preview_api = require("storybook/preview-api");
|
|
16
|
+
let _accesslint_core = require("@accesslint/core");
|
|
17
|
+
let _accesslint_vitest_matchers = require("@accesslint/vitest/matchers");
|
|
18
|
+
const RESULT_EVENT = `accesslint/a11y/result`;
|
|
19
|
+
const HIGHLIGHT_ADDON_ID = "storybook/highlight";
|
|
20
|
+
`${HIGHLIGHT_ADDON_ID}`;
|
|
21
|
+
`${HIGHLIGHT_ADDON_ID}`;
|
|
22
|
+
//#endregion
|
|
23
|
+
//#region src/preview.ts
|
|
24
|
+
var preview_exports = /* @__PURE__ */ __exportAll({
|
|
25
|
+
afterEach: () => afterEach,
|
|
26
|
+
initialGlobals: () => initialGlobals,
|
|
27
|
+
parameters: () => parameters,
|
|
28
|
+
setAuditOptions: () => setAuditOptions
|
|
21
29
|
});
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
|
|
30
|
+
const initialGlobals = { accesslint: {} };
|
|
31
|
+
const parameters = { accesslint: {} };
|
|
32
|
+
let AUDIT_OPTIONS = { disabledRules: ["accesslint-045"] };
|
|
33
|
+
/**
|
|
34
|
+
* Merge additional audit options (disabledRules, additionalRules, includeAAA,
|
|
35
|
+
* componentMode, locale) into the options used for every Storybook audit.
|
|
36
|
+
* Call from your `.storybook/preview.ts` after importing the addon.
|
|
37
|
+
*/
|
|
38
|
+
function setAuditOptions(options) {
|
|
39
|
+
AUDIT_OPTIONS = {
|
|
40
|
+
...AUDIT_OPTIONS,
|
|
41
|
+
...options,
|
|
42
|
+
disabledRules: [...AUDIT_OPTIONS.disabledRules ?? [], ...options.disabledRules ?? []],
|
|
43
|
+
additionalRules: [...AUDIT_OPTIONS.additionalRules ?? [], ...options.additionalRules ?? []]
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
const BUDGET_MS = 12;
|
|
38
47
|
function yieldToMain() {
|
|
39
|
-
|
|
48
|
+
return new Promise((resolve) => setTimeout(resolve, 0));
|
|
40
49
|
}
|
|
41
50
|
function scopeViolations(violations) {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
const root = document.getElementById("storybook-root");
|
|
52
|
+
if (!root) return violations;
|
|
53
|
+
return violations.filter((v) => {
|
|
54
|
+
const local = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
|
|
55
|
+
try {
|
|
56
|
+
const el = document.querySelector(local);
|
|
57
|
+
return el && root.contains(el);
|
|
58
|
+
} catch {
|
|
59
|
+
return false;
|
|
60
|
+
}
|
|
61
|
+
});
|
|
53
62
|
}
|
|
54
63
|
function enrichViolations(violations) {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
});
|
|
64
|
+
return violations.map((v) => {
|
|
65
|
+
const rule = (0, _accesslint_core.getRuleById)(v.ruleId);
|
|
66
|
+
return {
|
|
67
|
+
...v,
|
|
68
|
+
element: void 0,
|
|
69
|
+
description: rule?.description,
|
|
70
|
+
wcag: rule?.wcag,
|
|
71
|
+
level: rule?.level,
|
|
72
|
+
guidance: rule?.guidance
|
|
73
|
+
};
|
|
74
|
+
});
|
|
67
75
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
});
|
|
76
|
+
const afterEach = async ({ reporting, parameters, viewMode, tags, id }) => {
|
|
77
|
+
const accesslintParam = parameters?.accesslint;
|
|
78
|
+
if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
|
|
79
|
+
if (viewMode !== "story") return;
|
|
80
|
+
const allSkipTags = ["skip-accesslint", ...typeof __ACCESSLINT_SKIP_TAGS__ !== "undefined" ? __ACCESSLINT_SKIP_TAGS__ : []];
|
|
81
|
+
const matchedTag = tags?.find((t) => allSkipTags.includes(t));
|
|
82
|
+
if (matchedTag) {
|
|
83
|
+
const result = {
|
|
84
|
+
skipped: true,
|
|
85
|
+
reason: matchedTag
|
|
86
|
+
};
|
|
87
|
+
storybook_preview_api.addons.getChannel().emit(RESULT_EVENT, {
|
|
88
|
+
storyId: id,
|
|
89
|
+
result
|
|
90
|
+
});
|
|
91
|
+
reporting.addReport({
|
|
92
|
+
type: "accesslint",
|
|
93
|
+
version: 1,
|
|
94
|
+
result,
|
|
95
|
+
status: "passed"
|
|
96
|
+
});
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
const audit = (0, _accesslint_core.createChunkedAudit)(document, AUDIT_OPTIONS);
|
|
100
|
+
while (audit.processChunk(BUDGET_MS)) await yieldToMain();
|
|
101
|
+
const enriched = enrichViolations(scopeViolations(audit.getViolations()));
|
|
102
|
+
const hasViolations = enriched.length > 0;
|
|
103
|
+
const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
|
|
104
|
+
const status = hasViolations ? mode : "passed";
|
|
105
|
+
const result = {
|
|
106
|
+
violations: enriched,
|
|
107
|
+
ruleCount: (0, _accesslint_core.getActiveRules)(AUDIT_OPTIONS).length
|
|
108
|
+
};
|
|
109
|
+
storybook_preview_api.addons.getChannel().emit(RESULT_EVENT, {
|
|
110
|
+
storyId: id,
|
|
111
|
+
result,
|
|
112
|
+
status
|
|
113
|
+
});
|
|
114
|
+
reporting.addReport({
|
|
115
|
+
type: "accesslint",
|
|
116
|
+
version: 1,
|
|
117
|
+
result,
|
|
118
|
+
status
|
|
119
|
+
});
|
|
113
120
|
};
|
|
114
|
-
|
|
115
|
-
vitest.
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
121
|
+
//#endregion
|
|
122
|
+
//#region src/vitest-setup.ts
|
|
123
|
+
/**
|
|
124
|
+
* Vitest setup file added by the accesslintTest() plugin.
|
|
125
|
+
*
|
|
126
|
+
* Merges the AccessLint preview annotations (afterEach, decorators) into
|
|
127
|
+
* globalProjectAnnotations so that AccessLint runs during vitest story tests
|
|
128
|
+
* and reports results as sidebar badges.
|
|
129
|
+
*
|
|
130
|
+
* Also registers the toBeAccessible() custom matcher with Storybook's expect
|
|
131
|
+
* and Vitest's expect for generic tests.
|
|
132
|
+
*
|
|
133
|
+
* This file runs AFTER the user's vitest.setup.js (which calls
|
|
134
|
+
* setProjectAnnotations), so globalProjectAnnotations is already set.
|
|
135
|
+
*/
|
|
136
|
+
storybook_test.expect.extend(_accesslint_vitest_matchers.accesslintMatchers);
|
|
137
|
+
vitest.expect.extend(_accesslint_vitest_matchers.accesslintMatchers);
|
|
138
|
+
const g = globalThis;
|
|
139
|
+
const existing = g.globalProjectAnnotations;
|
|
140
|
+
g.globalProjectAnnotations = existing ? (0, storybook_preview_api.composeConfigs)([existing, preview_exports]) : (0, storybook_preview_api.composeConfigs)([preview_exports]);
|
|
141
|
+
//#endregion
|
package/dist/vitest-setup.d.cts
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { }
|
|
1
|
+
export { };
|
package/dist/vitest-setup.d.ts
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { }
|
|
1
|
+
export { };
|