From acbddc1083d5ea7608fba212bb6898ca6e224afc Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Wed, 6 Apr 2016 14:14:03 -0700
Subject: [PATCH] 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.
---
 packages/eslint-config-airbnb/package.json       |  2 ++
 packages/eslint-config-airbnb/rules/react.js     |  5 +++++
 .../test/test-react-order.js                     |  4 ++--
 react/README.md                                  | 16 ++++++++++++++++
 4 files changed, 25 insertions(+), 2 deletions(-)

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 <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 }],
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 `<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)