diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json
index aefe9a76..769c8950 100644
--- a/packages/eslint-config-airbnb/package.json
+++ b/packages/eslint-config-airbnb/package.json
@@ -44,6 +44,7 @@
"devDependencies": {
"babel-tape-runner": "^1.3.1",
"eslint": "^2.6.0",
+ "eslint-plugin-jsx-a11y": "^0.6.0",
"eslint-plugin-react": "^4.2.3",
"react": "^0.14.8",
"tape": "^4.5.1",
@@ -51,6 +52,7 @@
},
"peerDependencies": {
"eslint": "^2.6.0",
+ "eslint-plugin-jsx-a11y": "^0.6.0",
"eslint-plugin-react": "^4.2.3"
}
}
diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js
index 470738b7..0b128aef 100644
--- a/packages/eslint-config-airbnb/rules/react.js
+++ b/packages/eslint-config-airbnb/rules/react.js
@@ -1,5 +1,6 @@
module.exports = {
'plugins': [
+ 'jsx-a11y',
'react'
],
'ecmaFeatures': {
@@ -8,6 +9,10 @@ module.exports = {
// View link below for react rules documentation
// https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules
'rules': {
+ // 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 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-react-order.js b/packages/eslint-config-airbnb/test/test-react-order.js
index f5b2d452..81d8235f 100644
--- a/packages/eslint-config-airbnb/test/test-react-order.js
+++ b/packages/eslint-config-airbnb/test/test-react-order.js
@@ -28,9 +28,9 @@ ${body}
}
test('validate react prop order', t => {
- t.test('make sure our eslintrc has React linting dependencies', t => {
+ t.test('make sure our eslintrc has React and JSX linting dependencies', t => {
t.plan(1);
- t.equal(reactRules.plugins[0], 'react', 'uses eslint-plugin-react');
+ t.deepEqual(reactRules.plugins, ['jsx-a11y', 'react']);
});
t.test('passes a good component', t => {
diff --git a/react/README.md b/react/README.md
index 6eddabca..29af5cf8 100644
--- a/react/README.md
+++ b/react/README.md
@@ -217,6 +217,22 @@
/>
```
+ - Always include a non-empty `alt` prop on `
` tags. If `alt` is an empty string, the `
` must have `role="presentation"`. eslint: [`jsx-a11y/img-uses-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md)
+
+ ```javascript
+ // bad
+
+
+ // bad
+
+
+ // good
+
+
+ // good
+
+ ```
+
## 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)