axe and Playwright
The accessibility rules and the real browser that check every page and story.
Why axe
axe is the open-source rules engine behind most accessibility tools, including browser extensions and Storybook's own panel. Bones uses its WCAG 2.2 AA rules only. Its best-practice rules are left out, so the check carries the standard and nothing else.
axe can't judge everything. It doesn't know what a page is for, so it can't tell whether the login page has a sign-in button. Bones adds that half itself: scripts/a11y/expectations.mjs lists the landmarks, headings, and named controls each page must expose.
Why Playwright
Playwright drives a real Chromium. The sweep needs one because accessibility is a property of the rendered page — the accessibility tree, computed styles, and both color schemes — not of the source.
Playwright does three jobs in Bones:
- runs the accessibility sweep,
- runs the Storybook play tests,
- and loads every page for the CSP check.
What it checks
The sweep reads built output, not a dev server, so what ships is what gets checked. It covers the blog, docs, marketing site, and every Storybook story, in light and dark.
Used in
- Accessibility — what's covered.
- Accessibility — running the sweep.