diff --git a/packages/eslint-config-airbnb/index.js b/packages/eslint-config-airbnb/index.js
index 29f46080..3fa2b349 100644
--- a/packages/eslint-config-airbnb/index.js
+++ b/packages/eslint-config-airbnb/index.js
@@ -3,6 +3,7 @@ module.exports = {
'./base',
'./rules/strict',
'./rules/react',
+ './rules/react-a11y',
].map(require.resolve),
rules: {}
};
diff --git a/packages/eslint-config-airbnb/rules/react-a11y.js b/packages/eslint-config-airbnb/rules/react-a11y.js
new file mode 100644
index 00000000..d9663119
--- /dev/null
+++ b/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
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,
+ },
+};
diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js
index a2498974..c483b3b8 100644
--- a/packages/eslint-config-airbnb/rules/react.js
+++ b/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
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 }],
diff --git a/packages/eslint-config-airbnb/test/test-base.js b/packages/eslint-config-airbnb/test/test-base.js
index c29e89dd..8d21993a 100644
--- a/packages/eslint-config-airbnb/test/test-base.js
+++ b/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;
}
diff --git a/packages/eslint-config-airbnb/test/test-react-order.js b/packages/eslint-config-airbnb/test/test-react-order.js
index 81d8235f..1e6dd660 100644
--- a/packages/eslint-config-airbnb/test/test-react-order.js
+++ b/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() {}