Add accessibility rules to React config

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`  |          |

package.json

@@ -49,6 +49,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.8.0",
     "eslint-plugin-jest-formatting": "^3.0.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-n": ">=17.0.0",
     "eslint-plugin-playwright": "^2.1.0",
     "eslint-plugin-promise": ">=6.4.0",
@@ -85,6 +86,9 @@
     "eslint-plugin-jest-formatting": {
       "optional": true
     },
+    "eslint-plugin-jsx-a11y": {
+      "optional": true
+    },
     "eslint-plugin-n": {
       "optional": true
     },
@@ -126,6 +130,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.8.0",
     "eslint-plugin-jest-formatting": "^3.1.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-n": "^17.0.0",
     "eslint-plugin-playwright": "^2.1.0",
     "eslint-plugin-promise": "^6.4.0",

scripts/helpers/plugins.js

@@ -14,6 +14,7 @@ const pluginIcons = {
   import: 'icons8/import',
   jest: 'material/jest',
   'jest-formatting': 'icons8/test',
+  'jsx-a11y': 'icons8/accessibility',
   n: 'material/nodejs',
   'no-secrets': 'icons8/secure',
   playwright: 'material/playwright',
@@ -47,6 +48,7 @@ const pluginDocsUrls = {
   jest: 'https://github.com/jest-community/eslint-plugin-jest#readme',
   'jest-formatting':
     'https://github.com/dangreenisrael/eslint-plugin-jest-formatting#readme',
+  'jsx-a11y': 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme',
   n: 'https://github.com/eslint-community/eslint-plugin-n#readme',
   'no-secrets': 'https://github.com/nickdeis/eslint-plugin-no-secrets#readme',
   playwright:

scripts/helpers/types.d.ts

@@ -30,6 +30,7 @@ export type PeerDep = {
 
 // corresponds to PNG file names in docs/icons
 export type Icon =
+  | 'icons8/accessibility'
   | 'icons8/expired'
   | 'icons8/global'
   | 'icons8/import'

src/configs/react.js

@@ -1,5 +1,6 @@
 // @ts-check
 
+import jsxA11y from 'eslint-plugin-jsx-a11y';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
 import globals from 'globals';
@@ -14,6 +15,7 @@ export default tseslint.config({
   extends: [
     // @ts-expect-error types inferred as possibly undefined
     react.configs.flat.recommended,
+    jsxA11y.flatConfigs.recommended,
     {
       name: 'code-pushup/react/react-hooks',
       plugins: {
@@ -29,6 +31,8 @@ export default tseslint.config({
       name: 'code-pushup/react/customized',
       rules: {
         'react/display-name': 'warn',
+        'jsx-a11y/no-autofocus': 'warn',
+        'jsx-a11y/no-redundant-roles': 'warn',
       },
     },
     {
@@ -88,6 +92,7 @@ export default tseslint.config({
         'react/static-property-placement': 'warn',
         'react/style-prop-object': 'warn',
         'react/void-dom-elements-no-children': 'error',
+        'jsx-a11y/prefer-tag-over-role': 'warn',
       },
     },
   ],

tests/configs/react.spec.js

@@ -34,4 +34,9 @@ describe('react config', () => {
     const config = await loadConfig();
     expect(Object.keys(config.rules ?? {}).join(',')).toContain('react-hooks/');
   });
+
+  it('should have rule from extended recommended jsx-a11y config', async () => {
+    const config = await loadConfig();
+    expect(config.rules).toHaveProperty('jsx-a11y/alt-text');
+  });
 });