@component-controls/axe-plugin

Axe ally testing plugin

Usage no npm install needed!

<script type="module">
  import componentControlsAxePlugin from 'https://cdn.skypack.dev/@component-controls/axe-plugin';
</script>

README

Table of contents

In action

Example site

Overview

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.

ally tests with axe plugin

Install

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

Documentation

A11Y Testing

API

AllyBlock

Story block container that displays displays the axe ally test results

AllyBlock source code

properties

Name Type Description
axeOptions Spec
id string optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
name string
title string optional section title for the block.
description string optional markdown description.
collapsible boolean if false, will nothave a collapsible frame.
data-testid string testing id
plain boolean inner container variant or plain
sx ThemeUIStyleObject
ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>

AxeContextProvider

AxeContextProvider source code

trimNode

trimNode source code

SelectionContextProvider

SelectionContextProvider source code

useIsTagSelected

useIsTagSelected source code

isSelected

isSelected source code

useIsTagSelected

useIsTagSelected source code