[eslint config] [react] separate a11y rules to their own file

packages/eslint-config-airbnb/index.js

@@ -3,6 +3,7 @@ module.exports = {
     './base',
     './rules/strict',
     './rules/react',
+    './rules/react-a11y',
   ].map(require.resolve),
   rules: {}
 };

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

@@ -0,0 +1,26 @@
+module.exports = {
+  'plugins': [
+    'jsx-a11y',
+    'react'
+  ],
+  'ecmaFeatures': {
+    'jsx': true
+  },
+  '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,
+
+    // Prevent img alt text from containing redundant words like "image", "picture", or "photo"
+    // 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,
+  },
+};

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

@@ -1,6 +1,5 @@
 module.exports = {
   'plugins': [
-    'jsx-a11y',
     'react'
   ],
   'ecmaFeatures': {
@@ -9,22 +8,6 @@ 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,
-
-    // Prevent img alt text from containing redundant words like "image", "picture", or "photo"
-    // 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 }],

packages/eslint-config-airbnb/test/test-base.js

@@ -7,7 +7,7 @@ const files = {
 };
 
 fs.readdirSync(path.join(__dirname, '../rules')).forEach(name => {
-  if (name === 'react.js') {
+  if (name === 'react.js' || name === 'react-a11y.js') {
     return;
   }
 

packages/eslint-config-airbnb/test/test-react-order.js

@@ -2,6 +2,7 @@ import test from 'tape';
 import { CLIEngine } from 'eslint';
 import eslintrc from '../';
 import reactRules from '../rules/react';
+import reactA11yRules from '../rules/react-a11y';
 
 const cli = new CLIEngine({
   useEslintrc: false,
@@ -27,13 +28,14 @@ ${body}
 `;
 }
 
-test('validate react prop order', t => {
-  t.test('make sure our eslintrc has React and JSX linting dependencies', t => {
-    t.plan(1);
-    t.deepEqual(reactRules.plugins, ['jsx-a11y', 'react']);
+test('validate react prop order', (t) => {
+  t.test('make sure our eslintrc has React and JSX linting dependencies', (t) => {
+    t.plan(2);
+    t.deepEqual(reactRules.plugins, ['react']);
+    t.deepEqual(reactA11yRules.plugins, ['jsx-a11y', 'react']);
   });
 
-  t.test('passes a good component', t => {
+  t.test('passes a good component', (t) => {
     t.plan(3);
     const result = lint(wrapComponent(`
   componentWillMount() {}