Lint custom components

Create the configuration file

1. Create a configuration file in the root of your project using either JSON or YAML format, such as accessibility-devtools.config.json or accessibility-devtools.config.yaml.

2. Add the following version declaration at the beginning of your file:

    version: 1
   

Define component mappings

Map your custom component names to standard HTML elements in the configuration file. The linter uses these mappings to analyze your custom components as if they were native HTML elements.

The following example shows a basic mapping:

{
  "components": {
    "react": {
      "PrimaryButton": {
        "element": "button"
      },
      "TextBox": {
        "element": "input"
      }
    }
  }
}

Configure attribute mapping

Map your custom props to specific HTML attributes to ensure the linter validates the correct values. You can configure the following mappings:

• Attribute renaming: Map a custom prop (e.g., action) to a native attribute (such as type).
• ARIA support: Use the wildcard aria-* to automatically map all props starting with aria- to the native element.
• Text content: Map a specific prop (e.g., label) to the inner text content of the rendered element using the <text> tag.
• Polymorphic components: If your component renders different tags based on a prop (e.g., as="h1"), map that prop to the <element> tag.

The following example demonstrates attribute mapping:

{
  "components": {
    "react": {
      "CustomButton": {
        "element": "button",
        "attributes": {
          "label": "<text>",
          "variant": "class",
          "aria-": "aria-",
          "as": "<element>"
        }
      }
    }
  }
}