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: about 2 months 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 (over 8 years ago)
- Default Branch: main
- Last Pushed: 2024-04-08T10:32:24.000Z (3 months ago)
- Last Synced: 2024-04-14T07:10:15.497Z (2 months ago)
- Topics: a11y, accessibility, aria, eslint, hacktoberfest, jsx, react
- Language: JavaScript
- Homepage:
- Size: 1.91 MB
- Stars: 3,319
- Watchers: 47
- Forks: 626
- Open Issues: 103
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Lists
- awesome-list - eslint-plugin-jsx-a11y - eslint | 2480 | (JavaScript)
- awesome-github-star - eslint-plugin-jsx-a11y - eslint | 3213 | (JavaScript)
- best-of-react - GitHub - 22% open · ⏱️ 30.01.2024): (Developer Tools)
- awesome-accessibility - eslint-plugin-jsx-a11y
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
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"
}
}
}
}
```
#### 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.
#### 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`.
⚠️ 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.\
❌ Deprecated.