A tool to automate the a11y checks for Gutenberg blocks + WordPress themes
ℹ️ Proof of concept motivated by: WordPress/gutenberg#39266
Because we need a fast way to test each Gutenberg block for potential accesibility issues.
For each block this package follow these steps (using Wordpress E2E test utilities):
- Creates mock data if it's necesary
- Creates a new post
- Inserts blocks with mock data
- Previews the rendered block
- Tests the final bblock rendered output using
axe-core
- Reports the results
-
Start your WordPress test site
-
Activate the theme you want to use to run the tests
-
Clone this repo
-
Move to the repo folder:
cd a11y-blocks-test
- Install dependecies:
npm install
- Run the tests with your WordPress credentials:
WP_BASE_URL=http://localhost:4759 WP_USERNAME=admin WP_PASSWORD=password npm run test
- A working WordPress instance
- Node
- npm
Visual demo about what the tests do:
a11y.tests.mp4
- Archives
- Buttons
- Calendar
- Image
- Page List
- Paragraph
- Site Logo
- Add tests for all blocks
- Improve test architecture