Add note and rule about image alt text

We want our React apps to be accessible. One thing that developers can
do is properly use alt text on images. Thankfully, there is an ESLint
rule that will enforce these things for us.

Author: lencioni

packages/eslint-config-airbnb/package.json

@@ -44,13 +44,15 @@
   "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",
     "parallelshell": "^2.0.0"
   },
   "peerDependencies": {
     "eslint": "^2.6.0",
+    "eslint-plugin-jsx-a11y": "^0.6.0",
     "eslint-plugin-react": "^4.2.3"
   }
 }

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 <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 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-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 => {

react/README.md

@@ -217,6 +217,22 @@
     />
     ```
 
+  - Always include a non-empty `alt` prop on `<img>` tags. If `alt` is an empty string, the `<img>` 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
+    <img src="hello.jpg" />
+
+    // bad
+    <img src="hello.jpg" alt="" />
+
+    // good
+    <img src="hello.jpg" alt="Me waving hello" />
+
+    // good
+    <img src="hello.jpg" alt="" role="presentation" />
+    ```
+
 ## 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)