[New] Introduce a plugin-wide setting for custom components.

For #174

Author: pcorpet

README.md

@@ -89,6 +89,24 @@ Add `plugin:jsx-a11y/recommended` or `plugin:jsx-a11y/strict` in `extends`:
 }
 ```
 
+To enable your custom components to be checked as DOM elements, you can set global settings in your
+configuration file by mapping each custom component name to a DOM element type.
+
+```json
+{
+  "settings": {
+    "jsx-a11y": {
+      "components": {
+        "CityInput": "input",
+        "CustomButton": "button",
+        "MyButton": "button",
+        "RoundButton": "button"
+      }
+    }
+  }
+}
+```
+
 ## Supported Rules
 
 <!-- AUTO-GENERATED-CONTENT:START (LIST) -->

__tests__/__util__/parserOptionsMapper.js

@@ -11,6 +11,7 @@ export default function parserOptionsMapper({
   errors,
   options = [],
   parserOptions = {},
+  settings,
 }) {
   return {
     code,
@@ -20,5 +21,6 @@ export default function parserOptionsMapper({
       ...defaultParserOptions,
       ...parserOptions,
     },
+    settings,
   };
 }

__tests__/__util__/ruleOptionsMapperFactory.js

@@ -6,7 +6,8 @@ type ESLintTestRunnerTestCase = {
   code: string,
   errors: ?Array<{ message: string, type: string }>,
   options: ?Array<mixed>,
-  parserOptions: ?Array<mixed>
+  parserOptions: ?Array<mixed>,
+  settings?: {[string]: mixed},
 };
 
 type RuleOptionsMapperFactoryType = (
@@ -15,7 +16,7 @@ type RuleOptionsMapperFactoryType = (
 
 export default function ruleOptionsMapperFactory(ruleOptions: Array<mixed> = []): RuleOptionsMapperFactoryType {
   // eslint-disable-next-line
-  return ({ code, errors, options, parserOptions }: ESLintTestRunnerTestCase): ESLintTestRunnerTestCase => {
+  return ({ code, errors, options, parserOptions, settings }: ESLintTestRunnerTestCase): ESLintTestRunnerTestCase => {
     return {
       code,
       errors,
@@ -25,6 +26,7 @@ export default function ruleOptionsMapperFactory(ruleOptions: Array<mixed> = [])
         ...item,
       }], [{}]),
       parserOptions,
+      settings,
     };
   };
 }

__tests__/src/rules/accessible-emoji-test.js

@@ -37,6 +37,11 @@ ruleTester.run('accessible-emoji', rule, {
     { code: '<span aria-hidden="true">🐼</span>' },
     { code: '<span aria-hidden>🐼</span>' },
     { code: '<div aria-hidden="true">🐼</div>' },
+    { code: '<input type="hidden">🐼</input>' },
+    {
+      code: '<CustomInput type="hidden">🐼</CustomInput>',
+      settings: { 'jsx-a11y': { components: { CustomInput: 'input' } } },
+    },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<span>🐼</span>', errors: [expectedError] },
@@ -46,5 +51,6 @@ ruleTester.run('accessible-emoji', rule, {
     { code: '<i role="img" aria-labelledby="id1">🐼</i>', errors: [expectedError] },
     { code: '<Foo>🐼</Foo>', errors: [expectedError] },
     { code: '<span aria-hidden="false">🐼</span>', errors: [expectedError] },
+    { code: '<CustomInput type="hidden">🐼</CustomInput>', errors: [expectedError] },
   ].map(parserOptionsMapper),
 });

__tests__/src/rules/alt-text-test.js

@@ -42,6 +42,14 @@ const areaError = 'Each area of an image map must have a text alternative throug
 
 const inputImageError = '<input> elements with type="image" must have a text alternative through the `alt`, `aria-label`, or `aria-labelledby` prop.';
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Input: 'input',
+    },
+  },
+};
+
 const array = [{
   img: ['Thumbnail', 'Image'],
   object: ['Object'],
@@ -112,6 +120,7 @@ ruleTester.run('alt-text', rule, {
     { code: '<input type="image" alt="This is descriptive!" />' },
     { code: '<input type="image" alt={altText} />' },
     { code: '<InputImage />' },
+    { code: '<Input type="image" alt="" />', settings: componentsSettings },
 
     // CUSTOM ELEMENT TESTS FOR ARRAY OPTION TESTS
     { code: '<Thumbnail alt="foo" />;', options: array },
@@ -263,5 +272,6 @@ ruleTester.run('alt-text', rule, {
     { code: '<InputImage alt={undefined} />', errors: [inputImageError], options: array },
     { code: '<InputImage>Foo</InputImage>', errors: [inputImageError], options: array },
     { code: '<InputImage {...this.props} />', errors: [inputImageError], options: array },
+    { code: '<Input type="image" />', errors: [inputImageError], settings: componentsSettings },
   ].map(parserOptionsMapper),
 });

__tests__/src/rules/anchor-has-content-test.js

@@ -31,10 +31,20 @@ ruleTester.run('anchor-has-content', rule, {
     { code: '<a>{foo.bar}</a>' },
     { code: '<a dangerouslySetInnerHTML={{ __html: "foo" }} />' },
     { code: '<a children={children} />' },
+    { code: '<Link />' },
+    {
+      code: '<Link>foo</Link>',
+      settings: { 'jsx-a11y': { components: { Link: 'a' } } },
+    },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<a />', errors: [expectedError] },
     { code: '<a><Bar aria-hidden /></a>', errors: [expectedError] },
     { code: '<a>{undefined}</a>', errors: [expectedError] },
+    {
+      code: '<Link />',
+      errors: [expectedError],
+      settings: { 'jsx-a11y': { components: { Link: 'a' } } },
+    },
   ].map(parserOptionsMapper),
 });

__tests__/src/rules/anchor-is-valid-test.js

@@ -78,10 +78,19 @@ const componentsAndSpecialLinkAndNoHrefAspect = [{
   aspects: ['noHref'],
 }];
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Anchor: 'a',
+      Link: 'a',
+    },
+  },
+};
+
 ruleTester.run('anchor-is-valid', rule, {
   valid: [
     // DEFAULT ELEMENT 'a' TESTS
-    { code: '<Anchor />;' },
+    { code: '<Anchor />' },
     { code: '<a {...props} />' },
     { code: '<a href="foo" />' },
     { code: '<a href={foo} />' },
@@ -119,6 +128,7 @@ ruleTester.run('anchor-is-valid', rule, {
     { code: '<Link href={`#foo`}/>', options: components },
     { code: '<Link href={"foo"}/>', options: components },
     { code: '<Link href="#foo" />', options: components },
