Add note and rule about valid, non-abstract ARIA roles

This rule will help people use only valid roles, which might save people
from simple, accessibility-busting mistakes.

packages/eslint-config-airbnb/rules/react.js

@@ -17,6 +17,10 @@ module.exports = {
     // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/redundant-alt.md
     'jsx-a11y/redundant-alt': 2,
 
+    // Require ARIA roles to be valid and non-abstract
+    // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/valid-aria-role.md
+    'jsx-a11y/valid-aria-role': 2,
+
     // Prevent missing displayName in a React component definition
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
     'react/display-name': [0, { 'ignoreTranspilerName': false }],

react/README.md

@@ -245,6 +245,19 @@
     <img src="hello.jpg" alt="Me waving hello" />
     ```
 
+  - Use only valid, non-abstract [ARIA roles](https://www.w3.org/TR/wai-aria/roles#role_definitions). eslint: [`jsx-a11y/valid-aria-role`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/valid-aria-role.md)
+
+    ```javascript
+    // bad - not an ARIA role
+    <div role="datepicker"></div>
+
+    // bad - abstract ARIA role
+    <div role="range"></div>
+
+    // good
+    <div role="button"></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)