Support for aXe / Puppeteer / storyshot / CI / Jest flow?

[interactivellama]

Is your feature request related to a problem? Please describe. No. Other than, trying to make the world a little more accessible! 😉

Describe the solution you'd like I've got code working with Storyshots, but the addon-a11y mentions CI integration in its roadmap and add-ons seem more focused on the Storybook UI and not on test suites. Storyshots seems to be focused on DOM and image snapshots--that is it has artifacts that are stored in git and diff'ed.

The workflow working today is Storybook build CLI -> Jest -> Storyshots -> Puppeteer -> Jest expect() -> AxePuppeteer -> aXe. Performance is more than twice (3 min vs 8 min) that of StoryShots + jest-axe which uses jsDOM on the 448 stories I'm testing in Salesforce Lightning Design System for React.

Describe alternatives you've considered I've implemented jest-axe with Storybook, but it's too slow for the large scope of our project of implementing https://www.lightningdesignsystem.com/ .

Are you able to assist bring the feature to reality? Yes, I'd love to contribute after corporate approval. That's primarily why I'm asking for some direction. Where would this feature live? I'm guessing it would be it's own add-on like addon-storyshots-puppeteer or be added into that add-on and linked to from the addon-a11y. addon-storyshots-puppeteer is a vague name. It describes the how and not the what it does. On a related note, is storyshots really story-ci in its purpose? My running code structure is very similar to addon-storyshots-puppeteer, it's almost like it got copied and pasted or something. 😄

Additional context Screenshot: Unfortunately, the color contrast in the terminal isn't very high in this screenshot.

Related links

• 7103

• https://discordapp.com/channels/486522875931656193/580149748225409024
• https://gist.github.com/donaldpipowitch/898854e2f71f64d0d91e199537b3ee1a

[shilman]

@interactivellama This sounds awesome. 💯💯💯

I think it would be its own package like addon-storyshots-puppeteer, as you suggest. addon-a11y-ci to start? It would be good if this new package and addon-a11y could share configuration, etc.

And maybe we can refactor & rename the way CI services work as part of a 6.0 breaking change.

[shilman]

Hey @interactivellama anything I can do to help move this forward?

[interactivellama]

No, I was out-of-the-office right after I posted two weeks, and now I'm working it into my release planning. It's been on the roadmap on the add-on's readme for a while (2016). Are you targeting any certain release?

Do you all have any contributing license agreement (CLA)? I see that it's all MIT, so probably not.

[shilman]

@interactivellama Once there's a PR we'll figure out which release to slot it into. We're finishing up 5.2 right now. 5.3 will probably go out late Sept / early Oct, and so forth. Happy to coordinate with you once you have a better sense of your schedule. We don't have a CLA AFAIK!

[Hypnosphi]

I think it can be actually a part of addon-storyshots-puppeteer, and use expect(page).toPassAxeTests() from jest-puppeteer-axe in test body instead of screenshot

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[Hypnosphi]

Implemented in #8934