Quentin Gliech and Claude Opus 4.6 (1M context) created
Integrates axe-core via the a11y addon. Violations fail tests by
default (test: "error"). The addon adds an accessibility panel in
Storybook UI and a vision impairment simulator in the toolbar.
Also fix preview.ts import to use @storybook/react-vite.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>webui2/.storybook/main.ts | 2 +-
webui2/.storybook/preview.ts | 5 ++++-
webui2/package.json | 1 +
webui2/pnpm-lock.yaml | 20 ++++++++++++++++++++
4 files changed, 26 insertions(+), 2 deletions(-)
@@ -2,7 +2,7 @@ import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
stories: ["../src/**/*.stories.@(ts|tsx)"],
- addons: ["@storybook/addon-vitest"],
+ addons: ["@storybook/addon-a11y", "@storybook/addon-vitest"],
framework: "@storybook/react-vite",
};
@@ -1,9 +1,12 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from "@storybook/react-vite";
import "../src/index.css";
const preview: Preview = {
parameters: {
+ a11y: {
+ test: "error",
+ },
controls: {
matchers: {
color: /(background|color)$/i,
@@ -47,6 +47,7 @@
"@graphql-codegen/typescript": "^5.0.9",
"@graphql-codegen/typescript-operations": "^5.0.9",
"@graphql-codegen/typescript-react-apollo": "^4.3.2",
+ "@storybook/addon-a11y": "^10.3.4",
"@storybook/addon-vitest": "^10.3.4",
"@storybook/react": "^10.3.4",
"@storybook/react-vite": "^10.3.4",
@@ -90,6 +90,9 @@ importers:
'@graphql-codegen/typescript-react-apollo':
specifier: ^4.3.2
version: 4.4.1(graphql@16.13.2)
+ '@storybook/addon-a11y':
+ specifier: ^10.3.4
+ version: 10.3.4(storybook@10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
'@storybook/addon-vitest':
specifier: ^10.3.4
version: 10.3.4(@vitest/browser-playwright@4.1.2)(@vitest/browser@4.1.2(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2))(@vitest/runner@4.1.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vitest@4.1.2)
@@ -2109,6 +2112,11 @@ packages:
'@standard-schema/spec@1.1.0':
resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+ '@storybook/addon-a11y@10.3.4':
+ resolution: {integrity: sha512-TylBS2+MUPRfgzBKiygL1JoUBnTqEKo5oCEfjHneJZKzYE1UNgdMdk/fiyanaGKTZBKBxWbShxZhT2gLs8kqMA==}
+ peerDependencies:
+ storybook: ^10.3.4
+
'@storybook/addon-vitest@10.3.4':
resolution: {integrity: sha512-lSn8opaHVzDxLtMy28FnSkyx6uP1oQVnGzodNunTjrbJ8Ue8JVK+fjWtC/JfErIio0avlq79mgC5tfHSWlPr9w==}
peerDependencies:
@@ -2745,6 +2753,10 @@ packages:
resolution: {integrity: sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ==}
engines: {node: '>=8'}
+ axe-core@4.11.2:
+ resolution: {integrity: sha512-byD6KPdvo72y/wj2T/4zGEvvlis+PsZsn/yPS3pEO+sFpcrqRpX/TJCxvVaEsNeMrfQbCr7w163YqoD9IYwHXw==}
+ engines: {node: '>=4'}
+
babel-dead-code-elimination@1.0.12:
resolution: {integrity: sha512-GERT7L2TiYcYDtYk1IpD+ASAYXjKbLTDPhBtYj7X1NuRMDTMtAx9kyBenub1Ev41lo91OHCKdmP+egTDmfQ7Ig==}
@@ -6774,6 +6786,12 @@ snapshots:
'@standard-schema/spec@1.1.0': {}
+ '@storybook/addon-a11y@10.3.4(storybook@10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))':
+ dependencies:
+ '@storybook/global': 5.0.0
+ axe-core: 4.11.2
+ storybook: 10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+
'@storybook/addon-vitest@10.3.4(@vitest/browser-playwright@4.1.2)(@vitest/browser@4.1.2(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2))(@vitest/runner@4.1.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.3.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vitest@4.1.2)':
dependencies:
'@storybook/global': 5.0.0
@@ -7455,6 +7473,8 @@ snapshots:
auto-bind@4.0.0: {}
+ axe-core@4.11.2: {}
+
babel-dead-code-elimination@1.0.12:
dependencies:
'@babel/core': 7.29.0