WAX Dev Testing Framework

Description

A lightweight and extensive automated accessibility testing framework

As 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.

Installation

Install the package using npm:

``sh
npm install @wally-ax/wax-dev
`

Or using yarn:

`sh
yarn add @wally-ax/wax-dev
`

Usage

$3

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

$3

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

$3

The results will be an array of violations based on the config. Example:

`json
[
{
"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": "

List item 2

• List item ...

",
"impact": "serious",
"message": "

and
must only directly contain
1. ,