Integration tests: Add option to run automated accessibility audits
Created by: umpox
Description
This PR adds the testing util: accessibilityAudit
for automated accessibility tests.
Some notes:
- It functions quite similar to
percySnapshot
, in that it just takes the current Puppeteer page and handles everything else. We should be able to use this wherever we usepercySnapshot
. - It is performant, I didn't notice any significant slowness when running this in tests.
- We can ignore elements through the
a11y-ignore
class, similar topercy-hide
andchromatic-ignore
Usage
Right now we're not using this util anywhere in our tests. We should:
- Use
accessibilityAudit
wherever where we usepercySnapshot
. - Fix any issues reported by the audit, use
a11y-ignore
only if absolutely necessary, or we can't immediately fix the issue.
We can ask GitStart to focus on this work.
Why not Lighthouse?
We could use our Lighthouse checks for our accessibility audits, but it has some caveats:
- It is a lot slower. We'd have to cut out a lot of the other Lighthouse checks to make it faster, and it'd ultimately end up being a wrapper around the accessibility checks anyway.
- It doesn't test as many issues as axe-core does, as far as I can tell.
- Lighthouse CLI isn't great and has no TypeScript support (boo)
We can consider extending these utils in future to potentially test performance through Lighthouse too.
Test plan
- Ran through the integration tests locally and in CI
- Tested in the
code-monitoring
test