chore: add a11y checks to test pipeline #1937
Merged
Conversation
This file contains 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
karrui
added a commit
that referenced
this pull request
Jun 9, 2021
* fix: remove all ChakraUI props from Chakra extended components * chore: set up a11y testing with storyshots-puppeteer
karrui
added a commit
that referenced
this pull request
Jun 24, 2021
* fix: remove all ChakraUI props from Chakra extended components * chore: set up a11y testing with storyshots-puppeteer
This was referenced Oct 4, 2022
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Problem
We can currently see a11y compliance via Storybook's a11y addon, but the addon itself will not throw any errors even if there are a11y violations. When multiple developers are working on several components, it is easy to overlook those a11y warnings (or even ignore them).
Thus, this PR adds an a11y check to the frontend tests pipeline to ensure that our rendered components are somewhat accessible, using
@storybook/addon-storyshots-puppeteerwhich uses axe under the hood to catch the most common a11y violations.Also clean up Storybook versions to use the stable version and clean up s ome storybook configuration.
(Also also to experiment with this for the a11y talk I'm about to start writing)
Solution
Features:
Improvements: