Add note and rule about not using accessKey

lencioni · lencioni · commit f697a15e5036 · 2016-04-06T14:51:44.000-07:00
Inconsistencies between keyboard shortcuts and keyboard commands used by
people using screenreaders and keyboards complicate accessibility.
diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js
@@ -9,6 +9,10 @@ module.exports = {
   // View link below for react rules documentation
   // https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules
   'rules': {
+    // Prevent use of `accessKey`
+    // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md
+    'jsx-a11y/no-access-key': 2,
+
     // Require <img> to have a non-empty `alt` prop, or role="presentation"
     // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md
     'jsx-a11y/img-uses-alt': 2,
diff --git a/react/README.md b/react/README.md
@@ -249,15 +249,27 @@
 
     ```javascript
     // bad - not an ARIA role
-    <div role="datepicker"></div>
+    <div role="datepicker" />
 
     // bad - abstract ARIA role
-    <div role="range"></div>
+    <div role="range" />
 
     // good
-    <div role="button"></div>
+    <div role="button" />
     ```
 
+  - Do not use `accessKey` on elements. eslint: [`jsx-a11y/no-access-key`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md)
+
+  > Why? Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility.
+
+  ```javascript
+  // bad
+  <div accessKey="h" />
+
+  // good
+  <div />
+  ```
+
 ## Parentheses
 
   - Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md)
