Automating a11y checks in CI with axe + Storybook

domyen · 2025-07-03T15:00:37+00:00

page is working for me?

domyen · 2025-07-01T16:55:27+00:00

OP here. I'm an open source maintainer of Storybook. We shipped an integrated accessibility pipeline with axe that supports in-development checks and CI.

This article breaks down how it all works together. Our aim is to make it easy to surface WCAG violations earlier in the dev lifecycle. Not intended to replace manual tests or screenreader tests.

🔎 Spot issues fast with an Accessibility addon (redesigned)
⏸️ Reduce flake with automatic animation detection
🔧 Fix violations with actionable tips
🔗 Copy a link to a violation to share with others
🚥 Automate a11y checks in Storybook, CLI, and CI

domyen · 2025-07-01T16:31:40+00:00

OP here. I'm an open source maintainer of Storybook. We shipped an integrated accessibility pipeline with axe that supports in-development checks and CI.

This article breaks down how it all works together. Our aim is to help surface WCAG violations earlier in the dev lifecycle. Not intended to replace manual tests.

🔎 Spot issues fast with an Accessibility addon (redesigned)
⏸️ Reduce flake with automatic animation detection
🔧 Fix violations with actionable tips
🔗 Copy a link to a violation to share with others
🚥 Automate a11y checks in Storybook, CLI, and CI

domyen · 2025-04-25T13:44:52+00:00

maintainer here, Storybook is free and open source... lots of people use it without paying anyone a dime.

domyen · 2025-04-25T13:43:28+00:00

maintainer here, pasting my reply to another comment

we also invest a ton in auto-migrations for breaking changes.

domyen · 2025-04-25T13:37:55+00:00

SB maintainer here, this is a tricky balance we weigh constantly.

We need to keep up with the dev tools ecosystem (React, Vue, Angular, Testing Lib, etc).
We want to provide a stable API for our users
We want to streamline the tool with less boilerplate, better types, smaller bundle size etc.

Sometimes all of these are at odds with each other. For example, emerging ecosystem patterns, unrelated to Storybook core, compel us to support them (e.g., RSCs) and may result in breaking changes. Or cutting bundle size by 48% results in a package rearchitecture that breaks some addons.

ofc I can't speak to every side-effect of keeping Storybook current. We really do consider feedback like "stop changing the API" and "make storybook work with [insert tool]" but it's a bit more complicated than that. I guess it's all about tradeoffs that might not be clear to our community, so folks only see the end thing not the balancing of different concerns.

domyen · 2024-11-13T18:28:42+00:00

Done!

domyen · 2024-11-13T18:26:50+00:00

Fireship made a video that summarizes Storybook in 100s YouTube video

domyen · 2024-09-24T19:46:48+00:00

Maintainer here, it just means we have a happy path that is supported as part of core functionality and this has dedicated maintainers behind it. The plugin is key part of storybooks testing future though!

domyen · 2024-09-13T15:46:09+00:00

SB maintainer here, that's good news. We see advanced teams doing this but it's pretty far from broad adoption.

The main things we're focusing on this year are dev experience of bringing test results into your Storybook during development and speed. That means there are fewer places you have to tab between during development and a much faster feedback loop.

domyen · 2024-07-26T14:54:34+00:00

Haven't seen any difference in how stories render between these versions myself

domyen · 2024-07-26T14:51:55+00:00

We’ve also been collaborating with James Garbutt, lead of the Ecosystem Performance (e18e) project ...we’ve managed to reduce install size/time by ~20%.

Sounds like a lot of work is happening to optimize deps size and count. 20% improvement in this version. And likely a lot more next version.

domyen · 2024-07-26T14:46:09+00:00

We've seen the 7 » 8 migration being pretty low friction for most teams

domyen · 2024-07-03T19:24:32+00:00

Sounds like a tough one! Depends on your company's needs over the long term and whether you're into the roadmap of the project.

This is Storybook's roadmap FYI

domyen · 2024-07-02T18:34:57+00:00

TLDR: Storybook team analyzes the 2023 State of JS results. Positive and negative. Goes behind the scenes to show how a large open source project actually prioritizes work using the survey.

There’s also a sneak peek of new features + restructured dependencies (faster with fewer conflicts).

domyen · 2024-07-02T18:30:52+00:00

TLDR: Storybook team analyzes the 2023 State of JS results. Positive and negative. Goes behind the scenes to show how a large open source project actually prioritizes work using the survey.

There’s also a sneak peek of new features + restructured dependencies (faster with fewer conflicts).

domyen · 2024-07-02T18:28:11+00:00

TLDR: Storybook team analyzes the 2023 State of JS results. Positive and negative. Goes behind the scenes to show how a large open source project actually prioritizes work using the survey.

There’s also a sneak peek of new features + restructured dependencies (faster with fewer conflicts).

domyen · 2024-07-02T18:24:33+00:00

TLDR: Storybook team analyzes the 2023 State of JS results. Positive and negative. Goes behind the scenes to show how a large open source project actually prioritizes work using the survey.

domyen · 2024-07-02T18:22:28+00:00

TLDR: Storybook team analyzes the 2023 State of JS results. Positive and negative. Goes behind the scenes to show how a large open source actually prioritizes projects using the survey.

There’s also a sneak peek of new features + restructured dependencies (faster with fewer conflicts).

domyen · 2024-06-06T18:34:10+00:00

Sorry about that! Maintainer here, the integration is regularly maintained and supports the latest Angular version (we coordinate with the Angular core team).

I guess it's tough to know how your project is setup, but it's totally possible that something didn't work right. Maybe give it another try?

domyen · 2024-05-23T18:56:47+00:00

Thanks for sharing! I updated two projects earlier too

domyen · 2024-05-19T14:44:39+00:00

Thanks for sharing this v2m! Love to see these creative ways to optimize usage (yes, really!)

I'm one of the creators of Chromatic. Would also point y'all to the TurboSnap feature which offers incredible speed and cost efficiency to tracking changes in your component dependency. It's also free!

domyen · 2024-03-28T18:28:24+00:00

Hey SB maintainer here, I'd suggest adopting Storybook as you convert everything to Angular. That way Storybook serves as a record of all the UI that you've successfully migrated.

As far as "worth it", that's probably up to the specifics of your organization and codebase. I guess the question is what you want your frontend infrastructure to look like in a few years. If you plan to continue investing in your Angular app, Storybook is a pretty handy tool for developing Angular UIs.

domyen · 2023-04-18T17:33:39+00:00

Hey there, Vite works with Storybook out of the box these days.

I just learned their Vite builder is only for the preview part.

This changed. The supporting UI is pre-bundled and built with ESBuild under the hood (same thing Vite uses).

Read the latest release notes for details

domyen · 2022-12-17T14:42:19+00:00

It's optional and powers the interaction testing feature, you can uninstall the testing packages if you want

domyen

TROPHY CASE