/a11y-blocks-test

A tool to automate the a11y checks for Gutenberg blocks + WordPress themes

Primary LanguageJavaScript

Accessibility Gutenberg blocks test

A tool to automate the a11y checks for Gutenberg blocks + WordPress themes

ℹ️ Proof of concept motivated by: WordPress/gutenberg#39266

⚠️ Warning: Don't run this package over a production WordPress instance because it need to write some sample data to the site (example: It will upload a site logo if there if the site has not one defined previously). Use it only with test WordPress instances.

🙋 FAQs

Why?

Because we need a fast way to test each Gutenberg block for potential accesibility issues.

How it works?

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

▶️ Instructions

  • 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

🧰 Requirements

  • A working WordPress instance
  • Node
  • npm

Demo:

Visual demo about what the tests do:

a11y.tests.mp4

✅ Blocks currently being tested:

  • Archives
  • Buttons
  • Calendar
  • Image
  • Page List
  • Paragraph
  • Site Logo

TODO:

  • Add tests for all blocks
  • Improve test architecture