Implement custom type options for certain rules.

Also, fix variable checking for template literals so you can use
variable names that should not be found as strings in redundant-alt

Author: beefancohen

.eslintrc.js

@@ -60,7 +60,7 @@ module.exports = {
       "SwitchCase": 1
     } ],
     "jsx-quotes": [ 2, "prefer-double" ],
-    "max-len": [ 2, 120, 2, {
+    "max-len": [ 2, 125, 2, {
       "ignorePattern": "((^import[^;]+;$)|(^\\s*it\\())",
       "ignoreUrls": true
     } ],

docs/rules/img-uses-alt.md

@@ -1,10 +1,47 @@
 # img-uses-alt
 
-Enforce that an `img` element contains the `alt` prop. The alt attribute specifies an alternate text for an image, if the image cannot be displayed.
+Enforce that an `img` element contains the `alt` prop. The `alt` attribute specifies an alternate text for an image, if the image cannot be displayed.
 
 ## Rule details
 
-This rule takes no arguments. However, note that passing props as spread attribute without alt explicitly defined will cause this rule to fail. Explicitly pass down alt prop for rule to pass. Alt must have an actual value to pass.
+This rule takes one optional argument of type string or an array of strings. These strings determine which JSX elements should be checked for the `alt` prop **including** `img` by default. This is a good use case when you have a wrapper component that simply renders an `img` element (like in React):
+
+```js
+// Image.js
+const Image = props => {
+  const {
+    alt,
+    ...otherProps
+  } = props;
+
+  return (
+    <img alt={alt} {...otherProps} />
+  );
+}
+
+...
+
+// Header.js (for example)
+...
+return (
+  <header>
+    <Image alt="Logo" src="logo.jpg" />
+  </header>
+);
+```
+
+To tell this plugin to also check your `Image` element, specify this in your `.eslintrc` file:
+
+```json
+{
+    "rules": {
+        "jsx-a11y/img-uses-alt": [ 2, "Image" ], // OR
+        "jsx-a11y/img-uses-alt": [ 2, [ "Image", "Avatar" ] ]
+    }
+}
+```
+
+Note that passing props as spread attribute without `alt` explicitly defined will cause this rule to fail. Explicitly pass down `alt` prop for rule to pass. The prop must have an actual value to pass. Use `Image` component above as a reference for destructuring and applying the prop. **It is a good thing to explicitly pass props that you expect to be passed for self-documentation.**
 
 ### Succeed
 ```jsx

docs/rules/no-hash-href.md

@@ -4,18 +4,45 @@ Enforce an anchor element's href prop value is not just #. You should use someth
 
 ## Rule details
 
-This rule takes no arguments.
+This rule takes one optional argument of type string or an array of strings. These strings determine which JSX elements should be checked for the `href` prop **including** `a` by default. This is a good use case when you have a wrapper component that simply renders an `a` element (like in React):
+
+```js
+// Link.js
+const Link = props => <a {...props}>A link</a>;
+
+...
+
+// NavBar.js (for example)
+...
+return (
+  <nav>
+    <Link href="/home" />
+  </nav>
+);
+```
+
+To tell this plugin to also check your `Link` element, specify this in your `.eslintrc` file:
+
+```json
+{
+    "rules": {
+        "jsx-a11y/no-hash-href": [ 2, "Link" ], // OR
+        "jsx-a11y/no-hash-href": [ 2, [ "Link", "Anchor" ] ]
+    }
+}
+```
 
 ### Succeed
 ```jsx
 <a href="https://github.com" />
 <a href="#section" />
 <a href="foo" />
+<a href={undefined} /> // This check will pass, but WTF?
 ```
 
 ### Fail
 ```jsx
 <a href="#" />
 <a href={"#"} />
 <a href={`#`} />
-```
+```

docs/rules/redundant-alt.md

@@ -10,11 +10,12 @@ This rule takes no arguments. This rule will first check if `aria-hidden` is tru
 ```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.
+<img src="baz" alt={`Baz taking a ${photo}`} /> // This is valid since photo is a variable name.
 ```
 
 ### 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." />
-```
+```

docs/rules/use-label-for.md

@@ -4,7 +4,45 @@ Enforce label tags have htmlFor attribute. Form controls using a label to identi
 
 ## Rule details
 
-This rule takes no arguments.
+This rule takes one optional argument of type string or array of strings. These strings determine which JSX elements should be checked for the `htmlFor` prop including `label` by default. This is a good use case when you have a wrapper component that simply renders an `label` element (like in React):
+
+```js
+// Label.js
+const Label = props => {
+  const {
+    htmlFor,
+    ...otherProps
+  } = props;
+
+  return (
+    <label htmlFor={htmlFor} {...otherProps} />
+  );
+}
+
+...
+
+// CreateAccount.js (for example)
+...
+return (
+  <form>
+    <input id="firstName" type="text" />
+    <Label htmlFor="firstName">First Name</Label>
+  </form>
+);
+```
+
+To tell this plugin to also check your `Label` element, specify this in your `.eslintrc` file:
+
+```json
+{
+    "rules": {
+        "jsx-a11y/use-label-for": [ 2, "Label" ], // OR
+        "jsx-a11y/use-label-for": [ 2, [ "Label", "InputDescriptor" ] ]
+    }
+}
+```
+
+Note that passing props as spread attribute without `htmlFor` explicitly defined will cause this rule to fail. Explicitly pass down `htmlFor` prop for rule to pass. The prop must have an actual value to pass. Use `Label` component above as a reference. **It is a good thing to explicitly pass props that you expect to be passed for self-documentation.**
 
 ### Succeed
 ```jsx
@@ -16,4 +54,4 @@ This rule takes no arguments.
 ```jsx
 <input type="text" id="firstName" />
 <label>First Name</label>
-```
+```

package.json

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

src/rules/img-uses-alt.js

@@ -10,13 +10,15 @@
 
 import hasAttribute from '../util/hasAttribute';
 
-const errorMessage = 'img elements must have an alt tag.';
+const errorMessage = type => `${type} elements must have an alt tag.`;
 
 module.exports = context => ({
   JSXOpeningElement: node => {
-    const type = node.name.name;
-    // Only check img tags.
-    if (type !== 'img') {
+    const typeCheck = [ 'img' ].concat(context.options[0]);
+    const nodeType = node.name.name;
+
+    // Only check 'img' elements and custom types.
+    if (typeCheck.indexOf(nodeType) === -1) {
       return;
     }
 
@@ -26,12 +28,24 @@ module.exports = context => ({
     if (hasAltProp === false || hasAltProp === null) {
       context.report({
         node,
-        message: errorMessage
+        message: errorMessage(nodeType)
       });
     }
   }
 });
 
 module.exports.schema = [
-  { type: 'object' }
+  {
+    "oneOf": [
+      { "type": "string" },
+      {
+        "type": "array",
+        "items": {
+          "type": "string"
+        },
+        "minItems": 1,
+        "uniqueItems": true
+      }
+    ]
+  }
 ];

src/rules/no-hash-href.js

@@ -14,9 +14,11 @@ const errorMessage = 'Links must not point to "#". Use a more descriptive href o
 
 module.exports = context => ({
   JSXOpeningElement: node => {
-    const type = node.name.name;
-    // Only check img tags.
-    if (type !== 'a') {
+    const typeCheck = [ 'a' ].concat(context.options[0]);
+    const nodeType = node.name.name;
+
+    // Only check 'a' elements and custom types.
+    if (typeCheck.indexOf(nodeType) === -1) {
       return;
     }
 
@@ -32,5 +34,17 @@ module.exports = context => ({
 });
 
 module.exports.schema = [
-  { type: 'object' }
+  {
+    "oneOf": [
+      { "type": "string" },
+      {
+        "type": "array",
+        "items": {
+          "type": "string"
+        },
+        "minItems": 1,
+        "uniqueItems": true
+      }
+    ]
+  }
 ];

src/rules/redundant-alt.js

@@ -31,7 +31,8 @@ module.exports = context => ({
     const isVisible = isHiddenFromScreenReader(node.attributes) === false;
 
     if (Boolean(altProp) && typeof altProp === 'string' && isVisible) {
-      const hasRedundancy = REDUNDANT_WORDS.some(word => Boolean(altProp.match(new RegExp(word, 'gi'))));
+      const hasRedundancy = REDUNDANT_WORDS
+        .some(word => Boolean(altProp.match(new RegExp(`(?!{)${word}(?!})`, 'gi'))));
 
       if (hasRedundancy === true) {
         context.report({

src/rules/use-label-for.js

@@ -15,8 +15,11 @@ const errorMessage = 'Form controls using a label to identify them must be ' +
 
 module.exports = context => ({
   JSXOpeningElement: node => {
-    const type = node.name.name;
-    if (type !== 'label') {
+    const typeCheck = [ 'label' ].concat(context.options[0]);
+    const nodeType = node.name.name;
+
+    // Only check 'label' elements and custom types.
+    if (typeCheck.indexOf(nodeType) === -1) {
       return;
     }
 
@@ -32,5 +35,17 @@ module.exports = context => ({
 });
 
 module.exports.schema = [
-  { type: 'object' }
+  {
+    "oneOf": [
+      { "type": "string" },
+      {
+        "type": "array",
+        "items": {
+          "type": "string"
+        },
+        "minItems": 1,
+        "uniqueItems": true
+      }
+    ]
+  }
 ];