Preconfigured Component Libraries

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

Introduction

The components defined by the following packages are currently supported:

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'

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 or the JetBrains plugin, 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 your IDE (VS Code is shown) after you've enabled the Cauldron library in your configuration, you will see an error such as the following:

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 or the JetBrains plugin, 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 your IDE (VS Code is shown), you'll see this error message:

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

React Native

React Native Configuration

To use the Cauldron mappings with the axe Accessibility Linter extension for VS Code or the JetBrains plugin, 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 or the JetBrains Plugin

Custom Components and the REST Endpoint

Custom Component Linting for React Native