From 6baad6c39bac916fc8df617afc279d87afdae56e Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 20 Mar 2024 15:20:49 -0400 Subject: [PATCH] Switch from HTML_CodeSniffer to Axe Puppeteer --- package-lock.json | 72 +++++++++++++++++--------------------- package.json | 3 +- test/accessibility.test.js | 25 +++---------- 3 files changed, 38 insertions(+), 62 deletions(-) diff --git a/package-lock.json b/package-lock.json index ec8fd8a1..91f828fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,8 +16,8 @@ "@18f/eslint-plugin-identity": "^2.0.0", "@18f/identity-build-sass": "^3.0.0", "@18f/identity-stylelint-config": "^4.0.0", + "@axe-core/puppeteer": "^4.8.5", "@happy-dom/global-registrator": "^13.6.2", - "@types/html_codesniffer": "^2.5.4", "@types/pixelmatch": "^5.2.6", "@types/pngjs": "^6.0.4", "browserslist": "^4.23.0", @@ -26,7 +26,6 @@ "eslint-plugin-import": "^2.29.1", "eslint-plugin-prettier": "^5.1.3", "fast-glob": "^3.3.2", - "html_codesniffer": "^2.5.1", "npm-run-all": "^4.1.5", "pixelmatch": "^5.3.0", "pngjs": "^7.0.0", @@ -133,6 +132,21 @@ "integrity": "sha512-1CJwTd6B6XDb6HETcHMwjRmQLQi2FgjM1rYUO6wf1yizKVPC9V66vmvVCtgePMzWmhsLqdhOPLWt+fNvG46FoA==", "dev": true }, + "node_modules/@axe-core/puppeteer": { + "version": "4.8.5", + "resolved": "https://registry.npmjs.org/@axe-core/puppeteer/-/puppeteer-4.8.5.tgz", + "integrity": "sha512-lwr1pXnB2Jn+st5DfTosu0n/t5P90Sw4dzF2f54czguuWHNnqaMRQxial5VkyTGFu/ESQLXFoKwfvu1kKPI3WQ==", + "dev": true, + "dependencies": { + "axe-core": "~4.8.4" + }, + "engines": { + "node": ">=6.4.0" + }, + "peerDependencies": { + "puppeteer": ">=1.10.0" + } + }, "node_modules/@babel/code-frame": { "version": "7.22.13", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", @@ -980,12 +994,6 @@ "node": ">=10.13.0" } }, - "node_modules/@types/html_codesniffer": { - "version": "2.5.4", - "resolved": "https://registry.npmjs.org/@types/html_codesniffer/-/html_codesniffer-2.5.4.tgz", - "integrity": "sha512-l7LZ5umKNiJIdq5b9Z8WDhJ2IKd8MZejapCssvdKF7RCmLQDx3bcEDF2T8PwGyK6rhcX/ggovd2sqYICywGzOA==", - "dev": true - }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -1334,13 +1342,12 @@ } }, "node_modules/axe-core": { - "version": "4.4.2", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz", - "integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==", + "version": "4.8.4", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.4.tgz", + "integrity": "sha512-CZLSKisu/bhJ2awW4kJndluz2HLZYIHh5Uy1+ZwDRkJi69811xgIXXfdU9HSLX0Th+ILrHj8qfL/5wzamsFtQg==", "dev": true, - "peer": true, "engines": { - "node": ">=12" + "node": ">=4" } }, "node_modules/axobject-query": { @@ -3516,15 +3523,6 @@ "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", "dev": true }, - "node_modules/html_codesniffer": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/html_codesniffer/-/html_codesniffer-2.5.1.tgz", - "integrity": "sha512-vcz0yAaX/OaV6sdNHuT9alBOKkSxYb8h5Yq26dUqgi7XmCgGUSa7U9PiY1PBXQFMjKv1wVPs5/QzHlGuxPDUGg==", - "dev": true, - "engines": { - "node": ">=6" - } - }, "node_modules/html-tags": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", @@ -7317,6 +7315,15 @@ "integrity": "sha512-1CJwTd6B6XDb6HETcHMwjRmQLQi2FgjM1rYUO6wf1yizKVPC9V66vmvVCtgePMzWmhsLqdhOPLWt+fNvG46FoA==", "dev": true }, + "@axe-core/puppeteer": { + "version": "4.8.5", + "resolved": "https://registry.npmjs.org/@axe-core/puppeteer/-/puppeteer-4.8.5.tgz", + "integrity": "sha512-lwr1pXnB2Jn+st5DfTosu0n/t5P90Sw4dzF2f54czguuWHNnqaMRQxial5VkyTGFu/ESQLXFoKwfvu1kKPI3WQ==", + "dev": true, + "requires": { + "axe-core": "~4.8.4" + } + }, "@babel/code-frame": { "version": "7.22.13", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", @@ -7783,12 +7790,6 @@ "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", "dev": true }, - "@types/html_codesniffer": { - "version": "2.5.4", - "resolved": "https://registry.npmjs.org/@types/html_codesniffer/-/html_codesniffer-2.5.4.tgz", - "integrity": "sha512-l7LZ5umKNiJIdq5b9Z8WDhJ2IKd8MZejapCssvdKF7RCmLQDx3bcEDF2T8PwGyK6rhcX/ggovd2sqYICywGzOA==", - "dev": true - }, "@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -8053,11 +8054,10 @@ "dev": true }, "axe-core": { - "version": "4.4.2", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz", - "integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==", - "dev": true, - "peer": true + "version": "4.8.4", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.4.tgz", + "integrity": "sha512-CZLSKisu/bhJ2awW4kJndluz2HLZYIHh5Uy1+ZwDRkJi69811xgIXXfdU9HSLX0Th+ILrHj8qfL/5wzamsFtQg==", + "dev": true }, "axobject-query": { "version": "2.2.0", @@ -9632,12 +9632,6 @@ "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", "dev": true }, - "html_codesniffer": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/html_codesniffer/-/html_codesniffer-2.5.1.tgz", - "integrity": "sha512-vcz0yAaX/OaV6sdNHuT9alBOKkSxYb8h5Yq26dUqgi7XmCgGUSa7U9PiY1PBXQFMjKv1wVPs5/QzHlGuxPDUGg==", - "dev": true - }, "html-tags": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", diff --git a/package.json b/package.json index d0f9734b..65483526 100644 --- a/package.json +++ b/package.json @@ -89,8 +89,8 @@ "@18f/eslint-plugin-identity": "^2.0.0", "@18f/identity-build-sass": "^3.0.0", "@18f/identity-stylelint-config": "^4.0.0", + "@axe-core/puppeteer": "^4.8.5", "@happy-dom/global-registrator": "^13.6.2", - "@types/html_codesniffer": "^2.5.4", "@types/pixelmatch": "^5.2.6", "@types/pngjs": "^6.0.4", "browserslist": "^4.23.0", @@ -99,7 +99,6 @@ "eslint-plugin-import": "^2.29.1", "eslint-plugin-prettier": "^5.1.3", "fast-glob": "^3.3.2", - "html_codesniffer": "^2.5.1", "npm-run-all": "^4.1.5", "pixelmatch": "^5.3.0", "pngjs": "^7.0.0", diff --git a/test/accessibility.test.js b/test/accessibility.test.js index ace00333..a276710c 100644 --- a/test/accessibility.test.js +++ b/test/accessibility.test.js @@ -1,19 +1,13 @@ -/* eslint-disable no-await-in-loop */ - import { describe, before, after, test, it } from 'node:test'; import assert from 'node:assert'; -import { createRequire } from 'node:module'; import { relative, dirname } from 'node:path'; import * as esbuild from 'esbuild'; import glob from 'fast-glob'; import puppeteer from 'puppeteer'; - -const require = createRequire(import.meta.url); +import { AxePuppeteer } from '@axe-core/puppeteer'; const paths = glob.sync('dist/*/index.html').map((path) => `/${dirname(relative('dist', path))}/`); -const MESSAGE_TYPE_ERROR = 1; - describe('accessibility', () => { /** @type {import('esbuild').BuildContext} */ let esbuildContext; @@ -42,21 +36,10 @@ describe('accessibility', () => { test(path, async () => { const page = await browser.newPage(); await page.goto(`http://localhost:${port}${path}`); - await page.addScriptTag({ path: require.resolve('html_codesniffer/build/HTMLCS.js') }); - const messages = await page.evaluate( - () => - new Promise((resolve) => { - window.HTMLCS.process('WCAG2AA', window.document.body, () => { - resolve(window.HTMLCS.getMessages()); - }); - }), - ); - for (const message of messages) { - if (message.type === MESSAGE_TYPE_ERROR) { - throw message; - } - } + const results = await new AxePuppeteer(page).withTags(['wcag2a', 'wcag2aa']).analyze(); await page.close(); + + assert.deepStrictEqual(results.violations, []); }); }); });