eslint-plugin-jsx-a11y-x weekly downloads statistics

eslint-plugin-jsx-a11y-x

Static AST checker for accessibility rules on JSX elements.

Why?

This plugin does a static evaluation of the JSX to spot accessibility issues in React apps. Because it only catches errors in static code, use it in combination with @axe-core/react to test the accessibility of the rendered DOM. Consider these tools just as one step of a larger a11y testing process and always test your apps with assistive technology.

Installation

You'll first need to install ESLint:

# npm
npm install eslint --save-dev

# yarn
yarn add eslint --dev

Next, install eslint-plugin-jsx-a11y-x:

# npm
npm install -D eslint-plugin-jsx-a11y-x

# yarn
yarn add -D eslint-plugin-jsx-a11y-x

# pnpm
pnpm add -D eslint-plugin-jsx-a11y-x

Note: If you installed ESLint globally (using the -g flag in npm, or the global prefix in yarn) then you must also install eslint-plugin-jsx-a11y globally.

<a id="usage"></a>

Usage (eslint.config.js)

The default export of eslint-plugin-jsx-a11y-x is a plugin object.

import jsxA11yX from 'eslint-plugin-jsx-a11y-x';

export default [
  // …
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    plugins: {
      'jsx-a11y-x': jsxA11yX,
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      // ... any rules you want
      'jsx-a11y-x/alt-text': 'error',
    },
    // ... others are omitted for brevity
  },
  …
];

Shareable Configs

There are two shareable configs, provided by the plugin.

• configs.recommended
• configs.strict

CJS

const jsxA11yX = require('eslint-plugin-jsx-a11y-x');

export default [
  jsxA11yX.configs.recommended,
  {
    // Your additional configs and overrides
  },
];

ESM

import jsxA11yX from 'eslint-plugin-jsx-a11y-x';

export default [
  jsxA11yX.configs.recommended,
  {
    // Your additional configs and overrides
  },
];

Note: Our shareable configs do NOT configure files or languageOptions.globals. For most of the cases, you probably want to configure some of these properties yourself.

import jsxA11yX from 'eslint-plugin-jsx-a11y-x';
import globals from 'globals);

export default [
  …
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    ...jsxA11yX.configs.recommended,
    languageOptions: {
      ...jsxA11yX.configs.recommended.languageOptions,
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  …
];

Component Mapping

To enable your custom components to be checked as DOM elements, you can set global settings in your configuration file by mapping each custom component name to a DOM element type.

Attribute Mapping

To configure the JSX property to use for attribute checking, you can set global settings in your configuration file by mapping each DOM attribute to the JSX property you want to check. For example, you may want to allow the for attribute in addition to the htmlFor attribute for checking label associations.

Polymorphic Components

You can optionally use the polymorphicPropName setting to define the prop your code uses to create polymorphic components. This setting will be used determine the element type in rules that require semantic context.

For example, if you set the polymorphicPropName setting to as then this element:

<Box as="h3">Configurations </Box>

will be evaluated as an h3. If no polymorphicPropName is set, then the component will be evaluated as Box.

To restrict polymorphic linting to specified components, additionally set polymorphicAllowList to an array of component names.

⚠️ Polymorphic components can make code harder to maintain; please use this feature with caution.

Supported Rules

<!-- begin auto-generated rules list -->

💼 Configurations enabled in.
🚫 Configurations disabled in.
☑️ Set in the recommended configuration.
🔒 Set in the strict configuration.
💡 Manually fixable by editor suggestions.…