Merge pull request #4 from Automattic/add/jsx-a11y-rules

Add accessibility linters as a possible configuration file
Automattic · Dec 11, 2018 · f3ba842 · f3ba842
1 parent 1efd1c8
commit f3ba842
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 3 deletions.
diff --git a/packages/eslint-config-wpcalypso/CHANGELOG.md b/packages/eslint-config-wpcalypso/CHANGELOG.md
@@ -1,3 +1,7 @@
+#### v0.7.0 (2017-03-20)
+
+- Added: [`eslint-plugin-jsx-a11y`](https://github.com/evcohen/eslint-plugin-jsx-a11y) rules to check for common accessibility issues, as warnings
+
 #### v0.6.0 (2016-10-21)
 
 - General: Update to `eslint-plugin-wpcalypso@3.0.1` ([see changelog](https://github.com/Automattic/eslint-plugin-wpcalypso/blob/master/CHANGELOG.md#v301-2016-10-21))

diff --git a/packages/eslint-config-wpcalypso/README.md b/packages/eslint-config-wpcalypso/README.md
@@ -29,6 +29,18 @@ Or, if your project uses React and you want to opt in to additional React-specif
 "extends": "wpcalypso/react"
 ```
 
+Another set of rules available is the `react-a11y` set, which contains the base rules, the react rules, and a set of accessibility checks. To use these:
+
+```
+"extends": "wpcalypso/react-a11y"
+```
+
+For these accessibility rules, you will need to also install [the jsx-a11y plugin](https://github.com/evcohen/eslint-plugin-jsx-a11y):
+
+```
+npm install --save-dev eslint-plugin-jsx-a11y
+```
+
 Refer to the [ESLint documentation on Shareable Configs](http://eslint.org/docs/developer-guide/shareable-configs) for more information.
 
 ## Suggesting Changes

diff --git a/packages/eslint-config-wpcalypso/package.json b/packages/eslint-config-wpcalypso/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-wpcalypso",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "ESLint configuration following WordPress.com's Calypso JavaScript Coding Guidelines",
   "keywords": [
     "eslint"
@@ -14,8 +14,9 @@
     }
   ],
   "files": [
-  	"index.js",
-  	"react/index.js"
+    "index.js",
+    "react/index.js",
+    "react-a11y/index.js"
   ],
   "license": "GPL-2.0+",
   "repository": {

diff --git a/packages/eslint-config-wpcalypso/react-a11y/index.js b/packages/eslint-config-wpcalypso/react-a11y/index.js
@@ -0,0 +1,37 @@
+module.exports = {
+	'extends': '../react/index.js',
+	plugins: [
+		'jsx-a11y'
+	],
+	rules: {
+		'jsx-a11y/accessible-emoji': 1,
+		// 'jsx-a11y/anchor-has-content' doesn't handle our translation system
+		'jsx-a11y/aria-activedescendant-has-tabindex': 1,
+		'jsx-a11y/aria-props': 1,
+		'jsx-a11y/aria-proptypes': 1,
+		'jsx-a11y/aria-role': 1,
+		'jsx-a11y/aria-unsupported-elements': 1,
+		'jsx-a11y/click-events-have-key-events': 1,
+		'jsx-a11y/heading-has-content': 1,
+		'jsx-a11y/href-no-hash': 1,
+		'jsx-a11y/html-has-lang': 1,
+		'jsx-a11y/iframe-has-title': 1,
+		'jsx-a11y/img-has-alt': 1,
+		'jsx-a11y/img-redundant-alt': 1,
+		'jsx-a11y/label-has-for': 1,
+		'jsx-a11y/lang': 1,
+		'jsx-a11y/mouse-events-have-key-events': 1,
+		'jsx-a11y/no-access-key': 1,
+		// 'jsx-a11y/no-autofocus' Replace this with a rule that detects if all autofocus have a describedby
+		'jsx-a11y/no-distracting-elements': 1,
+		'jsx-a11y/no-onchange': 1,
+		'jsx-a11y/no-redundant-roles': 1,
+		// 'jsx-a11y/no-static-element-interactions' Not needed right now if the following two rules are set
+		'jsx-a11y/onclick-has-focus': 1,
+		'jsx-a11y/onclick-has-role': 1,
+		'jsx-a11y/role-has-required-aria-props': 1,
+		'jsx-a11y/role-supports-aria-props': 1,
+		'jsx-a11y/scope': 1,
+		'jsx-a11y/tabindex-no-positive': 1,
+	}
+};