@storybook/addon-a11y 10.2.0-alpha.8 → 10.2.0-beta.0
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/dist/_browser-chunks/{chunk-KJORJJOQ.js → chunk-2FVV6YOY.js} +33 -10
- package/dist/_browser-chunks/chunk-7OPMK7TU.js +116 -0
- package/dist/index.js +2 -2
- package/dist/manager.js +31 -103
- package/dist/postinstall.js +6 -6
- package/dist/preview.d.ts +4 -1
- package/dist/preview.js +4 -2
- package/package.json +5 -5
- package/dist/_browser-chunks/chunk-3FKQRDK3.js +0 -13
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
EVENTS,
|
|
3
|
-
PANEL_ID
|
|
4
|
-
|
|
3
|
+
PANEL_ID,
|
|
4
|
+
filterDefs,
|
|
5
|
+
filters
|
|
6
|
+
} from "./chunk-7OPMK7TU.js";
|
|
5
7
|
import {
|
|
6
8
|
__export
|
|
7
9
|
} from "./chunk-4BE7D4DS.js";
|
|
@@ -10,6 +12,7 @@ import {
|
|
|
10
12
|
var preview_exports = {};
|
|
11
13
|
__export(preview_exports, {
|
|
12
14
|
afterEach: () => afterEach,
|
|
15
|
+
decorators: () => decorators,
|
|
13
16
|
initialGlobals: () => initialGlobals,
|
|
14
17
|
parameters: () => parameters
|
|
15
18
|
});
|
|
@@ -22,8 +25,8 @@ import { addons, waitForAnimations } from "storybook/preview-api";
|
|
|
22
25
|
|
|
23
26
|
// src/a11yRunnerUtils.ts
|
|
24
27
|
import { global } from "@storybook/global";
|
|
25
|
-
var { document } = global, withLinkPaths = (results, storyId) => {
|
|
26
|
-
let pathname =
|
|
28
|
+
var { document: document2 } = global, withLinkPaths = (results, storyId) => {
|
|
29
|
+
let pathname = document2.location.pathname.replace(/iframe\.html$/, ""), enhancedResults = { ...results };
|
|
27
30
|
return ["incomplete", "passes", "violations"].forEach((key) => {
|
|
28
31
|
Array.isArray(results[key]) && (enhancedResults[key] = results[key].map((result) => ({
|
|
29
32
|
...result,
|
|
@@ -36,7 +39,7 @@ var { document } = global, withLinkPaths = (results, storyId) => {
|
|
|
36
39
|
};
|
|
37
40
|
|
|
38
41
|
// src/a11yRunner.ts
|
|
39
|
-
var { document:
|
|
42
|
+
var { document: document3 } = global2, channel = addons.getChannel(), DEFAULT_PARAMETERS = { config: {}, options: {} }, DISABLED_RULES = [
|
|
40
43
|
// In component testing, landmarks are not always present
|
|
41
44
|
// and the rule check can cause false positives
|
|
42
45
|
"region"
|
|
@@ -53,7 +56,7 @@ var { document: document2 } = global2, channel = addons.getChannel(), DEFAULT_PA
|
|
|
53
56
|
if (input.element)
|
|
54
57
|
throw new ElementA11yParameterError();
|
|
55
58
|
let context = {
|
|
56
|
-
include:
|
|
59
|
+
include: document3?.body,
|
|
57
60
|
exclude: [".sb-wrapper", "#storybook-docs", "#storybook-highlights-root"]
|
|
58
61
|
// Internal Storybook elements that are always in the document
|
|
59
62
|
};
|
|
@@ -67,7 +70,7 @@ var { document: document2 } = global2, channel = addons.getChannel(), DEFAULT_PA
|
|
|
67
70
|
rules: [...DISABLED_RULES.map((id) => ({ id, enabled: !1 })), ...config?.rules ?? []]
|
|
68
71
|
};
|
|
69
72
|
return axe.configure(configWithDefault), new Promise((resolve, reject) => {
|
|
70
|
-
let highlightsRoot =
|
|
73
|
+
let highlightsRoot = document3?.getElementById("storybook-highlights-root");
|
|
71
74
|
highlightsRoot && (highlightsRoot.style.display = "none");
|
|
72
75
|
let task = async () => {
|
|
73
76
|
try {
|
|
@@ -99,15 +102,33 @@ function getIsVitestStandaloneRun() {
|
|
|
99
102
|
}
|
|
100
103
|
}
|
|
101
104
|
|
|
105
|
+
// src/withVisionSimulator.ts
|
|
106
|
+
import { useCallback, useEffect } from "storybook/preview-api";
|
|
107
|
+
var knownFilters = Object.values(filters).map((f) => f.filter), knownFiltersRegExp = new RegExp(`\\b(${knownFilters.join("|")})\\b`, "g"), withVisionSimulator = (StoryFn, { globals }) => {
|
|
108
|
+
let { vision } = globals, applyVisionFilter = useCallback(() => {
|
|
109
|
+
let existingFilters = document.body.style.filter.replaceAll(knownFiltersRegExp, "").trim(), visionFilter = filters[vision]?.filter;
|
|
110
|
+
return visionFilter && document.body.classList.contains("sb-show-main") ? !existingFilters || existingFilters === "none" ? document.body.style.filter = visionFilter : document.body.style.filter = `${existingFilters} ${visionFilter}` : document.body.style.filter = existingFilters || "none", () => document.body.style.filter = existingFilters || "none";
|
|
111
|
+
}, [vision]);
|
|
112
|
+
return useEffect(() => {
|
|
113
|
+
let cleanup = applyVisionFilter(), observer = new MutationObserver(() => applyVisionFilter());
|
|
114
|
+
return observer.observe(document.body, { attributeFilter: ["class"] }), () => {
|
|
115
|
+
cleanup(), observer.disconnect();
|
|
116
|
+
};
|
|
117
|
+
}, [applyVisionFilter]), useEffect(() => (document.body.insertAdjacentHTML("beforeend", filterDefs), () => {
|
|
118
|
+
let filterDefsElement = document.getElementById("storybook-a11y-vision-filters");
|
|
119
|
+
filterDefsElement?.parentElement?.removeChild(filterDefsElement);
|
|
120
|
+
}), []), StoryFn();
|
|
121
|
+
};
|
|
122
|
+
|
|
102
123
|
// src/preview.tsx
|
|
103
|
-
var vitestMatchersExtended = !1, afterEach = async ({
|
|
124
|
+
var vitestMatchersExtended = !1, decorators = [withVisionSimulator], afterEach = async ({
|
|
104
125
|
id: storyId,
|
|
105
126
|
reporting,
|
|
106
127
|
parameters: parameters2,
|
|
107
128
|
globals,
|
|
108
129
|
viewMode
|
|
109
130
|
}) => {
|
|
110
|
-
let a11yParameter = parameters2.a11y, a11yGlobals = globals.a11y, shouldRunEnvironmentIndependent = a11yParameter?.disable !== !0 && a11yParameter?.test !== "off" && a11yGlobals?.manual !== !0, getMode = () => {
|
|
131
|
+
let a11yParameter = parameters2.a11y, a11yGlobals = globals.a11y, shouldRunEnvironmentIndependent = !!!globals.ghostStories && a11yParameter?.disable !== !0 && a11yParameter?.test !== "off" && a11yGlobals?.manual !== !0, getMode = () => {
|
|
111
132
|
switch (a11yParameter?.test) {
|
|
112
133
|
case "todo":
|
|
113
134
|
return "warning";
|
|
@@ -148,7 +169,8 @@ var vitestMatchersExtended = !1, afterEach = async ({
|
|
|
148
169
|
}, initialGlobals = {
|
|
149
170
|
a11y: {
|
|
150
171
|
manual: !1
|
|
151
|
-
}
|
|
172
|
+
},
|
|
173
|
+
vision: void 0
|
|
152
174
|
}, parameters = {
|
|
153
175
|
a11y: {
|
|
154
176
|
test: "todo"
|
|
@@ -156,6 +178,7 @@ var vitestMatchersExtended = !1, afterEach = async ({
|
|
|
156
178
|
};
|
|
157
179
|
|
|
158
180
|
export {
|
|
181
|
+
decorators,
|
|
159
182
|
afterEach,
|
|
160
183
|
initialGlobals,
|
|
161
184
|
parameters,
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
// src/constants.ts
|
|
2
|
+
var ADDON_ID = "storybook/a11y", PANEL_ID = `${ADDON_ID}/panel`, PARAM_KEY = "a11y", VISION_GLOBAL_KEY = "vision", UI_STATE_ID = `${ADDON_ID}/ui`, RESULT = `${ADDON_ID}/result`, REQUEST = `${ADDON_ID}/request`, RUNNING = `${ADDON_ID}/running`, ERROR = `${ADDON_ID}/error`, MANUAL = `${ADDON_ID}/manual`, SELECT = `${ADDON_ID}/select`, DOCUMENTATION_LINK = "writing-tests/accessibility-testing", DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#why-are-my-tests-failing-in-different-environments`;
|
|
3
|
+
var EVENTS = { RESULT, REQUEST, RUNNING, ERROR, MANUAL, SELECT }, STATUS_TYPE_ID_COMPONENT_TEST = "storybook/component-test", STATUS_TYPE_ID_A11Y = "storybook/a11y";
|
|
4
|
+
|
|
5
|
+
// src/visionSimulatorFilters.ts
|
|
6
|
+
var filters = {
|
|
7
|
+
blurred: {
|
|
8
|
+
label: "Blurred vision",
|
|
9
|
+
filter: "blur(2px)",
|
|
10
|
+
percentage: 22.9
|
|
11
|
+
},
|
|
12
|
+
deuteranomaly: {
|
|
13
|
+
label: "Deuteranomaly",
|
|
14
|
+
filter: 'url("#storybook-a11y-vision-deuteranomaly")',
|
|
15
|
+
percentage: 2.7
|
|
16
|
+
},
|
|
17
|
+
deuteranopia: {
|
|
18
|
+
label: "Deuteranopia",
|
|
19
|
+
filter: 'url("#storybook-a11y-vision-deuteranopia")',
|
|
20
|
+
percentage: 0.56
|
|
21
|
+
},
|
|
22
|
+
protanomaly: {
|
|
23
|
+
label: "Protanomaly",
|
|
24
|
+
filter: 'url("#storybook-a11y-vision-protanomaly")',
|
|
25
|
+
percentage: 0.66
|
|
26
|
+
},
|
|
27
|
+
protanopia: {
|
|
28
|
+
label: "Protanopia",
|
|
29
|
+
filter: 'url("#storybook-a11y-vision-protanopia")',
|
|
30
|
+
percentage: 0.59
|
|
31
|
+
},
|
|
32
|
+
tritanomaly: {
|
|
33
|
+
label: "Tritanomaly",
|
|
34
|
+
filter: 'url("#storybook-a11y-vision-tritanomaly")',
|
|
35
|
+
percentage: 0.01
|
|
36
|
+
},
|
|
37
|
+
tritanopia: {
|
|
38
|
+
label: "Tritanopia",
|
|
39
|
+
filter: 'url("#storybook-a11y-vision-tritanopia")',
|
|
40
|
+
percentage: 0.016
|
|
41
|
+
},
|
|
42
|
+
achromatopsia: {
|
|
43
|
+
label: "Achromatopsia",
|
|
44
|
+
filter: 'url("#storybook-a11y-vision-achromatopsia")',
|
|
45
|
+
percentage: 1e-4
|
|
46
|
+
},
|
|
47
|
+
grayscale: {
|
|
48
|
+
label: "Grayscale",
|
|
49
|
+
filter: "grayscale(100%)"
|
|
50
|
+
}
|
|
51
|
+
}, filterDefs = `<svg id="storybook-a11y-vision-filters" style="display: none !important;">
|
|
52
|
+
<defs>
|
|
53
|
+
<filter id="storybook-a11y-vision-protanopia">
|
|
54
|
+
<feColorMatrix
|
|
55
|
+
in="SourceGraphic"
|
|
56
|
+
type="matrix"
|
|
57
|
+
values="0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
|
|
58
|
+
/>
|
|
59
|
+
</filter>
|
|
60
|
+
<filter id="storybook-a11y-vision-protanomaly">
|
|
61
|
+
<feColorMatrix
|
|
62
|
+
in="SourceGraphic"
|
|
63
|
+
type="matrix"
|
|
64
|
+
values="0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
|
|
65
|
+
/>
|
|
66
|
+
</filter>
|
|
67
|
+
<filter id="storybook-a11y-vision-deuteranopia">
|
|
68
|
+
<feColorMatrix
|
|
69
|
+
in="SourceGraphic"
|
|
70
|
+
type="matrix"
|
|
71
|
+
values="0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
|
|
72
|
+
/>
|
|
73
|
+
</filter>
|
|
74
|
+
<filter id="storybook-a11y-vision-deuteranomaly">
|
|
75
|
+
<feColorMatrix
|
|
76
|
+
in="SourceGraphic"
|
|
77
|
+
type="matrix"
|
|
78
|
+
values="0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
|
|
79
|
+
/>
|
|
80
|
+
</filter>
|
|
81
|
+
<filter id="storybook-a11y-vision-tritanopia">
|
|
82
|
+
<feColorMatrix
|
|
83
|
+
in="SourceGraphic"
|
|
84
|
+
type="matrix"
|
|
85
|
+
values="0.95, 0.05, 0, 0, 0 0, 0.433, 0.567, 0, 0 0, 0.475, 0.525, 0, 0 0, 0, 0, 1, 0"
|
|
86
|
+
/>
|
|
87
|
+
</filter>
|
|
88
|
+
<filter id="storybook-a11y-vision-tritanomaly">
|
|
89
|
+
<feColorMatrix
|
|
90
|
+
in="SourceGraphic"
|
|
91
|
+
type="matrix"
|
|
92
|
+
values="0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
|
|
93
|
+
/>
|
|
94
|
+
</filter>
|
|
95
|
+
<filter id="storybook-a11y-vision-achromatopsia">
|
|
96
|
+
<feColorMatrix
|
|
97
|
+
in="SourceGraphic"
|
|
98
|
+
type="matrix"
|
|
99
|
+
values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
|
|
100
|
+
/>
|
|
101
|
+
</filter>
|
|
102
|
+
</defs>
|
|
103
|
+
</svg>`;
|
|
104
|
+
|
|
105
|
+
export {
|
|
106
|
+
ADDON_ID,
|
|
107
|
+
PANEL_ID,
|
|
108
|
+
PARAM_KEY,
|
|
109
|
+
VISION_GLOBAL_KEY,
|
|
110
|
+
DOCUMENTATION_DISCREPANCY_LINK,
|
|
111
|
+
EVENTS,
|
|
112
|
+
STATUS_TYPE_ID_COMPONENT_TEST,
|
|
113
|
+
STATUS_TYPE_ID_A11Y,
|
|
114
|
+
filters,
|
|
115
|
+
filterDefs
|
|
116
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
preview_exports
|
|
3
|
-
} from "./_browser-chunks/chunk-
|
|
3
|
+
} from "./_browser-chunks/chunk-2FVV6YOY.js";
|
|
4
4
|
import {
|
|
5
5
|
PARAM_KEY
|
|
6
|
-
} from "./_browser-chunks/chunk-
|
|
6
|
+
} from "./_browser-chunks/chunk-7OPMK7TU.js";
|
|
7
7
|
import "./_browser-chunks/chunk-4BE7D4DS.js";
|
|
8
8
|
|
|
9
9
|
// src/index.ts
|
package/dist/manager.js
CHANGED
|
@@ -5,12 +5,15 @@ import {
|
|
|
5
5
|
PANEL_ID,
|
|
6
6
|
PARAM_KEY,
|
|
7
7
|
STATUS_TYPE_ID_A11Y,
|
|
8
|
-
STATUS_TYPE_ID_COMPONENT_TEST
|
|
9
|
-
|
|
8
|
+
STATUS_TYPE_ID_COMPONENT_TEST,
|
|
9
|
+
VISION_GLOBAL_KEY,
|
|
10
|
+
filterDefs,
|
|
11
|
+
filters
|
|
12
|
+
} from "./_browser-chunks/chunk-7OPMK7TU.js";
|
|
10
13
|
import "./_browser-chunks/chunk-4BE7D4DS.js";
|
|
11
14
|
|
|
12
15
|
// src/manager.tsx
|
|
13
|
-
import
|
|
16
|
+
import React8 from "react";
|
|
14
17
|
import { Badge as Badge3 } from "storybook/internal/components";
|
|
15
18
|
import { addons, types, useAddonState as useAddonState2, useStorybookApi as useStorybookApi3 } from "storybook/manager-api";
|
|
16
19
|
|
|
@@ -2100,76 +2103,12 @@ var RotatingIcon = styled5(SyncIcon2)(({ theme: theme2 }) => ({
|
|
|
2100
2103
|
};
|
|
2101
2104
|
|
|
2102
2105
|
// src/components/VisionSimulator.tsx
|
|
2103
|
-
import
|
|
2106
|
+
import React7 from "react";
|
|
2104
2107
|
import { Select } from "storybook/internal/components";
|
|
2105
2108
|
import { AccessibilityIcon } from "@storybook/icons";
|
|
2106
|
-
import {
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
import * as React7 from "react";
|
|
2110
|
-
var Filters = (props) => React7.createElement("svg", { ...props }, React7.createElement("defs", null, React7.createElement("filter", { id: "protanopia" }, React7.createElement(
|
|
2111
|
-
"feColorMatrix",
|
|
2112
|
-
{
|
|
2113
|
-
in: "SourceGraphic",
|
|
2114
|
-
type: "matrix",
|
|
2115
|
-
values: "0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
|
|
2116
|
-
}
|
|
2117
|
-
)), React7.createElement("filter", { id: "protanomaly" }, React7.createElement(
|
|
2118
|
-
"feColorMatrix",
|
|
2119
|
-
{
|
|
2120
|
-
in: "SourceGraphic",
|
|
2121
|
-
type: "matrix",
|
|
2122
|
-
values: "0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
|
|
2123
|
-
}
|
|
2124
|
-
)), React7.createElement("filter", { id: "deuteranopia" }, React7.createElement(
|
|
2125
|
-
"feColorMatrix",
|
|
2126
|
-
{
|
|
2127
|
-
in: "SourceGraphic",
|
|
2128
|
-
type: "matrix",
|
|
2129
|
-
values: "0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
|
|
2130
|
-
}
|
|
2131
|
-
)), React7.createElement("filter", { id: "deuteranomaly" }, React7.createElement(
|
|
2132
|
-
"feColorMatrix",
|
|
2133
|
-
{
|
|
2134
|
-
in: "SourceGraphic",
|
|
2135
|
-
type: "matrix",
|
|
2136
|
-
values: "0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
|
|
2137
|
-
}
|
|
2138
|
-
)), React7.createElement("filter", { id: "tritanopia" }, React7.createElement(
|
|
2139
|
-
"feColorMatrix",
|
|
2140
|
-
{
|
|
2141
|
-
in: "SourceGraphic",
|
|
2142
|
-
type: "matrix",
|
|
2143
|
-
values: "0.95, 0.05, 0, 0, 0 0, 0.433, 0.567, 0, 0 0, 0.475, 0.525, 0, 0 0, 0, 0, 1, 0"
|
|
2144
|
-
}
|
|
2145
|
-
)), React7.createElement("filter", { id: "tritanomaly" }, React7.createElement(
|
|
2146
|
-
"feColorMatrix",
|
|
2147
|
-
{
|
|
2148
|
-
in: "SourceGraphic",
|
|
2149
|
-
type: "matrix",
|
|
2150
|
-
values: "0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
|
|
2151
|
-
}
|
|
2152
|
-
)), React7.createElement("filter", { id: "achromatopsia" }, React7.createElement(
|
|
2153
|
-
"feColorMatrix",
|
|
2154
|
-
{
|
|
2155
|
-
in: "SourceGraphic",
|
|
2156
|
-
type: "matrix",
|
|
2157
|
-
values: "0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
|
|
2158
|
-
}
|
|
2159
|
-
))));
|
|
2160
|
-
|
|
2161
|
-
// src/components/VisionSimulator.tsx
|
|
2162
|
-
var iframeId = "storybook-preview-iframe", baseList = [
|
|
2163
|
-
{ name: "blurred vision", percentage: 22.9 },
|
|
2164
|
-
{ name: "deuteranomaly", percentage: 2.7 },
|
|
2165
|
-
{ name: "deuteranopia", percentage: 0.56 },
|
|
2166
|
-
{ name: "protanomaly", percentage: 0.66 },
|
|
2167
|
-
{ name: "protanopia", percentage: 0.59 },
|
|
2168
|
-
{ name: "tritanomaly", percentage: 0.01 },
|
|
2169
|
-
{ name: "tritanopia", percentage: 0.016 },
|
|
2170
|
-
{ name: "achromatopsia", percentage: 1e-4 },
|
|
2171
|
-
{ name: "grayscale" }
|
|
2172
|
-
], getFilter = (filterName) => filterName ? filterName === "blurred vision" ? "blur(2px)" : filterName === "grayscale" ? "grayscale(100%)" : `url('#${filterName}')` : "none", Hidden = styled6.div({
|
|
2109
|
+
import { useGlobals as useGlobals2 } from "storybook/manager-api";
|
|
2110
|
+
import { styled as styled6 } from "storybook/theming";
|
|
2111
|
+
var Hidden = styled6.div({
|
|
2173
2112
|
"&, & svg": {
|
|
2174
2113
|
position: "absolute",
|
|
2175
2114
|
width: 0,
|
|
@@ -2178,48 +2117,37 @@ var iframeId = "storybook-preview-iframe", baseList = [
|
|
|
2178
2117
|
}), ColorIcon = styled6.span(
|
|
2179
2118
|
{
|
|
2180
2119
|
background: "linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)",
|
|
2181
|
-
borderRadius:
|
|
2120
|
+
borderRadius: 14,
|
|
2182
2121
|
display: "block",
|
|
2183
|
-
|
|
2184
|
-
|
|
2122
|
+
flexShrink: 0,
|
|
2123
|
+
height: 14,
|
|
2124
|
+
width: 14
|
|
2185
2125
|
},
|
|
2186
2126
|
({ $filter }) => ({
|
|
2187
|
-
filter:
|
|
2127
|
+
filter: filters[$filter].filter || "none"
|
|
2188
2128
|
}),
|
|
2189
2129
|
({ theme: theme2 }) => ({
|
|
2190
2130
|
boxShadow: `${theme2.appBorderColor} 0 0 0 1px inset`
|
|
2191
2131
|
})
|
|
2192
2132
|
), VisionSimulator = () => {
|
|
2193
|
-
let [
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
};
|
|
2201
|
-
});
|
|
2202
|
-
return React8.createElement(React8.Fragment, null, filter && React8.createElement(
|
|
2203
|
-
Global,
|
|
2204
|
-
{
|
|
2205
|
-
styles: {
|
|
2206
|
-
[`#${iframeId}`]: {
|
|
2207
|
-
filter: getFilter(filter.name)
|
|
2208
|
-
}
|
|
2209
|
-
}
|
|
2210
|
-
}
|
|
2211
|
-
), React8.createElement(
|
|
2133
|
+
let [globals, updateGlobals] = useGlobals2(), value = globals[VISION_GLOBAL_KEY], options = Object.entries(filters).map(([key, { label, percentage }]) => ({
|
|
2134
|
+
title: label,
|
|
2135
|
+
description: percentage ? `${percentage}% of users` : void 0,
|
|
2136
|
+
icon: React7.createElement(ColorIcon, { $filter: key }),
|
|
2137
|
+
value: key
|
|
2138
|
+
}));
|
|
2139
|
+
return React7.createElement(React7.Fragment, null, React7.createElement(
|
|
2212
2140
|
Select,
|
|
2213
2141
|
{
|
|
2214
2142
|
resetLabel: "Reset color filter",
|
|
2215
|
-
onReset: () =>
|
|
2216
|
-
icon:
|
|
2143
|
+
onReset: () => updateGlobals({ [VISION_GLOBAL_KEY]: void 0 }),
|
|
2144
|
+
icon: React7.createElement(AccessibilityIcon, null),
|
|
2217
2145
|
ariaLabel: "Vision simulator",
|
|
2218
|
-
defaultOptions:
|
|
2146
|
+
defaultOptions: value,
|
|
2219
2147
|
options,
|
|
2220
|
-
onSelect: (selected) =>
|
|
2148
|
+
onSelect: (selected) => updateGlobals({ [VISION_GLOBAL_KEY]: selected })
|
|
2221
2149
|
}
|
|
2222
|
-
),
|
|
2150
|
+
), React7.createElement(Hidden, { dangerouslySetInnerHTML: { __html: filterDefs } }));
|
|
2223
2151
|
};
|
|
2224
2152
|
|
|
2225
2153
|
// src/manager.tsx
|
|
@@ -2232,19 +2160,19 @@ var Title2 = () => {
|
|
|
2232
2160
|
results: void 0,
|
|
2233
2161
|
error: void 0,
|
|
2234
2162
|
status: "initial"
|
|
2235
|
-
}), violationsNb = results?.violations?.length ?? 0, incompleteNb = results?.incomplete?.length ?? 0, count = violationsNb + incompleteNb, suffix = count === 0 ? null :
|
|
2236
|
-
return
|
|
2163
|
+
}), violationsNb = results?.violations?.length ?? 0, incompleteNb = results?.incomplete?.length ?? 0, count = violationsNb + incompleteNb, suffix = count === 0 ? null : React8.createElement(Badge3, { compact: !0, status: selectedPanel === PANEL_ID ? "active" : "neutral" }, count);
|
|
2164
|
+
return React8.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, React8.createElement("span", null, "Accessibility"), suffix);
|
|
2237
2165
|
};
|
|
2238
2166
|
addons.register(ADDON_ID, (api) => {
|
|
2239
2167
|
addons.add(PANEL_ID, {
|
|
2240
2168
|
title: "",
|
|
2241
2169
|
type: types.TOOL,
|
|
2242
2170
|
match: ({ viewMode, tabId }) => viewMode === "story" && !tabId,
|
|
2243
|
-
render: () =>
|
|
2171
|
+
render: () => React8.createElement(VisionSimulator, null)
|
|
2244
2172
|
}), addons.add(PANEL_ID, {
|
|
2245
2173
|
title: Title2,
|
|
2246
2174
|
type: types.PANEL,
|
|
2247
|
-
render: ({ active = !0 }) =>
|
|
2175
|
+
render: ({ active = !0 }) => React8.createElement(A11yContextProvider, null, active ? React8.createElement(A11YPanel, null) : null),
|
|
2248
2176
|
paramKey: PARAM_KEY
|
|
2249
2177
|
});
|
|
2250
2178
|
});
|
package/dist/postinstall.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import CJS_COMPAT_NODE_URL_dth0w8svdjl from 'node:url';
|
|
2
|
+
import CJS_COMPAT_NODE_PATH_dth0w8svdjl from 'node:path';
|
|
3
|
+
import CJS_COMPAT_NODE_MODULE_dth0w8svdjl from "node:module";
|
|
4
4
|
|
|
5
|
-
var __filename =
|
|
6
|
-
var __dirname =
|
|
7
|
-
var require =
|
|
5
|
+
var __filename = CJS_COMPAT_NODE_URL_dth0w8svdjl.fileURLToPath(import.meta.url);
|
|
6
|
+
var __dirname = CJS_COMPAT_NODE_PATH_dth0w8svdjl.dirname(__filename);
|
|
7
|
+
var require = CJS_COMPAT_NODE_MODULE_dth0w8svdjl.createRequire(import.meta.url);
|
|
8
8
|
|
|
9
9
|
// ------------------------------------------------------------
|
|
10
10
|
// end of CJS compatibility banner, injected by Storybook's esbuild configuration
|
package/dist/preview.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as storybook_internal_csf from 'storybook/internal/csf';
|
|
1
2
|
import { AfterEach } from 'storybook/internal/types';
|
|
2
3
|
import { Selector, SelectorList, RunOptions, Spec } from 'axe-core';
|
|
3
4
|
|
|
@@ -37,14 +38,16 @@ interface A11yParameters {
|
|
|
37
38
|
test?: A11yTest;
|
|
38
39
|
}
|
|
39
40
|
|
|
41
|
+
declare const decorators: storybook_internal_csf.DecoratorFunction[];
|
|
40
42
|
declare const afterEach: AfterEach<any>;
|
|
41
43
|
declare const initialGlobals: {
|
|
42
44
|
a11y: {
|
|
43
45
|
manual: boolean;
|
|
44
46
|
};
|
|
47
|
+
vision: undefined;
|
|
45
48
|
};
|
|
46
49
|
declare const parameters: {
|
|
47
50
|
a11y: A11yParameters;
|
|
48
51
|
};
|
|
49
52
|
|
|
50
|
-
export { afterEach, initialGlobals, parameters };
|
|
53
|
+
export { afterEach, decorators, initialGlobals, parameters };
|
package/dist/preview.js
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import {
|
|
2
2
|
afterEach,
|
|
3
|
+
decorators,
|
|
3
4
|
initialGlobals,
|
|
4
5
|
parameters
|
|
5
|
-
} from "./_browser-chunks/chunk-
|
|
6
|
-
import "./_browser-chunks/chunk-
|
|
6
|
+
} from "./_browser-chunks/chunk-2FVV6YOY.js";
|
|
7
|
+
import "./_browser-chunks/chunk-7OPMK7TU.js";
|
|
7
8
|
import "./_browser-chunks/chunk-4BE7D4DS.js";
|
|
8
9
|
export {
|
|
9
10
|
afterEach,
|
|
11
|
+
decorators,
|
|
10
12
|
initialGlobals,
|
|
11
13
|
parameters
|
|
12
14
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-a11y",
|
|
3
|
-
"version": "10.2.0-
|
|
3
|
+
"version": "10.2.0-beta.0",
|
|
4
4
|
"description": "Storybook Addon A11y: Test UI component compliance with WCAG web accessibility standards",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"a11y",
|
|
@@ -60,17 +60,17 @@
|
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@radix-ui/react-tabs": "1.0.4",
|
|
63
|
-
"@storybook/icons": "^2.0.
|
|
63
|
+
"@storybook/icons": "^2.0.1",
|
|
64
64
|
"@testing-library/react": "^14.0.0",
|
|
65
|
-
"execa": "^9.
|
|
65
|
+
"execa": "^9.6.1",
|
|
66
66
|
"react": "^18.2.0",
|
|
67
67
|
"react-dom": "^18.2.0",
|
|
68
68
|
"react-resize-detector": "^7.1.2",
|
|
69
|
-
"typescript": "^5.
|
|
69
|
+
"typescript": "^5.9.3",
|
|
70
70
|
"vitest-axe": "^0.1.0"
|
|
71
71
|
},
|
|
72
72
|
"peerDependencies": {
|
|
73
|
-
"storybook": "^10.2.0-
|
|
73
|
+
"storybook": "^10.2.0-beta.0"
|
|
74
74
|
},
|
|
75
75
|
"publishConfig": {
|
|
76
76
|
"access": "public"
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
// src/constants.ts
|
|
2
|
-
var ADDON_ID = "storybook/a11y", PANEL_ID = `${ADDON_ID}/panel`, PARAM_KEY = "a11y", UI_STATE_ID = `${ADDON_ID}/ui`, RESULT = `${ADDON_ID}/result`, REQUEST = `${ADDON_ID}/request`, RUNNING = `${ADDON_ID}/running`, ERROR = `${ADDON_ID}/error`, MANUAL = `${ADDON_ID}/manual`, SELECT = `${ADDON_ID}/select`, DOCUMENTATION_LINK = "writing-tests/accessibility-testing", DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#why-are-my-tests-failing-in-different-environments`;
|
|
3
|
-
var EVENTS = { RESULT, REQUEST, RUNNING, ERROR, MANUAL, SELECT }, STATUS_TYPE_ID_COMPONENT_TEST = "storybook/component-test", STATUS_TYPE_ID_A11Y = "storybook/a11y";
|
|
4
|
-
|
|
5
|
-
export {
|
|
6
|
-
ADDON_ID,
|
|
7
|
-
PANEL_ID,
|
|
8
|
-
PARAM_KEY,
|
|
9
|
-
DOCUMENTATION_DISCREPANCY_LINK,
|
|
10
|
-
EVENTS,
|
|
11
|
-
STATUS_TYPE_ID_COMPONENT_TEST,
|
|
12
|
-
STATUS_TYPE_ID_A11Y
|
|
13
|
-
};
|