A next-generation tool to create blazing-fast documentation sites
API
created:8/31/2020
,
updated:12/28/2020

Overview

The axe-plugin is an accessibility testing plugin using the axe-core library from deque

Some of the design goals:

  • Test at the component-level.
  • Provide a dashboard view to quickly see the errors and tests for the component.
  • Ability to select and outline the sub-elements generating the errors.
  • Ability to see details from the errors and passed rules.

Install

yarn add @component-controls/axe-plugin --dev

1. Add AllyPage to your site:

The first integration option is to simply add the provided AllyPage on a route to your stories.

Add a build-time route

.config/buildtime.js

const { defaultBuildConfig } = require('@component-controls/core');
module.exports = {
stories: [...],
pages: {
story: {
tabs: {
...defaultBuildConfig.pages.story.tabs,
'ally': '@component-controls/axe-plugin/AllyPage'
},
},
},
}

ally page integrationally page

2. Add AllyBlock block to a page:

A more advanced integration option is to create a custom page with an AllyBlock in it.

import {...} from '@component-controls/blocks';
import { AllyBlock } from '@component-controls/axe-plugin';
export const CustomePage= () => (
<>
<EditPage />
<Title />
<Subtitle />
<Description />
<Playground title=".">
<Story id="." />
</Playground>
<PropsTable of="." title="Controls" visibility="controls" />
<AllyBlock title="A11y tests" />
</>
);

Example stories can be found here

AllyBlock parts

For this tutorial, lets create an example story containing a <span /> with a grey text color:

<div>some <span style={{ color: 'grey'}}>text</span></div>

You can play with with AllyBlock below to get a better understanding of its functionality

  1. To outline the color-contrast error, click on the show errors checkbox
  2. To view the list of errors, click on the errors (1) tab
  3. To view the a11y tests that have passed, click on the passed (1) tab

Some text

Some text