Add redundant-alt rule.

Author: Ethan Cohen

README.md

@@ -67,6 +67,7 @@ Then configure the rules you want to use under the rules section.
 - [use-onblur-not-onchange](docs/rules/use-onblur-not-onchange.md): Enforce that onBlur is used instead of onChange.
 - [no-access-key](docs/rules/no-access-key.md): Enforce that the accessKey prop is not used on any element to avoid complications with keyboard commands used by a screenreader.
 - [use-label-for](docs/rules/use-label-for.md): Enforce that label elements have the htmlFor attribute
+- [redundant-alt](docs/rules/redundant-alt.md): Enforce img alt attribute does not contain the word image, picture, or photo.
 
 ## License
 

docs/rules/img-uses-alt.md

@@ -8,7 +8,7 @@ This rule takes no arguments. However, note that passing props as spread attribu
 
 ### Succeed
 ```jsx
-<img src="foo" alt="An image of foo!" />
+<img src="foo" alt="Foo eating a sandwich." />
 ```
 
 ### Fail

docs/rules/redundant-alt.md

@@ -0,0 +1,20 @@
+# redundant-alt
+
+Enforce img alt attribute does not contain the word image, picture, or photo. Screenreaders already announce `img` elements as an image. There is no need to use words such as *image*, *photo*, and/or *picture*.
+
+## Rule details
+
+This rule takes no arguments. This rule will first check if `aria-hidden` is true to determine whether to enforce the rule. If the image is hidden, then rule will always succeed.
+
+### Succeed
+```jsx
+<img src="foo" alt="Foo eating a sandwich." />
+<img src="bar" aria-hidden alt="Picture of me taking a photo of an image" /> // Will pass because it is hidden.
+```
+
+### Fail
+```jsx
+<img src="foo" alt="Photo of foo being weird." />
+<img src="bar" alt="Image of me at a bar!" />
+<img src="baz" alt="Picture of baz fixing a bug." />
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-jsx-a11y",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "A static analysis linter of jsx and their accessibility with screen readers.",
   "keywords": [
     "eslint",

src/index.js

@@ -3,6 +3,7 @@
 module.exports = {
   rules: {
     'img-uses-alt': require('./rules/img-uses-alt'),
+    'redundant-alt': require('./rules/redundant-alt'),
     'onclick-uses-role': require('./rules/onclick-uses-role'),
     'mouse-events-map-to-key-events': require('./rules/mouse-events-map-to-key-events'),
     'use-onblur-not-onchange': require('./rules/use-onblur-not-onchange'),

src/rules/redundant-alt.js

@@ -0,0 +1,50 @@
+/**
+ * @fileoverview Enforce img alt attribute does not have the word image, picture, or photo.
+ * @author Ethan Cohen
+ */
+'use strict';
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import hasAttribute from '../util/hasAttribute';
+import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
+
+const REDUNDANT_WORDS = [
+  'image',
+  'photo',
+  'picture'
+];
+
+const errorMessage = 'Redundant alt attribute. Screen-readers already announce `img` tags as an image. ' +
+  'You don\'t need to use the words `image`, `photo,` or `picture` in the alt prop.';
+
+module.exports = context => ({
+  JSXOpeningElement: node => {
+    const type = node.name.name;
+    if (type.toUpperCase() !== 'IMG') {
+      return;
+    }
+
+    const hasAltProp = hasAttribute(node.attributes, 'alt');
+    const isVisible = isHiddenFromScreenReader(node.attributes) === false;
+
+    if (Boolean(hasAltProp) && isVisible) {
+      const hasRedundancy = REDUNDANT_WORDS.some(word => Boolean(hasAltProp.value.value.match(new RegExp(word, 'gi'))));
+
+      if (hasRedundancy === true) {
+        context.report({
+          node,
+          message: errorMessage
+        });
+      }
+
+      return;
+    }
+  }
+});
+
+module.exports.schema = [
+  { type: 'object' }
+];

tests/src/rules/redundant-alt.js

@@ -0,0 +1,59 @@
+/**
+ * @fileoverview Enforce img alt attribute does not have the word image, picture, or photo.
+ * @author Ethan Cohen
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import rule from '../../../src/rules/redundant-alt';
+import { RuleTester } from 'eslint';
+
+const parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message: 'Redundant alt attribute. Screen-readers already announce `img` tags as an image. ' +
+    'You don\'t need to use the words `image`, `photo,` or `picture` in the alt prop.',
+  type: 'JSXOpeningElement'
+};
+
+ruleTester.run('img-uses-alt', rule, {
+  valid: [
+    { code: '<img alt="foo" />;', parserOptions },
+    { code: '<img alt="picture of me taking a photo of an image" aria-hidden />', parserOptions },
+    { code: '<img aria-hidden alt="photo of image" />', parserOptions },
+    { code: '<img ALt="foo" />;', parserOptions },
+    { code: '<img {...this.props} alt="foo" />', parserOptions },
+    { code: '<a />', parserOptions },
+    { code: '<img />', parserOptions },
+    { code: '<img aria-hidden={false} alt="Doing cool things." />', parserOptions }
+  ],
+  invalid: [
+    { code: '<img alt="Photo of friend." />;', errors: [ expectedError ], parserOptions },
+    { code: '<img alt="Picture of friend." />;', errors: [ expectedError ], parserOptions },
+    { code: '<img alt="Image of friend." />;', errors: [ expectedError ], parserOptions },
+    { code: '<img alt="PhOtO of friend." />;', errors: [ expectedError ], parserOptions },
+    { code: '<img alt="piCTUre of friend." />;', errors: [ expectedError ], parserOptions },
+    { code: '<img alt="imAGE of friend." />;', errors: [ expectedError ], parserOptions },
+    { code: '<img alt="photo of cool person" aria-hidden={false} />', errors: [ expectedError ], parserOptions },
+    { code: '<img alt="picture of cool person" aria-hidden={false} />', errors: [ expectedError ], parserOptions },
+    { code: '<img alt="image of cool person" aria-hidden={false} />', errors: [ expectedError ], parserOptions },
+    { code: '<img alt="photo" {...this.props} />', errors: [ expectedError ], parserOptions },
+    { code: '<img alt="image" {...this.props} />', errors: [ expectedError ], parserOptions },
+    { code: '<img alt="picture" {...this.props} />', errors: [ expectedError ], parserOptions }
+  ]
+});