v6: Wire axe into Storybook for component-level a11y#4257
Closed
trevor-scheer wants to merge 1 commit into
Closed
Conversation
|
trevor-scheer
force-pushed
the
trevor/storybook-a11y-addon
branch
from
f0c2e51 to
22c0092
Compare
`@storybook/addon-a11y` runs axe in the Storybook sidebar so violations show up during component work. `@storybook/test-runner` + `axe-playwright` run the same rules headlessly in CI; `a11y-baseline.json` pins accepted violations so the gate only fails on net-new ones. Starter baseline isn't empty — Storybook's preview iframe inherently trips `landmark-one-main` and `page-has-heading-one` on every story. Refresh: A11Y_UPDATE_BASELINE=1 yarn workspace @graphiql/react test:a11y
trevor-scheer
force-pushed
the
trevor/storybook-a11y-addon
branch
from
22c0092 to
24173de
Compare
Contributor
|
The latest changes of this PR are not available as canary, since there are no linked |
trevor-scheer
added a commit
that referenced
this pull request
May 14, 2026
## Background #4257 is adding a Storybook a11y CI gate to `@graphiql/react`, currently via `@storybook/test-runner` + `axe-playwright`. The paved path Storybook recommends is `@storybook/addon-vitest`, which folds stories into the existing Vitest suite and avoids a separate workflow file, test-runner config, and JSON baseline. That addon requires Vitest ≥ 3; we're on `^2.1.9` workspace-wide, so this upgrade is a prerequisite for taking the cleaner approach in #4257 rather than landing cruft we'd immediately want to rip out. ## What this enables Switching #4257 to: - `@storybook/addon-vitest` + `@storybook/addon-a11y` - Browser-mode Vitest project for stories (Playwright Chromium, like the test-runner uses today) - Per-story `parameters.a11y.test: 'error' | 'todo' | 'off'` — no JSON baseline file - No new workflow, no `.storybook/test-runner.ts`, no `a11y-baseline.json`, no `@storybook/test-runner` / `axe-playwright` devDeps ## Changes Workspace-wide bump to Vitest v4 and its companion peer-deps. A few mocks needed light fixups for v4's stricter `new` semantics.
Contributor
Author
|
Closing — redoing with |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Component-level a11y for v6.
@storybook/addon-a11yshows axe results next to each story;@storybook/test-runner+axe-playwrightrun the same rules headlessly in CI.a11y-baseline.jsonpins accepted violations; CI fails on net-new only. The starter isn't empty — Storybook's preview iframe always tripslandmark-one-mainandpage-has-heading-one, so those are pre-recorded.New
.github/workflows/accessibility.ymlruns the suite on PRs tographiql-6.Run locally
In one terminal:
In another:
Refs: #4219