Use AI to create the config file to map custom components in VS Code

Use AI to create the config file to map custom components directly from VS Code.

You need a config file to map and validate custom design-system components against accessibility rules. To create this config file, you can use a VS Code chat participant provided by BrowserStack Accessibility DevTools.

This VS Code chat participant helps you to:

• Parse component metadata and usage.
• Map components to accessibility patterns.
• Flag violations with actionable guidance.

Prerequisites:

• VS Code with GitHub Copilot and the Accessibility DevTools VS Code extension.
• The files with the custom component implementation are present in the user’s workspace in VS Code.
• A cloned repo with your design system and component source available.

Create the config file for linting

1. Open Copilot Chat in VS Code.
2. Trigger the participant using @accessibility-devtools followed by /generate-config.
3. Provide component files or folders containing your custom component implementation code.
4. Use the generated configuration in one of these ways:
   • Chat output: Copy and paste the output from chat to any location you prefer.
   • Download JSON/YAML: Download a JSON or YAML file from chat to your file system. The file contains the generated accessibility configuration.
   • Add to project: Add the generated configuration to your project.
     • Update or create:
       • If no accessibility-devtools.config.yml file exists, the chat participant creates one.
       • If accessibility-devtools.config.yml already exists, the chat participant overwrites the existing one.

Sample config file

The following is a sample accessibility-devtools.config.yml file: