Preconfigured Component Libraries
Discusses predefined mappings for several popular component libraries in axe DevTools Linter
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'
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 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.
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 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