Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jsx-eslint/eslint-plugin-jsx-a11y
Static AST checker for a11y rules on JSX elements.
https://github.com/jsx-eslint/eslint-plugin-jsx-a11y
a11y accessibility aria eslint hacktoberfest jsx react
Last synced: 10 days ago
JSON representation
Static AST checker for a11y rules on JSX elements.
- Host: GitHub
- URL: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y
- Owner: jsx-eslint
- License: mit
- Created: 2016-02-17T20:50:33.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2024-11-17T17:51:29.000Z (25 days ago)
- Last Synced: 2024-11-29T08:05:30.447Z (13 days ago)
- Topics: a11y, accessibility, aria, eslint, hacktoberfest, jsx, react
- Language: JavaScript
- Homepage:
- Size: 2.13 MB
- Stars: 3,426
- Watchers: 43
- Forks: 638
- Open Issues: 102
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-accessibility - eslint-plugin-jsx-a11y
- awesome-github-star - eslint-plugin-jsx-a11y - eslint | 3213 | (JavaScript)
- awesome-list - eslint-plugin-jsx-a11y - eslint | 2480 | (JavaScript)
- best-of-react - GitHub - 22% open · ⏱️ 30.01.2024): (Developer Tools)
README
Get professional support for eslint-plugin-jsx-a11y on Tidelift
# eslint-plugin-jsx-a11y
Static AST checker for accessibility rules on JSX elements.
#### _Read this in [other languages](https://github.com/ari-os310/eslint-plugin-jsx-a11y/blob/HEAD/translations/Translations.md)._
[Mexican Spanish🇲🇽](https://github.com/ari-os310/eslint-plugin-jsx-a11y/blob/HEAD/translations/README.mx.md)
## 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](https://github.com/dequelabs/axe-core-npm/tree/develop/packages/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
**If you are installing this plugin via `eslint-config-airbnb`, please follow [these instructions](https://github.com/airbnb/javascript/tree/HEAD/packages/eslint-config-airbnb#eslint-config-airbnb-1).**
You'll first need to install [ESLint](https://eslint.org/docs/latest/user-guide/getting-started):
```sh
# npm
npm install eslint --save-dev
# yarn
yarn add eslint --dev
```
Next, install `eslint-plugin-jsx-a11y`:
```sh
# npm
npm install eslint-plugin-jsx-a11y --save-dev
# yarn
yarn add eslint-plugin-jsx-a11y --dev
```
**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.
## Usage - Legacy Config (`.eslintrc`)
Add `jsx-a11y` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
```json
{
"plugins": ["jsx-a11y"]
}
```
Then configure the rules you want to use under the rules section.
```json
{
"rules": {
"jsx-a11y/rule-name": 2
}
}
```
You can also enable all the recommended or strict rules at once.
Add `plugin:jsx-a11y/recommended` or `plugin:jsx-a11y/strict` in `extends`:
```json
{
"extends": ["plugin:jsx-a11y/recommended"]
}
```
### Configurations
> As you are extending our configuration, you can omit `"plugins": ["jsx-a11y"]` from your `.eslintrc` configuration file.
```json
{
"settings": {
"jsx-a11y": {
"polymorphicPropName": "as",
"components": {
"CityInput": "input",
"CustomButton": "button",
"MyButton": "button",
"RoundButton": "button"
},
"attributes": {
"for": ["htmlFor", "for"]
}
}
}
}
```
## Usage - Flat Config (`eslint.config.js`)
The default export of `eslint-plugin-jsx-a11y` is a plugin object.
```js
const jsxA11y = require('eslint-plugin-jsx-a11y');
module.exports = [
…
{
files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
plugins: {
'jsx-a11y': jsxA11y,
},
languageOptions: {
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
},
rules: {
// ... any rules you want
'jsx-a11y/alt-text': 'error',
},
// ... others are omitted for brevity
},
…
];
```
### Shareable Configs
There are two shareable configs, provided by the plugin.
- `flatConfigs.recommended`
- `flatConfigs.strict`
#### CJS
```js
const jsxA11y = require('eslint-plugin-jsx-a11y');
export default [
jsxA11y.flatConfigs.recommended,
{
// Your additional configs and overrides
},
];
```
#### ESM
```js
import jsxA11y from 'eslint-plugin-jsx-a11y';
export default [
jsxA11y.flatConfigs.recommended,
{
// Your additional configs and overrides
},
];
```
**Note**: Our shareable configs do NOT configure `files` or [`languageOptions.globals`](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#configuration-objects).
For most of the cases, you probably want to configure some of these properties yourself.
```js
const jsxA11y = require('eslint-plugin-jsx-a11y');
const globals = require('globals');
module.exports = [
…
{
files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
...jsxA11y.flatConfigs.recommended,
languageOptions: {
...jsxA11y.flatConfigs.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:
`Configurations `
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
💼 Configurations enabled in.\
🚫 Configurations disabled in.\
☑️ Set in the `recommended` configuration.\
🔒 Set in the `strict` configuration.\
💡 Manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggestions).\
❌ Deprecated.