bloom-works / guides-template

Placeholder repo for work on Bloom Guides
https://bloom-guides-template.netlify.app/
MIT License
2 stars 0 forks source link

Set up Accessibility testing #52

Closed SMakaiTakori closed 1 year ago

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

How to check change

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...

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! 👀