From b45d5888cf1158ef04a35cd603f51bc1859c6d0a Mon Sep 17 00:00:00 2001 From: Alexandre Asselin Date: Fri, 22 Sep 2023 13:25:01 -0400 Subject: [PATCH 1/2] feat(eslint): extract a11y config into it own subconfig, and extended the a11y recommended config --- .../config/by-project-type/react-library.ts | 1 + .../config/by-project-type/web-application.ts | 1 + packages/eslint-plugin/lib/config/jsx-a11y.ts | 42 +++++++++++++++++++ packages/eslint-plugin/lib/config/react.ts | 28 +------------ packages/eslint-plugin/lib/index.ts | 1 + 5 files changed, 47 insertions(+), 26 deletions(-) create mode 100644 packages/eslint-plugin/lib/config/jsx-a11y.ts diff --git a/packages/eslint-plugin/lib/config/by-project-type/react-library.ts b/packages/eslint-plugin/lib/config/by-project-type/react-library.ts index 8710cce5..26befae9 100644 --- a/packages/eslint-plugin/lib/config/by-project-type/react-library.ts +++ b/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" diff --git a/packages/eslint-plugin/lib/config/by-project-type/web-application.ts b/packages/eslint-plugin/lib/config/by-project-type/web-application.ts index 8710cce5..26befae9 100644 --- a/packages/eslint-plugin/lib/config/by-project-type/web-application.ts +++ b/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" diff --git a/packages/eslint-plugin/lib/config/jsx-a11y.ts b/packages/eslint-plugin/lib/config/jsx-a11y.ts new file mode 100644 index 00000000..5b3bb377 --- /dev/null +++ b/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 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; diff --git a/packages/eslint-plugin/lib/config/react.ts b/packages/eslint-plugin/lib/config/react.ts index f3957fa2..bac348ba 100644 --- a/packages/eslint-plugin/lib/config/react.ts +++ b/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" } } ] diff --git a/packages/eslint-plugin/lib/index.ts b/packages/eslint-plugin/lib/index.ts index 5a9bc559..7bba36e2 100644 --- a/packages/eslint-plugin/lib/index.ts +++ b/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"), From 3c886b929126b041b3514a219385c16f3657b3a2 Mon Sep 17 00:00:00 2001 From: Alexandre Asselin Date: Mon, 25 Sep 2023 09:47:17 -0400 Subject: [PATCH 2/2] added documentation --- .changeset/heavy-berries-boil.md | 5 +++++ packages/eslint-plugin/ADVANCED_USAGE.md | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/heavy-berries-boil.md diff --git a/.changeset/heavy-berries-boil.md b/.changeset/heavy-berries-boil.md new file mode 100644 index 00000000..d85924f3 --- /dev/null +++ b/.changeset/heavy-berries-boil.md @@ -0,0 +1,5 @@ +--- +"@workleap/eslint-plugin": major +--- + +Added accessibility rules to the eslint config diff --git a/packages/eslint-plugin/ADVANCED_USAGE.md b/packages/eslint-plugin/ADVANCED_USAGE.md index 69a06042..e6ac822a 100644 --- a/packages/eslint-plugin/ADVANCED_USAGE.md +++ b/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