From 26add096503b57dc14e813dedcd41d5c084e38e7 Mon Sep 17 00:00:00 2001 From: AlmeroSteyn Date: Mon, 15 May 2017 21:15:50 +0200 Subject: [PATCH 1/5] ESLint Config: Upgrade eslint-plugin-jsx-a11y and activate more rules. --- packages/eslint-config-react-app/README.md | 42 ++++++++++++++++++- packages/eslint-config-react-app/index.js | 17 +++++++- packages/eslint-config-react-app/package.json | 2 +- packages/react-error-overlay/package.json | 2 +- packages/react-scripts/package.json | 2 +- 5 files changed, 60 insertions(+), 5 deletions(-) diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md index 8eace6efffc..535baec39d3 100644 --- a/packages/eslint-config-react-app/README.md +++ b/packages/eslint-config-react-app/README.md @@ -17,7 +17,7 @@ If you want to use this ESLint configuration in a project not built with Create First, install this package, ESLint and the necessary plugins. ```sh - npm install --save-dev eslint-config-react-app babel-eslint@7.1.1 eslint@3.16.1 eslint-plugin-flowtype@2.21.0 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@4.0.0 eslint-plugin-react@6.4.1 + npm install --save-dev eslint-config-react-app babel-eslint@7.1.1 eslint@3.16.1 eslint-plugin-flowtype@2.21.0 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@5.0.1 eslint-plugin-react@6.4.1 ``` Then create a file named `.eslintrc` with following contents in the root folder of your project: @@ -29,3 +29,43 @@ Then create a file named `.eslintrc` with following contents in the root folder ``` That's it! You can override the settings from `eslint-config-react-app` by editing the `.eslintrc` file. Learn more about [configuring ESLint](http://eslint.org/docs/user-guide/configuring) on the ESLint website. + +## Accessibility Checks + +The following rules from the [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin are activated: + +- [accessible-emoji](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/accessible-emoji.md) +- [alt-text](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md) +- [anchor-has-content](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-has-content.md) +- [aria-activedescendant-has-tabindex](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-activedescendant-has-tabindex.md) +- [aria-props](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-props.md) +- [aria-proptypes](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-proptypes.md) +- [aria-role](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md) +- [aria-unsupported-elements](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md) +- [heading-has-content](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md) +- [href-no-hash](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/href-no-hash.md) +- [html-has-lang](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/html-has-lang.md) +- [iframe-has-title](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/iframe-has-title.md) +- [img-redundant-alt](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md) +- [no-access-key](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md) +- [no-distracting-elements](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-distracting-elements.md) +- [no-redundant-roles](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-redundant-roles.md) +- [role-has-required-aria-props](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-has-required-aria-props.md) +- [role-supports-aria-props](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-supports-aria-props.md) +- [scope](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/scope.md) + +All rules can be activated by overriding the settings as shown above and extending the configuration in your `.eslintrc` file with: + + ```json + { + "extends": [ + "react-app", + "plugin:jsx-a11y/recommended" + ], + "plugins": [ + "jsx-a11y" + ] + } + ``` + +In non-ejected [Create React App](https://github.com/facebookincubator/create-react-app) applications, this configurations allows you to view ESLint messages for all rules in your IDE (if supported). \ No newline at end of file diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index c31e46cc111..7d025d51fde 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -294,10 +294,25 @@ module.exports = { 'react/style-prop-object': 'warn', // 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/aria-activedescendant-has-tabindex': 'warn', + 'jsx-a11y/aria-props': 'warn', + 'jsx-a11y/aria-proptypes': 'warn', 'jsx-a11y/aria-role': 'warn', - 'jsx-a11y/img-has-alt': 'warn', + 'jsx-a11y/aria-unsupported-elements': 'warn', + 'jsx-a11y/heading-has-content': 'warn', + 'jsx-a11y/href-no-hash': 'warn', + 'jsx-a11y/html-has-lang': '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', // https://github.com/gajus/eslint-plugin-flowtype 'flowtype/define-flow-type': 'warn', diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index 855713e4f46..298070bd491 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -15,7 +15,7 @@ "eslint": "^3.16.1", "eslint-plugin-flowtype": "^2.21.0", "eslint-plugin-import": "^2.0.1", - "eslint-plugin-jsx-a11y": "^2.0.0 || ^3.0.0 || ^4.0.0", + "eslint-plugin-jsx-a11y": "^5.0.0", "eslint-plugin-react": "^6.4.1" } } diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 5fe6803613d..1e15a76dbda 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -45,7 +45,7 @@ "eslint-config-react-app": "^0.6.2", "eslint-plugin-flowtype": "^2.21.0", "eslint-plugin-import": "^2.0.1", - "eslint-plugin-jsx-a11y": "^4.0.0", + "eslint-plugin-jsx-a11y": "^5.0.0", "eslint-plugin-react": "^6.4.1", "flow-bin": "^0.46.0", "jest": "19.x", diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 9208b713878..2e6ce432346 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -40,7 +40,7 @@ "eslint-loader": "1.7.1", "eslint-plugin-flowtype": "2.21.0", "eslint-plugin-import": "2.0.1", - "eslint-plugin-jsx-a11y": "4.0.0", + "eslint-plugin-jsx-a11y": "5.0.1", "eslint-plugin-react": "6.4.1", "extract-text-webpack-plugin": "2.1.0", "file-loader": "0.11.1", From 16a7ea85ac9f64cbff197fcd3d94f11b5d4cbcc9 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 15 May 2017 23:10:27 +0100 Subject: [PATCH 2/5] Try to fix Lerna --- packages/react-error-overlay/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 1e15a76dbda..9f4eeab8fd4 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -39,10 +39,10 @@ "devDependencies": { "babel-cli": "^6.24.1", "babel-eslint": "7.x", - "babel-preset-react-app": "^2.2.0", + "babel-preset-react-app": "^2.1.1", "cross-env": "^4.0.0", "eslint": "^3.16.1", - "eslint-config-react-app": "^0.6.2", + "eslint-config-react-app": "^0.6.1", "eslint-plugin-flowtype": "^2.21.0", "eslint-plugin-import": "^2.0.1", "eslint-plugin-jsx-a11y": "^5.0.0", From 1c78979d2bf5d11b3f106a2e247757b711529a3d Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 15 May 2017 23:17:48 +0100 Subject: [PATCH 3/5] Update README.md --- packages/eslint-config-react-app/README.md | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md index 535baec39d3..ce525f74292 100644 --- a/packages/eslint-config-react-app/README.md +++ b/packages/eslint-config-react-app/README.md @@ -8,7 +8,9 @@ Please refer to its documentation: ## Usage in Create React App Projects -The easiest way to use this configuration is with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.** +The easiest way to use this configuration is with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. + +**You don’t need to install it separately in Create React App projects.** ## Usage Outside of Create React App @@ -54,18 +56,13 @@ The following rules from the [eslint-plugin-jsx-a11y](https://github.com/evcohen - [role-supports-aria-props](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-supports-aria-props.md) - [scope](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/scope.md) -All rules can be activated by overriding the settings as shown above and extending the configuration in your `.eslintrc` file with: +If you want to enable even more accessibility rules, you can create an `.eslintrc` file in the root of your project with this content: ```json { - "extends": [ - "react-app", - "plugin:jsx-a11y/recommended" - ], - "plugins": [ - "jsx-a11y" - ] + "extends": ["react-app", "plugin:jsx-a11y/recommended"], + "plugins": ["jsx-a11y"] } ``` -In non-ejected [Create React App](https://github.com/facebookincubator/create-react-app) applications, this configurations allows you to view ESLint messages for all rules in your IDE (if supported). \ No newline at end of file +However, if you are using [Create React App](https://github.com/facebookincubator/create-react-app) and have not ejected, any additional rules will only be displayed in the [IDE integrations](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor), but not in the browser or the terminal. From 8860079bf15a59dfe75d32e277e7e924d413def7 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 15 May 2017 23:24:21 +0100 Subject: [PATCH 4/5] Remove html-has-lang --- packages/eslint-config-react-app/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index 7d025d51fde..39b9ca50741 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -304,7 +304,6 @@ module.exports = { 'jsx-a11y/aria-unsupported-elements': 'warn', 'jsx-a11y/heading-has-content': 'warn', 'jsx-a11y/href-no-hash': 'warn', - 'jsx-a11y/html-has-lang': 'warn', 'jsx-a11y/iframe-has-title': 'warn', 'jsx-a11y/img-redundant-alt': 'warn', 'jsx-a11y/no-access-key': 'warn', From 0e5212560716b61ed27598ae2286844e0ac76910 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 15 May 2017 23:24:57 +0100 Subject: [PATCH 5/5] Update README.md --- packages/eslint-config-react-app/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md index ce525f74292..7e247776d7c 100644 --- a/packages/eslint-config-react-app/README.md +++ b/packages/eslint-config-react-app/README.md @@ -46,7 +46,6 @@ The following rules from the [eslint-plugin-jsx-a11y](https://github.com/evcohen - [aria-unsupported-elements](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md) - [heading-has-content](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md) - [href-no-hash](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/href-no-hash.md) -- [html-has-lang](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/html-has-lang.md) - [iframe-has-title](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/iframe-has-title.md) - [img-redundant-alt](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md) - [no-access-key](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md)