Set up Accessibility testing

SMakaiTakori commented 1 year ago

PR Description/Summary

This change is related to the Setup Guides task. Modeling the Civic Actions Accessibility playbook guide, we have added automated JavaScript front end testing using Cypress in combination with Axe core, an accessibility testing engine for websites.

The accessibility tests run in the PR check after the playwright tests are finished.

What was changed

Set up of Cypress and Axe core testing frameworks via Dockerfile
Updated sh file in GitHub workflow pr check
README doc updated with developer instructions for running Cypress tests

How to check change

Checkout branch and build project
Make sure the server is running at http://localhost:8080/
Run npx cypress run to run and verify accessibility tests in headless mode or Run npx cypress open to use Cypress' UI mode
Creation and configuration of new tests can be implemented in cypress/e2e/spec.cy.js
Test configurations can be found in cypress.config.js

Additional Notes

** Since we don't have full pages yet, some of the components are showing accessibility errors because for example, not every component has an h1 currently. So, the current tests I have in place in the spec file, cypress/e2e/spec.cy.js, are disabling specific accessibility errors. We will re-enable them once we copy this guides repository and start building out pages.

** Cypress automatically creates a video when it's run in headless mode, I have disabled this feature in the cypress.congif.js file so it's not created during the GitHub workflow. To re-enable it in your local env, change the value of video to true or comment it out.

** If you are running Cypress tests in Docker Desktop and on a virtual machine, there are additional dependencies you will need to install depending on what type of environment you have.

Screenshot of PR check accessibility tests

Accessibility tests

netlify[bot] commented 1 year ago

Deploy Preview for bloom-guides-template ready!

Name	Link
Latest commit	c07c2eb2815fb7d70bf66f9e6a68567f690f5736
Latest deploy log	https://app.netlify.com/sites/bloom-guides-template/deploys/64b199c7e4e85500087d0006
Deploy Preview	https://deploy-preview-52--bloom-guides-template.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

SMakaiTakori commented 1 year ago

Non-blocking suggestion: To get around the problem of components being tested on their own pages and having to suppress some tests, it might be good to make one big giant page with all the components on it and run the accessibility tests there.

@jeffmaher I think this is a good idea. After this PR and the site navigation component are merged in, I could make a page with all the components and see what happens! 👀

bloom-works / guides-template