Testing >> Chai A11y aXe ||30

This module provides a Chai plugin to perform automated accessibility tests via axe.

This package is shipped as a dependency with @open-wc/testing so you do not need to install this seperately.

[//]: # 'AUTO INSERT HEADER PREPUBLISH'

Chai BDD UI

The BDD UI works with chai's expect function.

Because the test is asynchronous, you must either await its result or pass a done parameter in the plugin's options object.

You can ignore tags or ARIA rules, see configuration

``js
import { fixture, expect, html } from '@open-wc/testing';

it('passes accessibility test', async () => {
const el = await fixture(html label );
await expect(el).to.be.accessible();
});

it('fails without label', async () => {
const el = await fixture(html

);
await expect(el).not.to.be.accessible();
});

it('passes for all rules, ignores attributes test', async () => {
const el = await fixture(html

);
await expect(el).to.be.accessible({
ignoredRules: ['aria-valid-attr-value'],
});
});

it('fails without alt attribute', async () => {
const el = await fixture(html );
await expect(el).not.to.be.accessible();
});

it('passes without alt attribute becuase img are ignored', async () => {
const el = await fixture(html );
await expect(el).not.to.be.accessible({
ignoredTags: ['img'],
});
});

it('accepts "done" option', done => {
fixture(html some light dom ).then(el => {
expect(el).to.be.accessible({
done,
});
});
});
`

Chai TDD UI

The isAccessible() and isNotAccessible() methods work on Chai's assert function.

`js
import { fixture, assert, html } from '@open-wc/testing';

it('passes axe accessible tests', async () => {
const el = await fixture(html some light dom );
await assert.isAccessible(el);
});

it('accepts ignored rules list', async () => {
const el = await fixture(html

);
await assert.isAccessible(el, {
ignoredRules: ['aria-valid-attr-value'],
});
});

it('passes for negation', async () => {
const el = await fixture(html

);
await assert.isNotAccessible(el);
});
`

Configuration

$3

Rules can be ignored by passing ignoredRules with a list of rules as a configuration option. e.g.: { ignoredRules: ['aria-valid-attr-value'] }

Here are all ARIA rules applied by axe-core. You will also find them in the violations report when running offending tests with this plugin.

This configuration option is passed down to axe-core API so that the configured test will run with those rules disabled.

$3

Ignore elements with a specific tag by passing ignoredTags with a list of tags to ignore. e.g.: { ignoredTags: ['img'] }`

This configuration option will remove elements from the accessibility tree by setting the aria-hidden attribute for them.