Preconfigured Component Libraries

Link to Preconfigured Component Libraries copied to clipboard

Discusses predefined mappings for several popular component libraries in axe DevTools Linter

Free Trial

axe DevTools Linter comes with built-in support for several popular component libraries. When enabled, components from those libraries are tested for accessibility in the same way native HTML elements are.

Introduction

The following libraries are currently supported:

NPM package name For more information
@deque/cauldron-react Cauldron React: Accessible Components Library
@mui/material Material UI
react-native React Native

To enable library component linting, add the NPM package name of the library to the global-libraries array in your axe-linter.yml file:

global-libraries:
  - '@mui/material'
important

You must enclose strings that begin with @ inside quotes in YAML as it is a reserved character.

Or the equivalent JSON configuration (for the REST service) is shown below:

{
  "config": {
    "global-libraries": [
      "@mui/material"
    ]
  }
}

Any component with the same name as a component from the global library will be treated as that library component, allowing re-exporting and redeclaring components without losing their mapping.

Cauldron React

Cauldron React version 4.7.0 and later is currently supported.

Cauldron React Configuration

To use the Cauldron mappings with the axe Accessibility Linter extension for VS Code, add the following lines to your axe-linter.yml file:

global-libraries:
  - '@deque/cauldron-react'

Cauldron Example

The following example shows a Cauldron Button element without text content, which is an accessibility error:

<Button></Button>

In VS Code after you've enabled the Cauldron library in your configuration, you will see an error such as the following:

This image shows the Cauldron Button element without any text content, which is an accessibility error and is indicated by an error tooltip in VS Code.

Material UI

Material UI version 5.11.15 and later are currently supported.

Material UI Configuration

To use the Material UI mappings with the axe Accessibility Linter extension for VS Code, add the following lines to your axe-linter.yml file:

global-libraries:
  - '@mui/material'

Material UI Example

The following example shows an accessibility error where aria-colindex is being used incorrectly with the Material UI component ImageList:

<ImageList aria-colindex="1"/>

In VS Code, you'll see this error message:

Image shows an error when using the ara-colindex attribute with the MUI ImageList component.

If you don't set the global-libraries option to '@mui/material' in your configuration file, you will not see this error.

note

Accessibility attributes you set using the inputProps attribute on Material UI input elements are currently ignored.

React Native

React Native Configuration

To use the Cauldron mappings with the axe Accessibility Linter extension for VS Code, add the following lines to your axe-linter.yml file:

global-libraries:
  - react-native

Other documentation for using the React Native mappings is in the section Custom Component Linting for React Native.

See Also

Configuring axe DevTools Linter

Custom Components and the VS Code Extension

Custom Components and the REST Endpoint

Custom Component Linting for React Native