feat(eslint): Added an a11y configuration to our configs

.changeset/heavy-berries-boil.md

@@ -0,0 +1,5 @@
+---
+"@workleap/eslint-plugin": major
+---
+
+Added accessibility rules to the eslint config

packages/eslint-plugin/ADVANCED_USAGE.md

@@ -7,6 +7,7 @@ The `@workleap/eslint-plugin` package exposes the following configuration parts:
 - **`core`**: Basic rules shared by every configuration
 - **`typescript`**: TypeScript specific rules, using @typescript-eslint/parser
 - **`react`**: React specific rules
+- **`jsx-a11y`**: Accessibility specific rules
 - **`jest`**: Jest specific rules
 - **`testing-library`**: Testing library specific rules
 - **`storybook`**: Storybook specific rules

packages/eslint-plugin/lib/config/by-project-type/react-library.ts

@@ -11,6 +11,7 @@ const config: Linter.Config = {
                 "plugin:@workleap/core",
                 "plugin:@workleap/typescript",
                 "plugin:@workleap/react",
+                "plugin:@workleap/jsx-a11y",
                 "plugin:@workleap/jest",
                 "plugin:@workleap/testing-library",
                 "plugin:@workleap/storybook"

packages/eslint-plugin/lib/config/by-project-type/web-application.ts

@@ -11,6 +11,7 @@ const config: Linter.Config = {
                 "plugin:@workleap/core",
                 "plugin:@workleap/typescript",
                 "plugin:@workleap/react",
+                "plugin:@workleap/jsx-a11y",
                 "plugin:@workleap/jest",
                 "plugin:@workleap/testing-library",
                 "plugin:@workleap/storybook"

packages/eslint-plugin/lib/config/jsx-a11y.ts

@@ -0,0 +1,42 @@
+import type { Linter } from "eslint";
+import { sourceFiles } from "../utils/patterns";
+
+const config: Linter.Config = {
+    overrides: [
+        {
+            files: sourceFiles,
+            plugins: ["jsx-a11y"],
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true
+                }
+            },
+            extends: [
+                "plugin:jsx-a11y/recommended"
+            ],
+            rules: {
+                // There is a really good article that describes the issues with autoFocus and why it should be avoided:
+                // https://brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/
+                // However, this issue is with screen readers and not with keyboard navigation.
+                // In Workleap, we use autoFocus in a lot of places to improve the user experience.
+                // Therefore, we are disabling this rule.
+                "jsx-a11y/no-autofocus": "off",
+
+                // This rule ensures that all labels have an associated control that they are labeling.
+                // However, this rule causes a lot of false positive, since our current implementation of our company's design system
+                // does not use the "for" attribute in the label element and automatically add it inside Fields.
+                // Therefore, we are disabling this rule.
+                "jsx-a11y/label-has-associated-control:": "off",
+
+                // This rule ensures that all media elements have a <track> for captions.
+                // Since we don't use captions, we are disabling this rule.
+                "jsx-a11y/media-has-caption": "off"
+            }
+        }
+    ]
+};
+
+// Using TypeScript "export" keyword until ESLint support ESM.
+// Otherwise we must deal with a weird CommonJS output from esbuild which is not worth it.
+// For more info, see: https://github.com/evanw/esbuild/issues/1079
+export = config;

packages/eslint-plugin/lib/config/react.ts

@@ -5,7 +5,7 @@ const config: Linter.Config = {
     overrides: [
         {
             files: sourceFiles,
-            plugins: ["jsx-a11y", "react", "react-hooks"],
+            plugins: ["react", "react-hooks"],
             extends: [
                 "plugin:react/recommended",
                 "plugin:react-hooks/recommended"
@@ -76,32 +76,8 @@ const config: Linter.Config = {
                     "warn",
                     { maximum: 1, when: "multiline" }
                 ],
-                "react/jsx-curly-spacing": ["warn", { children: true, when: "never" }],
+                "react/jsx-curly-spacing": ["warn", { children: true, when: "never" }]
 
-                // https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules
-                "jsx-a11y/accessible-emoji": "warn",
-                "jsx-a11y/alt-text": "warn",
-                "jsx-a11y/anchor-has-content": "warn",
-                "jsx-a11y/anchor-is-valid": [
-                    "warn",
-                    {
-                        aspects: ["noHref", "invalidHref"]
-                    }
-                ],
-                "jsx-a11y/aria-activedescendant-has-tabindex": "warn",
-                "jsx-a11y/aria-props": "warn",
-                "jsx-a11y/aria-proptypes": "warn",
-                "jsx-a11y/aria-role": "warn",
-                "jsx-a11y/aria-unsupported-elements": "warn",
-                "jsx-a11y/heading-has-content": "warn",
-                "jsx-a11y/iframe-has-title": "warn",
-                "jsx-a11y/img-redundant-alt": "warn",
-                "jsx-a11y/no-access-key": "warn",
-                "jsx-a11y/no-distracting-elements": "warn",
-                "jsx-a11y/no-redundant-roles": "warn",
-                "jsx-a11y/role-has-required-aria-props": "warn",
-                "jsx-a11y/role-supports-aria-props": "warn",
-                "jsx-a11y/scope": "warn"
             }
         }
     ]

packages/eslint-plugin/lib/index.ts

@@ -10,6 +10,7 @@ const plugin: ESLint.Plugin = {
         jest: require("./config/jest"),
         mdx: require("./config/mdx"),
         react: require("./config/react"),
+        "jsx-a11y": require("./config/jsx-a11y"),
         storybook: require("./config/storybook"),
         "testing-library": require("./config/testing-library"),
         typescript: require("./config/typescript"),