diff --git a/README.md b/README.md index 555ac19..eccc0e1 100644 --- a/README.md +++ b/README.md @@ -85,6 +85,7 @@ All peer dependencies used by `@code-pushup/eslint-config` are listed below, alo | ![cypress](./docs/icons/material/cypress.png) | [eslint-plugin-cypress](https://www.npmjs.com/package/eslint-plugin-cypress) | `>=3.3.0` | | | ![jest](./docs/icons/material/jest.png) | [eslint-plugin-jest](https://www.npmjs.com/package/eslint-plugin-jest) | `^28.8.0` | | | ![test](./docs/icons/icons8/test.png) | [eslint-plugin-jest-formatting](https://www.npmjs.com/package/eslint-plugin-jest-formatting) | `^3.0.0` | | +| ![accessibility](./docs/icons/icons8/accessibility.png) | [eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y) | `^6.10.0` | | | ![nodejs](./docs/icons/material/nodejs.png) | [eslint-plugin-n](https://www.npmjs.com/package/eslint-plugin-n) | `>=17.0.0` | | | ![playwright](./docs/icons/material/playwright.png) | [eslint-plugin-playwright](https://www.npmjs.com/package/eslint-plugin-playwright) | `^2.1.0` | | | ![react](./docs/icons/material/react.png) | [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react) | `^7.36.0` | | diff --git a/docs/icons/icons8/accessibility.png b/docs/icons/icons8/accessibility.png new file mode 100644 index 0000000..2c78241 Binary files /dev/null and b/docs/icons/icons8/accessibility.png differ diff --git a/docs/react.md b/docs/react.md index 81910f9..6ecfdd0 100644 --- a/docs/react.md +++ b/docs/react.md @@ -8,7 +8,7 @@ Config for **React** projects. 2. Since this plugin requires additional peer dependencies, you have to install them as well: ```sh - npm install -D eslint-plugin-{react,react-hooks} + npm install -D eslint-plugin-{jsx-a11y,react,react-hooks} ``` 3. Add to your `eslint.config.js` file: @@ -20,85 +20,117 @@ Config for **React** projects. export default tseslint.config(...react); ``` -## ๐Ÿ“ Rules (69) +## ๐Ÿ“ Rules (101) > ๐Ÿ”ง Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).
๐Ÿ’ก Manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
๐Ÿงช๐Ÿšซ Disabled for [test files](../README.md#๐Ÿงช-test-overrides).
๐Ÿงชโš ๏ธ Severity lessened to warning for [test files](../README.md#๐Ÿงช-test-overrides). -### ๐Ÿšจ Errors (43) +### ๐Ÿšจ Errors (72) -| Plugin | Rule | Options | Autofix | Overrides | -| :------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-----: | :-------: | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [button-has-type](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/button-has-type.md)
Disallow usage of `button` elements without an explicit `type` attribute | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [default-props-match-prop-types](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/default-props-match-prop-types.md)
Enforce all defaultProps have a corresponding non-required PropType | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [forbid-prop-types](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/forbid-prop-types.md)
Disallow certain propTypes | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [forward-ref-uses-ref](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/forward-ref-uses-ref.md)
Require all forwardRef components include a ref parameter | | ๐Ÿ’ก | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [iframe-missing-sandbox](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/iframe-missing-sandbox.md)
Enforce sandbox attribute on iframe elements | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [jsx-key](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/jsx-key.md)
Disallow missing `key` props in iterators/collection literals | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [jsx-no-bind](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/jsx-no-bind.md)
Disallow `.bind()` or arrow functions in JSX props | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [jsx-no-comment-textnodes](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/jsx-no-comment-textnodes.md)
Disallow comments from being inserted as text nodes | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [jsx-no-constructed-context-values](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/jsx-no-constructed-context-values.md)
Disallows JSX context provider values from taking values that will cause needless rerenders | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [jsx-no-duplicate-props](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/jsx-no-duplicate-props.md)
Disallow duplicate properties in JSX | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [jsx-no-script-url](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/jsx-no-script-url.md)
Disallow usage of `javascript:` URLs | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [jsx-no-target-blank](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/jsx-no-target-blank.md)
Disallow `target="_blank"` attribute without `rel="noreferrer"` | | ๐Ÿ”ง | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [jsx-no-undef](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/jsx-no-undef.md)
Disallow undeclared variables in JSX | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [jsx-uses-react](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/jsx-uses-react.md)
Disallow React to be incorrectly marked as unused | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [jsx-uses-vars](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/jsx-uses-vars.md)
Disallow variables used in JSX to be incorrectly marked as unused | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-access-state-in-setstate](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-access-state-in-setstate.md)
Disallow when this.state is accessed within setState | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-array-index-key](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-array-index-key.md)
Disallow usage of Array index in keys | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-children-prop](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-children-prop.md)
Disallow passing of children as props | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-danger](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-danger.md)
Disallow usage of dangerous JSX properties | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-danger-with-children](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-danger-with-children.md)
Disallow when a DOM element is using both children and dangerouslySetInnerHTML | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-deprecated](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-deprecated.md)
Disallow usage of deprecated methods | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-did-mount-set-state](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-did-mount-set-state.md)
Disallow usage of setState in componentDidMount | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-did-update-set-state](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-did-update-set-state.md)
Disallow usage of setState in componentDidUpdate | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-direct-mutation-state](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-direct-mutation-state.md)
Disallow direct mutation of this.state | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-find-dom-node](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-find-dom-node.md)
Disallow usage of findDOMNode | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-invalid-html-attribute](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-invalid-html-attribute.md)
Disallow usage of invalid attributes | | ๐Ÿ’ก | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-is-mounted](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-is-mounted.md)
Disallow usage of isMounted | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-namespace](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-namespace.md)
Enforce that namespaces are not used in React elements | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-object-type-as-default-prop](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-object-type-as-default-prop.md)
Disallow usage of referential-type variables as default param in functional component | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-render-return-value](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-render-return-value.md)
Disallow usage of the return value of ReactDOM.render | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-string-refs](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-string-refs.md)
Disallow using string references | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-this-in-sfc](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-this-in-sfc.md)
Disallow `this` from being used in stateless functional components | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-typos](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-typos.md)
Disallow common typos | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-unescaped-entities](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-unescaped-entities.md)
Disallow unescaped HTML entities from appearing in markup | | ๐Ÿ’ก | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-unknown-property](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-unknown-property.md)
Disallow usage of unknown DOM property | | ๐Ÿ”ง | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-unstable-nested-components](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-unstable-nested-components.md)
Disallow creating unstable components inside components | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [no-will-update-set-state](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-will-update-set-state.md)
Disallow usage of setState in componentWillUpdate | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [prop-types](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/prop-types.md)
Disallow missing props validation in a React component definition | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [react-in-jsx-scope](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/react-in-jsx-scope.md)
Disallow missing React when using JSX | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [require-render-return](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/require-render-return.md)
Enforce ES5 or ES6 class for returning value in render function | | | | -| [![react](./icons/material/react.png)](https://github.com/jsx-eslint/eslint-plugin-react#readme) | [void-dom-elements-no-children](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/void-dom-elements-no-children.md)
Disallow void DOM elements (e.g. ``, `
`) from receiving children | | | | -| [![react-hooks](./icons/material/react_ts.png)](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks#readme) | [exhaustive-deps](https://github.com/facebook/react/issues/14920)
verifies the list of dependencies for Hooks like useEffect and similar | | ๐Ÿ”ง, ๐Ÿ’ก | | -| [![react-hooks](./icons/material/react_ts.png)](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks#readme) | [rules-of-hooks](https://reactjs.org/docs/hooks-rules.html)
enforces the Rules of Hooks | | | | +| Plugin | Rule | Options | Autofix | Overrides | +| :------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-----: | :-------: | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [alt-text](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/alt-text.md)
Enforce all elements that require alternative text have meaningful information to relay back to end user. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [anchor-has-content](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/anchor-has-content.md)
Enforce all anchors to contain accessible content. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [anchor-is-valid](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/anchor-is-valid.md)
Enforce all anchors are valid, navigable elements. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [aria-activedescendant-has-tabindex](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-activedescendant-has-tabindex.md)
Enforce elements with aria-activedescendant are tabbable. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [aria-props](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-props.md)
Enforce all `aria-*` props are valid. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [aria-proptypes](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-proptypes.md)
Enforce ARIA state and property values are valid. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [aria-role](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-role.md)
Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [aria-unsupported-elements](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-unsupported-elements.md)
Enforce that elements that do not support ARIA roles, states, and properties do not have those attributes. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [autocomplete-valid](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/autocomplete-valid.md)
Enforce that autocomplete attributes are used correctly. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [click-events-have-key-events](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/click-events-have-key-events.md)
Enforce a clickable non-interactive element has at least one keyboard event listener. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [heading-has-content](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/heading-has-content.md)
Enforce heading (`h1`, `h2`, etc) elements contain accessible content. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [html-has-lang](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/html-has-lang.md)
Enforce `` element has `lang` prop. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [iframe-has-title](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/iframe-has-title.md)
Enforce iframe elements have a title attribute. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [img-redundant-alt](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/img-redundant-alt.md)
Enforce `` alt prop does not contain the word "image", "picture", or "photo". | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [interactive-supports-focus](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/interactive-supports-focus.md)
Enforce that elements with interactive handlers like `onClick` must be focusable. |
tabbable: button, checkbox,...
{
  "tabbable": [
    "button",
    "checkbox",
    "link",
    "searchbox",
    "spinbutton",
    "switch",
    "textbox"
  ]
}
| | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [label-has-associated-control](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md)
Enforce that a `label` tag has a text label and an associated control. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [media-has-caption](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/media-has-caption.md)
Enforces that `