A set of eslint rules against Fluent UI React v9 to prevent common accessibility issues.

Finally! Lint rules against React props.

Covers hard-coded string props and variables for props.

<Label htmlFor="some-id">Some Label</Label>
<Input id="some-id" />

<Label htmlFor={someId}>Some Label</Label>
<Input id={someId} />

Developed and maintained by the Microsoft Research Ireland Accessibility V-Team.

You'll first need to install ESLint:

# npm
npm install eslint --save-dev

# yarn
yarn add eslint --dev

Next, install @microsoft/eslint-plugin-fluentui-jsx-a11y:

# npm
npm install @microsoft/eslint-plugin-fluentui-jsx-a11y --save-dev

# yarn
yarn add @microsoft/eslint-plugin-fluentui-jsx-a11y --dev

Or add this package to your package.json file:

"devDependencies": {
    "@microsoft/eslint-plugin-fluentui-jsx-a11y": "1.0.0"
  }

And then you can run

  npm install

You will need to add the plugin to your .eslintrc configuration file.

Suggested Configuration:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint",
    "react-hooks",
    "@microsoft/fluentui-jsx-a11y"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@microsoft/fluentui-jsx-a11y/recommended"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/prop-types": "off",
  },

This plugin does a static code analysis of the React JSX to spot accessibility issues in apps built with FluentUI. That way, common accessibility issues are detected before the pull request stage and will be prevented from being checked into a code base.

As the plugin can only catch errors in static source code, please 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.

We also recomend that you use this plugin in conjuction with the eslint-plugin-jsx-a11y plugin. Please configure eslint-plugin-jsx-a11y to work with FluentUI components.

Example:

{
    "settings": {
        "jsx-a11y": {
            "components": {
                "Button": "button",
                "Image": "img"
            }
        }
    }
}

This plugin was generated with The ESLint generator for Yeoman: eslint/generator-eslint.

yo eslint:plugin

If you want to create a new ESLint rule, make sure you're in the top-level directory of an ESLint repo clone or an ESLint plugin and type:

yo eslint:rule

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.

💼 Configurations enabled in.
⚠️ Configurations set to warn in.
✅ Set in the recommended configuration.
🔧 Automatically fixable by the --fix CLI option.