Implement expect matcher for accessibility checks

package.json

@@ -177,7 +177,7 @@
 		"publish:prod": "npm run build:packages && lerna publish",
 		"test": "npm run lint && npm run test-unit",
 		"pretest-e2e": "concurrently \"./bin/reset-e2e-tests.sh\" \"npm run build\"",
-		"test-e2e": "wp-scripts test-e2e --setupTestFrameworkScriptFile=./packages/tests-e2e/support/setup-test-framework.js --testPathPattern=/packages/tests-e2e/specs/",
+		"test-e2e": "wp-scripts test-e2e --setupTestFrameworkScriptFile=./packages/tests-e2e/support/setup-test-framework.js --testPathPattern=/packages/tests-e2e/specs",
 		"test-e2e:watch": "npm run test-e2e -- --watch",
 		"test-php": "npm run lint-php && npm run test-unit-php",
 		"test-unit": "wp-scripts test-unit-js --config test/unit/jest.config.json",

packages/jest-puppeteer-axe/src/index.js

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import AxePuppeteer from 'axe-puppeteer';
+
+function formatViolations( violations ) {
+	return violations.map( ( { help, id, nodes } ) => {
+		let output = `Rule: ${ id } (${ help })\n` +
+			'Affected Nodes:\n';
+
+		nodes.forEach( ( node ) => {
+			if ( node.any.length ) {
+				output += `  ${ node.target }\n`;
+				output += '    Fix ANY of the following:\n';
+				node.any.forEach( ( item ) => {
+					output += `    - ${ item.message }\n`;
+				} );
+			}
+
+			if ( node.all.length ) {
+				output += `  ${ node.target }\n`;
+				output += '    Fix ALL of the following:\n';
+				node.all.forEach( ( item ) => {
+					output += `      - ${ item.message }.\n`;
+				} );
+			}
+
+			if ( node.none.length ) {
+				output += `  ${ node.target }\n`;
+				output += '    Fix ALL of the following:\n';
+				node.none.forEach( ( item ) => {
+					output += `      - ${ item.message }.\n`;
+				} );
+			}
+		} );
+		return output;
+	} ).join( '\n' );
+}
+
+async function toBeAccessible( page, { include, exclude } = {} ) {
+	const axe = new AxePuppeteer( page );
+
+	if ( include ) {
+		axe.include( include );
+	}
+
+	if ( exclude ) {
+		axe.exclude( exclude );
+	}
+
+	const { violations } = await axe.analyze();
+
+	const pass = violations.length === 0;
+	const message = pass ?
+		() => {
+			return this.utils.matcherHint( '.not.toBeAccessible' ) +
+				'\n\n' +
+				'Expected page to contain accessibility check violations.\n' +
+				'No violations found.';
+		} :
+		() => {
+			return this.utils.matcherHint( '.toBeAccessible' ) +
+				'\n\n' +
+				'Expected page to be accessible.\n' +
+				'Violations found:\n' +
+				this.utils.RECEIVED_COLOR(
+					formatViolations( violations )
+				);
+		};
+
+	return {
+		message,
+		pass,
+	};
+}
+
+expect.extend( {
+	toBeAccessible,
+} );

packages/tests-e2e/package.json

@@ -20,6 +20,7 @@
 	},
 	"dependencies": {
 		"@wordpress/jest-console": "file:../jest-console",
+		"@wordpress/jest-puppeteer-axe": "file:../jest-puppeteer-axe",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/url": "file:../url",
 		"expect-puppeteer": "^3.2.0",

packages/tests-e2e/specs/a11y.test.js

@@ -17,6 +17,13 @@ describe( 'a11y', () => {
 		await createNewPost();
 	} );
 
+	afterEach( async () => {
+		await expect( page ).toBeAccessible( {
+			include: '.block-editor',
+			exclude: '#metaboxes, #post-title-0, .editor-default-block-appender__content',
+		} );
+	} );
+
 	it( 'tabs header bar', async () => {
 		await pressKeyWithModifier( 'ctrl', '~' );
 

packages/tests-e2e/support/setup-test-framework.js

@@ -8,6 +8,7 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import '@wordpress/jest-console';
+import '@wordpress/jest-puppeteer-axe';
 
 /**
  * Internal dependencies