+    { code: '<Link href="#foo" />', settings: componentsSettings },
 
     // CUSTOM PROP TESTS
     { code: '<a {...props} />', options: specialLink },
@@ -332,6 +342,11 @@ ruleTester.run('anchor-is-valid', rule, {
       errors: [preferButtonexpectedError],
       options: components,
     },
+    {
+      code: '<Link href="#" onClick={() => void 0} />',
+      errors: [preferButtonexpectedError],
+      settings: componentsSettings,
+    },
 
     // CUSTOM PROP TESTS
     // NO HREF

__tests__/src/rules/aria-activedescendant-has-tabindex-test.js

@@ -36,6 +36,10 @@ ruleTester.run('aria-activedescendant-has-tabindex', rule, {
     {
       code: '<CustomComponent aria-activedescendant={someID} tabIndex={-1} />;',
     },
+    {
+      code: '<CustomComponent aria-activedescendant={someID} tabIndex={0} />;',
+      settings: { 'jsx-a11y': { components: { CustomComponent: 'div' } } },
+    },
     {
       code: '<div />;',
     },
@@ -81,5 +85,10 @@ ruleTester.run('aria-activedescendant-has-tabindex', rule, {
       code: '<div aria-activedescendant={someID} />;',
       errors: [expectedError],
     },
+    {
+      code: '<CustomComponent aria-activedescendant={someID} />;',
+      errors: [expectedError],
+      settings: { 'jsx-a11y': { components: { CustomComponent: 'div' } } },
+    },
   ].map(parserOptionsMapper),
 });

__tests__/src/rules/aria-role-test.js

@@ -47,6 +47,14 @@ const ignoreNonDOMSchema = [{
   ignoreNonDOM: true,
 }];
 
+const customDivSettings = {
+  'jsx-a11y': {
+    components: {
+      Div: 'div',
+    },
+  },
+};
+
 ruleTester.run('aria-role', rule, {
   valid: [
     // Variables should pass, as we are only testing literals.
@@ -66,6 +74,11 @@ ruleTester.run('aria-role', rule, {
     { code: '<Foo role="bar" />', options: ignoreNonDOMSchema },
     { code: '<fakeDOM role="bar" />', options: ignoreNonDOMSchema },
     { code: '<img role="presentation" />', options: ignoreNonDOMSchema },
+    {
+      code: '<Div role="button" />',
+      errors: [errorMessage],
+      settings: customDivSettings,
+    },
   ].concat(validTests).map(parserOptionsMapper),
 
   invalid: [
@@ -82,5 +95,12 @@ ruleTester.run('aria-role', rule, {
     { code: '<div role={null}></div>', errors: [errorMessage] },
     { code: '<Foo role="datepicker" />', errors: [errorMessage] },
     { code: '<Foo role="Button" />', errors: [errorMessage] },
+    { code: '<Div role="Button" />', errors: [errorMessage], settings: customDivSettings },
+    {
+      code: '<Div role="Button" />',
+      errors: [errorMessage],
+      options: ignoreNonDOMSchema,
+      settings: customDivSettings,
+    },
   ].concat(invalidTests).map(parserOptionsMapper),
 });

__tests__/src/rules/aria-unsupported-elements-test.js

@@ -54,7 +54,11 @@ const invalidRoleValidityTests = domElements
   .map((reservedElem) => ({
     code: `<${reservedElem} role {...props} />`,
     errors: [errorMessage('role')],
-  }));
+  })).concat({
+    code: '<Meta aria-hidden />',
+    errors: [errorMessage('aria-hidden')],
+    settings: { 'jsx-a11y': { components: { Meta: 'meta' } } },
+  });
 
 const invalidAriaValidityTests = domElements
   .filter((element) => Boolean(dom.get(element).reserved))