[breaking] - Update schemas for all rules to objects (#81)

* [new] - Add support to pass prop options down for `href-no-hash` rule.

Fixes #76

* [new] - Update all schemas to use objects so that they are extensible in the future.

This will ensure that adding properties to the config won’t be a
breaking change for all rules.

* [docs] - Update docs to reflect new schemas.

* Remove Link from anchor-has-content in favor of eslintrc customization.

* Allow customization of keys for components and props for schema factories.

* Camelcase specialLink for consistency.

* Refactor schema generation to be more composable and local to the rules.

Author: beefancohen

docs/rules/anchor-has-content.md

@@ -7,7 +7,19 @@ Enforce that anchors have content and that the content is accessible to screen r
 
 ## Rule details
 
-This rule takes one optional argument of type string or array of strings. These strings determine which JSX elements should be checked including `a` and `Link` (react-router) by default. This is a good use case when you have a wrapper component that simply renders a anchor element (like in React):
+This rule takes one optional object argument of type object:
+
+```json
+{
+    "rules": {
+        "jsx-a11y/anchor-has-content": [ 2, {
+            "components": [ "Anchor" ],
+          }],
+    }
+}
+```
+
+For the `components` option, these strings determine which JSX elements (**always including** `<a>`) should be checked for having content. This is a good use case when you have a wrapper component that simply renders an `a` element (like in React):
 
 ```js
 // Anchor.js
@@ -26,17 +38,6 @@ return (
 );
 ```
 
-To tell this plugin to also check your `Anchor` element, specify this in your `.eslintrc` file:
-
-```json
-{
-    "rules": {
-        "jsx-a11y/anchor-has-content": [ 2, "Anchor" ], // OR
-        "jsx-a11y/anchor-has-content": [ 2, [ "AnchorOne", "AnchorTwo" ] ]
-    }
-}
-```
-
 
 ### Succeed
 ```jsx

docs/rules/heading-has-content.md

@@ -7,7 +7,20 @@ Enforce that heading elements (`h1`, `h2`, etc.) have content and that the conte
 
 ## Rule details
 
-This rule takes one optional argument of type string or array of strings. These strings determine which JSX elements should be checked including `h1`, `h2`, `h3`, `h4`, `h5`, and `h6` by default. This is a good use case when you have a wrapper component that simply renders a heading element (like in React):
+This rule takes one optional object argument of type object:
+
+```json
+{
+    "rules": {
+        "jsx-a11y/heading-has-content": [ 2, {
+            "components": [ "MyHeading" ],
+          }],
+    }
+}
+```
+
+For the `components` option, these strings determine which JSX elements (**always including** `<h1>` thru `<h6>`) should be checked for having content. This is a good use case when you have a wrapper component that simply renders an `h1` element (like in React):
+
 
 ```js
 // Header.js
@@ -26,18 +39,6 @@ return (
 );
 ```
 
-To tell this plugin to also check your `Header` element, specify this in your `.eslintrc` file:
-
-```json
-{
-    "rules": {
-        "jsx-a11y/heading-has-content": [ 2, "Header" ], // OR
-        "jsx-a11y/heading-has-content": [ 2, [ "HeaderOne", "HeaderTwo" ] ]
-    }
-}
-```
-
-
 #### Bad
 ```jsx
 function Foo(props) {

docs/rules/href-no-hash.md

@@ -4,7 +4,20 @@ Enforce an anchor element's href prop value is not just #. You should use someth
 
 ## Rule details
 
-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):
+This rule takes one optional object argument of type object:
+
+```json
+{
+    "rules": {
+        "jsx-a11y/href-no-hash": [ 2, {
+            "components": [ "Link" ],
+            "specialLink": [ "hrefLeft", "hrefRight" ]
+          }],
+    }
+}
+```
+
+For the `components` option, these strings determine which JSX elements (**always including** `<a>`) should be checked for the props designated in the `specialLink` options (**always including** `href`). This is a good use case when you have a wrapper component that simply renders an `a` element (like in React):
 
 ```js
 // Link.js
@@ -21,16 +34,6 @@ return (
 );
 ```
 
-To tell this plugin to also check your `Link` element, specify this in your `.eslintrc` file:
-
-```json
-{
-    "rules": {
-        "jsx-a11y/href-no-hash": [ 2, "Link" ], // OR
-        "jsx-a11y/href-no-hash": [ 2, [ "Link", "Anchor" ] ]
-    }
-}
-```
 
 ### Succeed
 ```jsx

docs/rules/img-has-alt.md

@@ -4,7 +4,19 @@ Enforce that an `img` element contains the `alt` prop. The `alt` attribute speci
 
 ## Rule details
 
-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):
+This rule takes one optional object argument of type object:
+
+```json
+{
+    "rules": {
+        "jsx-a11y/img-has-alt": [ 2, {
+            "components": [ "Image" ],
+          }],
+    }
+}
+```
+
+For the `components` option, these strings determine which JSX elements (**always including** `<img>`) should be checked for having `alt` prop. This is a good use case when you have a wrapper component that simply renders an `img` element (like in React):
 
 ```js
 // Image.js
@@ -30,18 +42,8 @@ return (
 );
 ```
 
-To tell this plugin to also check your `Image` element, specify this in your `.eslintrc` file:
-
-```json
-{
-    "rules": {
-        "jsx-a11y/img-has-alt": [ 2, "Image" ], <!-- OR -->
-        "jsx-a11y/img-has-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 or use `role="presentation"` for rule 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.** For example:
+
 #### Bad
 ```jsx
 function Foo(props) {

docs/rules/img-redundant-alt.md

@@ -3,21 +3,26 @@
 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 one optional argument of type string or array of strings. These strings can be used to specify custom words that should be checked for in the alt prop. Useful for specifying words in other languages.
 
-The 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.
-
-To tell this plugin to also check for custom words , specify this in your `.eslintrc` file:
+This rule takes one optional object argument of type object:
 
 ```json
 {
     "rules": {
-        "jsx-a11y/img-redundant-alt": [ 2, "Bild" ], // OR
-        "jsx-a11y/img-redundant-alt": [ 2, [ "Bild", "Foto" ] ]
+        "jsx-a11y/img-redundant-alt": [ 2, {
+            "components": [ "Image" ],
+            "words": [ "Bild", "Foto" ],
+          }],
     }
 }
 ```
 
+For the `components` option, these strings determine which JSX elements (**always including** `<img>`) should be checked for having redundant words in the `alt` prop value . This is a good use case when you have a wrapper component that simply renders an `img` element (like in React).
+
+For the `words` option, these strings can be used to specify custom words that should be checked for in the alt prop, including `image`, `photo`, and `picture`. Useful for specifying words in other languages.
+
+The 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." />

docs/rules/label-has-for.md

@@ -4,7 +4,19 @@ Enforce label tags have htmlFor attribute. Form controls using a label to identi
 
 ## Rule details
 
-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):
+This rule takes one optional object argument of type object:
+
+```json
+{
+    "rules": {
+        "jsx-a11y/label-has-for": [ 2, {
+            "components": [ "Label" ],
+          }],
+    }
+}
+```
+
+For the `components` option, these strings determine which JSX elements (**always including** `<label>`) should be checked for having `htmlFor` prop. This is a good use case when you have a wrapper component that simply renders a `label` element (like in React):
 
 ```js
 // Label.js
@@ -31,18 +43,8 @@ return (
 );
 ```
 
-To tell this plugin to also check your `Label` element, specify this in your `.eslintrc` file:
-
-```json
-{
-    "rules": {
-        "jsx-a11y/label-has-for": [ 2, "Label" ], // OR
-        "jsx-a11y/label-has-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.** For example:
+
 #### Bad
 ```jsx
 function Foo(props) {

src/rules/anchor-has-content.js

@@ -8,40 +8,25 @@
 // ----------------------------------------------------------------------------
 
 import { elementType, hasAnyProp } from 'jsx-ast-utils';
+import { arraySchema, generateObjSchema } from '../util/schemas';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 
 const errorMessage =
     'Anchors must have content and the content must be accessible by a screen reader.';
 
-const anchors = [
-  'a',
-  'Link',
-];
+const schema = generateObjSchema({ components: arraySchema });
 
 module.exports = {
   meta: {
     docs: {},
-
-    schema: [
-      {
-        oneOf: [
-          { type: 'string' },
-          {
-            type: 'array',
-            items: {
-              type: 'string',
-            },
-            minItems: 1,
-            uniqueItems: true,
-          },
-        ],
-      },
-    ],
+    schema: [schema],
   },
 
   create: context => ({
     JSXOpeningElement: (node) => {
-      const typeCheck = anchors.concat(context.options[0]);
+      const options = context.options[0] || {};
+      const componentOptions = options.components || [];
+      const typeCheck = ['a'].concat(componentOptions);
       const nodeType = elementType(node);
 
       // Only check anchor elements and custom types.

src/rules/aria-props.js

@@ -8,6 +8,7 @@
 // ----------------------------------------------------------------------------
 
 import { propName } from 'jsx-ast-utils';
+import { generateObjSchema } from '../util/schemas';
 import ariaAttributes from '../util/attributes/ARIA.json';
 import getSuggestion from '../util/getSuggestion';
 
@@ -23,13 +24,12 @@ const errorMessage = (name) => {
   return message;
 };
 
+const schema = generateObjSchema();
+
 module.exports = {
   meta: {
     docs: {},
-
-    schema: [
-      { type: 'object' },
-    ],
+    schema: [schema],
   },
 
   create: context => ({

src/rules/aria-proptypes.js

@@ -8,6 +8,7 @@
 // ----------------------------------------------------------------------------
 
 import { getLiteralPropValue, propName } from 'jsx-ast-utils';
+import { generateObjSchema } from '../util/schemas';
 import ariaAttributes from '../util/attributes/ARIA.json';
 
 const errorMessage = (name, type, permittedValues) => {
@@ -50,13 +51,12 @@ const validityCheck = (value, expectedType, permittedValues) => {
   }
 };
 
+const schema = generateObjSchema();
+
 module.exports = {
   meta: {
     docs: {},
-
-    schema: [
-      { type: 'object' },
-    ],
+    schema: [schema],
   },
 
   create: context => ({

src/rules/aria-role.js

@@ -8,17 +8,17 @@
 // ----------------------------------------------------------------------------
 
 import { getLiteralPropValue, propName } from 'jsx-ast-utils';
+import { generateObjSchema } from '../util/schemas';
 import roles from '../util/attributes/role.json';
 
 const errorMessage = 'Elements with ARIA roles must use a valid, non-abstract ARIA role.';
 
+const schema = generateObjSchema();
+
 module.exports = {
   meta: {
     docs: {},
-
-    schema: [
-      { type: 'object' },
-    ],
+    schema: [schema],
   },
 
   create: context => ({

src/rules/aria-unsupported-elements.js

@@ -9,20 +9,20 @@
 // ----------------------------------------------------------------------------
 
 import { elementType, propName } from 'jsx-ast-utils';
+import { generateObjSchema } from '../util/schemas';
 import DOM from '../util/attributes/DOM.json';
 import ARIA from '../util/attributes/ARIA.json';
 
 const errorMessage = invalidProp =>
   `This element does not support ARIA roles, states and properties. \
 Try removing the prop '${invalidProp}'.`;
 
+const schema = generateObjSchema();
+
 module.exports = {
   meta: {
     docs: {},
-
-    schema: [
-      { type: 'object' },
-    ],
+    schema: [schema],
   },
 
   create: context => ({