Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

chai-a11y-axe

1.3.0 • Public • Published

permalink: 'testing/testing-chai-a11y-axe.html' title: Chai A11y aXe section: guides tags:

  • guides

Chai A11y aXe

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

Part of Open Web Components: guides, tools and libraries for modern web development and web components

CircleCI BrowserStack Status Renovate enabled

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.

Rules can be ignored by passing ignoredRules with a list of ignored rules as a configuration option.

import { fixture, expect, html } from '@open-wc/testing';
 
it('passes accessibility test', async () => {
  const el = await fixture(html` <button>label</button> `);
  await expect(el).to.be.accessible();
});
 
it('fails without label', async () => {
  const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
  await expect(el).not.to.be.accessible();
});
 
it('passes for all rules, ignores attributes test', async () => {
  const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
  await expect(el).to.be.accessible({
    ignoredRules: ['aria-valid-attr-value'],
  });
});
 
it('accepts "done" option', done => {
  fixture(html` <button>some light dom</button> `).then(el => {
    expect(el).to.be.accessible({
      done,
    });
  });
});

Chai TDD UI

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

import { fixture, assert, html } from '@open-wc/testing';
 
it('passes axe accessible tests', async () => {
  const el = await fixture(html` <button>some light dom</button> `);
  await assert.isAccessible(el);
});
 
it('accepts ignored rules list', async () => {
  const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
  await assert.isAccessible(el, {
    ignoredRules: ['aria-valid-attr-value'],
  });
});
 
it('passes for negation', async () => {
  const el = await fixture(html` <div aria-labelledby="test-x"></div> `);
  await assert.isNotAccessible(el);
});

Install

npm i chai-a11y-axe

DownloadsWeekly Downloads

5,442

Version

1.3.0

License

MIT

Unpacked Size

11.4 kB

Total Files

10

Last publish

Collaborators

  • avatar