Skip to content

Integration tests: Add option to run automated accessibility audits

Warren Gifford requested to merge tr/integration-accessibility-tests into main

Created by: umpox

image

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 use percySnapshot.
  • 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 to percy-hide and chromatic-ignore

Usage

Right now we're not using this util anywhere in our tests. We should:

  1. UseaccessibilityAudit wherever where we use percySnapshot.
  2. 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

  1. Ran through the integration tests locally and in CI
  2. Tested in the code-monitoring test

Merge request reports

Loading