This package contains custom axe rules and checks for APCA Bronze and Silver+ conformance levels.
npm install --save-dev axe-core axe-apca
import axe from "axe-core";
import { registerAxeAPCA } from 'axe-apca';
registerAxeAPCA('bronze'); // or registerAxeAPCA('silver');
// consider turning off default WCAG 2.2 AA color contrast rules when using APCA
axe.configure({
rules: [{ id: "color-contrast", enabled: false }]
})
axe.run(document, (err, results) => {
if (err) throw err;
console.log(results);
});
To set custom thresholds for APCA checks, follow these steps:
- Use
custom
as the first argument when callingregisterAxeAPCA
. - Provide a function as the second argument, optionally accepting
fontSize
andfontWeight
arguments.
const customConformanceThresholdFn = (fontSize, fontWeight) => {
const size = parseFloat(fontSize);
const weight = parseFloat(fontWeight);
return size >= 32 || weight > 700 ? 45 : 60;
};
registerAxeAPCA('custom', customConformanceThresholdFn);
- Node.js v18+
To run eslint (including prettier as a formatter) you can run
npm run lint
To have eslint fix any autofixable issue run
npm run lint:fix
Tests are run by web-test-runner in combination with playwright against chromium, firefox and webkit
npm run test
For watch mode
npm run test:watch
TBC
Copyright 2023 Stack Exchange, Inc and released under the MIT License.