WallyAX's developer friendly accessibility test framework
npm install @wally-ax/wax-devAs a part of the WallyAX ecosystem accessibility tools, this package helps run accessibility tests on components and can easily be part of existing unit or integration testing.
Install the package using npm:
``sh`
npm install @wally-ax/wax-dev
Or using yarn:
`sh`
yarn add @wally-ax/wax-dev
Create a configuration file named wax.config.js in the root directory of your project. The file should look like this:
`javascript`
module.exports = {
rules: ["image-alt", "list"],
apiKey: "YOUR_WALLY_DEVELOPER_API_KEY"
};
rules: An array of strings representing rule definitions. Available rules can be found here. An empty array will include all rules.
apiKey: A string required for the wax-dev to work. You can get the api key from WallyAX Account Portal
runWax function takes the rendered or pre-rendered html content and options as input.
runWaxUrl function takes the Website URL and options as input.
For a ButtonList component:
`javascript
import { render } from '@testing-library/react';
import ButtonList from './ButtonList';
const runWax = require('@wally-ax/wax-dev');
describe('ButtonList AX Test', () => {
test('should have no accessibility violations', async () => {
const { container } = render(
const ele = JSON.stringify(container.innerHTML);
const violations = await runWax(ele, { rules: ["images-alt"] });
expect(violations).toHaveLength(0);
});
});
`
Note: the rule configuration at test level will be overridden by the global configuration in wax.config.js
The results will be an array of violations based on the config. Example:
` List item 2json
[
{
"description": "Ensures elements have alternate text or a role of none or presentation",
"element": "",
"impact": "critical",
"message": "Images must have alternate text"
},
{
"description": "Ensures every form element has a label",
"element": "",
"impact": "critical",
"message": "Form elements must have labels"
},
{
"description": "Ensures that lists are structured correctly",
"element": "
",
"impact": "serious",
"message": " and
must only directly contain