From 64dcac616d82a3c1184158a717140ebbf2105272 Mon Sep 17 00:00:00 2001
From: Pascal Corpet <pascal@bayesimpact.org>
Date: Fri, 8 Apr 2022 20:53:59 +0200
Subject: [PATCH] [New] Introduce a plugin-wide setting for custom components.

For #174
---
 README.md                                     |  18 +++
 __tests__/__util__/parserOptionsMapper.js     |   2 +
 .../__util__/ruleOptionsMapperFactory.js      |   6 +-
 __tests__/src/rules/accessible-emoji-test.js  |   6 +
 __tests__/src/rules/alt-text-test.js          |  10 ++
 .../src/rules/anchor-has-content-test.js      |  10 ++
 __tests__/src/rules/anchor-is-valid-test.js   |  17 +-
 ...aria-activedescendant-has-tabindex-test.js |   9 ++
 __tests__/src/rules/aria-role-test.js         |  20 +++
 .../rules/aria-unsupported-elements-test.js   |   6 +-
 .../src/rules/autocomplete-valid-test.js      |  11 ++
 .../click-events-have-key-events-test.js      |   2 +
 .../control-has-associated-label-test.js      |   2 +
 .../src/rules/heading-has-content-test.js     |  18 +++
 __tests__/src/rules/html-has-lang-test.js     |   2 +
 __tests__/src/rules/iframe-has-title-test.js  |  10 ++
 __tests__/src/rules/img-redundant-alt-test.js |  11 ++
 .../rules/interactive-supports-focus-test.js  |  17 ++
 .../label-has-associated-control-test.js      |  19 +++
 __tests__/src/rules/lang-test.js              |  12 +-
 __tests__/src/rules/media-has-caption-test.js |  72 +++++++++
 __tests__/src/rules/no-autofocus-test.js      |  17 ++
 .../src/rules/no-distracting-elements-test.js |   9 ++
 ...ive-element-to-noninteractive-role-test.js |  14 ++
 ...oninteractive-element-interactions-test.js |  11 ++
 ...active-element-to-interactive-role-test.js |  14 ++
 .../rules/no-noninteractive-tabindex-test.js  |  12 ++
 __tests__/src/rules/no-onchange-test.js       |  12 ++
 .../src/rules/no-redundant-roles-test.js      |  10 ++
 .../no-static-element-interactions-test.js    |  12 ++
 .../role-has-required-aria-props-test.js      |  11 ++
 .../rules/role-supports-aria-props-test.js    |  14 ++
 __tests__/src/rules/scope-test.js             |  11 ++
 __tests__/src/util/getElementType-test.js     |  45 ++++++
 __tests__/src/util/hasAccessibleChild-test.js |  39 +++--
 .../src/util/mayContainChildComponent-test.js |  23 +++
 flow/eslint.js                                |   8 +
 src/rules/accessible-emoji.js                 |  54 ++++---
 src/rules/alt-text.js                         |  15 +-
 src/rules/anchor-has-content.js               |  47 +++---
 src/rules/anchor-is-valid.js                  | 150 +++++++++---------
 .../aria-activedescendant-has-tabindex.js     |  68 ++++----
 src/rules/aria-role.js                        |   4 +-
 src/rules/aria-unsupported-elements.js        |  58 +++----
 src/rules/autocomplete-valid.js               |  72 +++++----
 src/rules/click-events-have-key-events.js     |  70 ++++----
 src/rules/control-has-associated-label.js     |   4 +-
 src/rules/heading-has-content.js              |  53 ++++---
 src/rules/html-has-lang.js                    |  38 +++--
 src/rules/iframe-has-title.js                 |  38 +++--
 src/rules/img-redundant-alt.js                |  68 ++++----
 src/rules/interactive-supports-focus.js       | 103 ++++++------
 src/rules/label-has-associated-control.js     |   5 +-
 src/rules/label-has-for.js                    |  60 +++----
 src/rules/lang.js                             |  68 ++++----
 src/rules/media-has-caption.js                |  80 +++++-----
 src/rules/no-autofocus.js                     |  50 +++---
 src/rules/no-distracting-elements.js          |  35 ++--
 ...eractive-element-to-noninteractive-role.js |   3 +-
 .../no-noninteractive-element-interactions.js |   3 +-
 ...interactive-element-to-interactive-role.js |   3 +-
 src/rules/no-noninteractive-tabindex.js       |   3 +-
 src/rules/no-onchange.js                      |  44 ++---
 src/rules/no-redundant-roles.js               |   3 +-
 src/rules/no-static-element-interactions.js   |   3 +-
 src/rules/role-has-required-aria-props.js     |  93 +++++------
 src/rules/role-supports-aria-props.js         |  81 +++++-----
 src/rules/scope.js                            |  56 ++++---
 src/util/getElementType.js                    |  23 +++
 src/util/hasAccessibleChild.js                |   6 +-
 src/util/mayContainChildComponent.js          |   5 +-
 71 files changed, 1317 insertions(+), 691 deletions(-)
 create mode 100644 __tests__/src/util/getElementType-test.js
 create mode 100644 src/util/getElementType.js

diff --git a/README.md b/README.md
index c75e78dad..214dcc7d0 100644
--- a/README.md
+++ b/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) -->
diff --git a/__tests__/__util__/parserOptionsMapper.js b/__tests__/__util__/parserOptionsMapper.js
index c3d2f77bd..74db94a78 100644
--- a/__tests__/__util__/parserOptionsMapper.js
+++ b/__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,
   };
 }
diff --git a/__tests__/__util__/ruleOptionsMapperFactory.js b/__tests__/__util__/ruleOptionsMapperFactory.js
index 7175bf91b..1e1b628b0 100644
--- a/__tests__/__util__/ruleOptionsMapperFactory.js
+++ b/__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,
     };
   };
 }
diff --git a/__tests__/src/rules/accessible-emoji-test.js b/__tests__/src/rules/accessible-emoji-test.js
index bcdb42964..dc3d19683 100644
--- a/__tests__/src/rules/accessible-emoji-test.js
+++ b/__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),
 });
diff --git a/__tests__/src/rules/alt-text-test.js b/__tests__/src/rules/alt-text-test.js
index 5379376fc..bd2463d73 100644
--- a/__tests__/src/rules/alt-text-test.js
+++ b/__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),
 });
diff --git a/__tests__/src/rules/anchor-has-content-test.js b/__tests__/src/rules/anchor-has-content-test.js
index 77559da31..0935395e0 100644
--- a/__tests__/src/rules/anchor-has-content-test.js
+++ b/__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),
 });
diff --git a/__tests__/src/rules/anchor-is-valid-test.js b/__tests__/src/rules/anchor-is-valid-test.js
index fd7f44940..5b368d9e7 100644
--- a/__tests__/src/rules/anchor-is-valid-test.js
+++ b/__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
diff --git a/__tests__/src/rules/aria-activedescendant-has-tabindex-test.js b/__tests__/src/rules/aria-activedescendant-has-tabindex-test.js
index 917898e80..6c251cf23 100644
--- a/__tests__/src/rules/aria-activedescendant-has-tabindex-test.js
+++ b/__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),
 });
diff --git a/__tests__/src/rules/aria-role-test.js b/__tests__/src/rules/aria-role-test.js
index a9cdfeb51..9ccca139d 100644
--- a/__tests__/src/rules/aria-role-test.js
+++ b/__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),
 });
diff --git a/__tests__/src/rules/aria-unsupported-elements-test.js b/__tests__/src/rules/aria-unsupported-elements-test.js
index d34b517eb..b29a617c5 100644
--- a/__tests__/src/rules/aria-unsupported-elements-test.js
+++ b/__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))
diff --git a/__tests__/src/rules/autocomplete-valid-test.js b/__tests__/src/rules/autocomplete-valid-test.js
index ef731b19c..49f194067 100644
--- a/__tests__/src/rules/autocomplete-valid-test.js
+++ b/__tests__/src/rules/autocomplete-valid-test.js
@@ -28,6 +28,14 @@ const inappropriateAutocomplete = [{
   type: 'JSXOpeningElement',
 }];
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Input: 'input',
+    },
+  },
+};
+
 ruleTester.run('autocomplete-valid', rule, {
   valid: [
     // INAPPLICABLE
@@ -46,6 +54,8 @@ ruleTester.run('autocomplete-valid', rule, {
     { code: '<input type="text" autocomplete={autocompl || "foo"} />;' },
     { code: '<Foo autocomplete="bar"></Foo>;' },
     { code: '<input type={isEmail ? "email" : "text"} autocomplete="none" />;' },
+    { code: '<Input type="text" autocomplete="name" />', settings: componentsSettings },
+    { code: '<Input type="text" autocomplete="baz" />' },
 
     // PASSED "autocomplete-appropriate"
     // see also: https://github.com/dequelabs/axe-core/issues/2912
@@ -61,5 +71,6 @@ ruleTester.run('autocomplete-valid', rule, {
     { code: '<input type="text" autocomplete="invalid name" />;', errors: invalidAutocomplete },
     { code: '<input type="text" autocomplete="home url" />;', errors: invalidAutocomplete },
     { code: '<Bar autocomplete="baz"></Bar>;', errors: invalidAutocomplete, options: [{ inputComponents: ['Bar'] }] },
+    { code: '<Input type="text" autocomplete="baz" />', errors: invalidAutocomplete, settings: componentsSettings },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/click-events-have-key-events-test.js b/__tests__/src/rules/click-events-have-key-events-test.js
index 89965a57b..5460504f6 100644
--- a/__tests__/src/rules/click-events-have-key-events-test.js
+++ b/__tests__/src/rules/click-events-have-key-events-test.js
@@ -51,6 +51,7 @@ ruleTester.run('click-events-have-key-events', rule, {
     { code: '<div onClick={() => void 0} role="none" />;' },
     { code: '<TestComponent onClick={doFoo} />' },
     { code: '<Button onClick={doFoo} />' },
+    { code: '<Footer onClick={doFoo} />' },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<div onClick={() => void 0} />;', errors: [expectedError] },
@@ -70,5 +71,6 @@ ruleTester.run('click-events-have-key-events', rule, {
     },
     { code: '<a onClick={() => void 0} />', errors: [expectedError] },
     { code: '<a tabIndex="0" onClick={() => void 0} />', errors: [expectedError] },
+    { code: '<Footer onClick={doFoo} />', errors: [expectedError], settings: { 'jsx-a11y': { components: { Footer: 'footer' } } } },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/control-has-associated-label-test.js b/__tests__/src/rules/control-has-associated-label-test.js
index 3a285c74f..82c564320 100644
--- a/__tests__/src/rules/control-has-associated-label-test.js
+++ b/__tests__/src/rules/control-has-associated-label-test.js
@@ -30,6 +30,7 @@ const alwaysValid = [
   // Custom Control Components
   { code: '<CustomControl><span><span>Save</span></span></CustomControl>', options: [{ depth: 3, controlComponents: ['CustomControl'] }] },
   { code: '<CustomControl><span><span label="Save"></span></span></CustomControl>', options: [{ depth: 3, controlComponents: ['CustomControl'], labelAttributes: ['label'] }] },
+  { code: '<CustomControl>Save</CustomControl>', settings: { 'jsx-a11y': { components: { CustomControl: 'button' } } } },
   // Interactive Elements
   { code: '<button>Save</button>' },
   { code: '<button><span>Save</span></button>' },
@@ -255,6 +256,7 @@ const neverValid = [
   { code: '<button><span title="This is not a real label" /></button>', errors: [expectedError] },
   { code: '<button><span><span><span>Save</span></span></span></button>', options: [{ depth: 3 }], errors: [expectedError] },
   { code: '<CustomControl><span><span></span></span></CustomControl>', options: [{ depth: 3, controlComponents: ['CustomControl'] }], errors: [expectedError] },
+  { code: '<CustomControl></CustomControl>', errors: [expectedError], settings: { 'jsx-a11y': { components: { CustomControl: 'button' } } } },
   { code: '<a href="#" />', errors: [expectedError] },
   { code: '<area href="#" />', errors: [expectedError] },
   { code: '<menuitem />', errors: [expectedError] },
diff --git a/__tests__/src/rules/heading-has-content-test.js b/__tests__/src/rules/heading-has-content-test.js
index e52930452..a2a201be0 100644
--- a/__tests__/src/rules/heading-has-content-test.js
+++ b/__tests__/src/rules/heading-has-content-test.js
@@ -26,6 +26,16 @@ const components = [{
   components: ['Heading', 'Title'],
 }];
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      CustomInput: 'input',
+      Title: 'h1',
+      Heading: 'h2',
+    },
+  },
+};
+
 ruleTester.run('heading-has-content', rule, {
   valid: [
     // DEFAULT ELEMENT TESTS
@@ -51,16 +61,24 @@ ruleTester.run('heading-has-content', rule, {
     { code: '<Heading dangerouslySetInnerHTML={{ __html: "foo" }} />', options: components },
     { code: '<Heading children={children} />', options: components },
     { code: '<h1 aria-hidden />' },
+    // CUSTOM ELEMENT TESTS FOR COMPONENTS SETTINGS
+    { code: '<Heading>Foo</Heading>', settings: componentsSettings },
+    { code: '<h1><CustomInput type="hidden" /></h1>' },
   ].map(parserOptionsMapper),
   invalid: [
     // DEFAULT ELEMENT TESTS
     { code: '<h1 />', errors: [expectedError] },
     { code: '<h1><Bar aria-hidden /></h1>', errors: [expectedError] },
     { code: '<h1>{undefined}</h1>', errors: [expectedError] },
+    { code: '<h1><input type="hidden" /></h1>', errors: [expectedError] },
 
     // CUSTOM ELEMENT TESTS FOR COMPONENTS OPTION
     { code: '<Heading />', errors: [expectedError], options: components },
     { code: '<Heading><Bar aria-hidden /></Heading>', errors: [expectedError], options: components },
     { code: '<Heading>{undefined}</Heading>', errors: [expectedError], options: components },
+
+    // CUSTOM ELEMENT TESTS FOR COMPONENTS SETTINGS
+    { code: '<Heading />', errors: [expectedError], settings: componentsSettings },
+    { code: '<h1><CustomInput type="hidden" /></h1>', errors: [expectedError], settings: componentsSettings },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/html-has-lang-test.js b/__tests__/src/rules/html-has-lang-test.js
index 61348f676..ba9e58d0a 100644
--- a/__tests__/src/rules/html-has-lang-test.js
+++ b/__tests__/src/rules/html-has-lang-test.js
@@ -30,10 +30,12 @@ ruleTester.run('html-has-lang', rule, {
     { code: '<html lang={foo} />' },
     { code: '<html lang />' },
     { code: '<HTML />' },
+    { code: '<HTMLTop lang="en" />', errors: [expectedError], settings: { 'jsx-a11y': { components: { HTMLTop: 'html' } } } },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<html />', errors: [expectedError] },
     { code: '<html {...props} />', errors: [expectedError] },
     { code: '<html lang={undefined} />', errors: [expectedError] },
+    { code: '<HTMLTop />', errors: [expectedError], settings: { 'jsx-a11y': { components: { HTMLTop: 'html' } } } },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/iframe-has-title-test.js b/__tests__/src/rules/iframe-has-title-test.js
index 195fdba44..716be75e0 100644
--- a/__tests__/src/rules/iframe-has-title-test.js
+++ b/__tests__/src/rules/iframe-has-title-test.js
@@ -22,12 +22,21 @@ const expectedError = {
   type: 'JSXOpeningElement',
 };
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      FooComponent: 'iframe',
+    },
+  },
+};
+
 ruleTester.run('html-has-lang', rule, {
   valid: [
     { code: '<div />;' },
     { code: '<iframe title="Unique title" />' },
     { code: '<iframe title={foo} />' },
     { code: '<FooComponent />' },
+    { code: '<FooComponent title="Unique title" />', settings: componentsSettings },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<iframe />', errors: [expectedError] },
@@ -40,5 +49,6 @@ ruleTester.run('html-has-lang', rule, {
     { code: '<iframe title={``} />', errors: [expectedError] },
     { code: '<iframe title={""} />', errors: [expectedError] },
     { code: '<iframe title={42} />', errors: [expectedError] },
+    { code: '<FooComponent />', errors: [expectedError], settings: componentsSettings },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/img-redundant-alt-test.js b/__tests__/src/rules/img-redundant-alt-test.js
index e4ce2658f..868577a07 100644
--- a/__tests__/src/rules/img-redundant-alt-test.js
+++ b/__tests__/src/rules/img-redundant-alt-test.js
@@ -22,6 +22,14 @@ const array = [{
   words: ['Word1', 'Word2'],
 }];
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Image: 'img',
+    },
+  },
+};
+
 const ruleTester = new RuleTester();
 
 const expectedError = {
@@ -63,6 +71,8 @@ ruleTester.run('img-redundant-alt', rule, {
     ] : [],
     { code: '<img alt="Photography" />;' },
     { code: '<img alt="ImageMagick" />;' },
+    { code: '<Image alt="Photo of a friend" />' },
+    { code: '<Image alt="Foo" />', settings: componentsSettings },
   ).map(parserOptionsMapper),
   invalid: [
     { code: '<img alt="Photo of friend." />;', errors: [expectedError] },
@@ -111,6 +121,7 @@ ruleTester.run('img-redundant-alt', rule, {
       code: '<img alt={`image doing ${image}`} {...this.props} />',
       errors: [expectedError],
     },
+    { code: '<Image alt="Photo of a friend" />', errors: [expectedError], settings: componentsSettings },
 
     // TESTS FOR ARRAY OPTION TESTS
     { code: '<img alt="Word1" />;', options: array, errors: [expectedError] },
diff --git a/__tests__/src/rules/interactive-supports-focus-test.js b/__tests__/src/rules/interactive-supports-focus-test.js
index 4f97e786d..19bac9f57 100644
--- a/__tests__/src/rules/interactive-supports-focus-test.js
+++ b/__tests__/src/rules/interactive-supports-focus-test.js
@@ -38,6 +38,16 @@ const tabindexTemplate = template`<${0} role="${1}" ${2}={() => void 0} tabIndex
 const tabbableTemplate = template`Elements with the '${0}' interactive role must be tabbable.`;
 const focusableTemplate = template`Elements with the '${0}' interactive role must be focusable.`;
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Div: 'div',
+    },
+  },
+};
+
+const buttonError = { message: tabbableTemplate('button'), type };
+
 const recommendedOptions = configs.recommended.rules[`jsx-a11y/${ruleName}`][1] || {};
 
 const strictOptions = configs.strict.rules[`jsx-a11y/${ruleName}`][1] || {};
@@ -116,6 +126,11 @@ const alwaysValid = [
   { code: '<div role="textbox" aria-disabled="true" onClick={() => void 0} />' },
   { code: '<Foo.Bar onClick={() => void 0} aria-hidden={false} />;' },
   { code: '<Input onClick={() => void 0} type="hidden" />;' },
+  { code: '<Div onClick={() => void 0} role="button" tabIndex="0" />', settings: componentsSettings },
+];
+
+const neverValid = [
+  { code: '<Div onClick={() => void 0} role="button" />', errors: [buttonError], settings: componentsSettings },
 ];
 
 const interactiveRoles = [
@@ -209,6 +224,7 @@ ruleTester.run(`${ruleName}:recommended`, rule, {
     .map(ruleOptionsMapperFactory(recommendedOptions))
     .map(parserOptionsMapper),
   invalid: [
+    ...neverValid,
     ...failReducer(recommendedRoles, triggeringHandlers, tabbableTemplate),
     ...failReducer(
       interactiveRoles.filter((role) => !includes(recommendedRoles, role)),
@@ -237,6 +253,7 @@ ruleTester.run(`${ruleName}:strict`, rule, {
     .map(ruleOptionsMapperFactory(strictOptions))
     .map(parserOptionsMapper),
   invalid: [
+    ...neverValid,
     ...failReducer(strictRoles, triggeringHandlers, tabbableTemplate),
     ...failReducer(
       interactiveRoles.filter((role) => !includes(strictRoles, role)),
diff --git a/__tests__/src/rules/label-has-associated-control-test.js b/__tests__/src/rules/label-has-associated-control-test.js
index e80e21fcb..9d1ee028f 100644
--- a/__tests__/src/rules/label-has-associated-control-test.js
+++ b/__tests__/src/rules/label-has-associated-control-test.js
@@ -25,6 +25,15 @@ const expectedError = {
   type: 'JSXOpeningElement',
 };
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      CustomInput: 'input',
+      CustomLabel: 'label',
+    },
+  },
+};
+
 const htmlForValid = [
   { code: '<label htmlFor="js_id"><span><span><span>A label</span></span></span></label>', options: [{ depth: 4 }] },
   { code: '<label htmlFor="js_id" aria-label="A label" />' },
@@ -33,6 +42,7 @@ const htmlForValid = [
   // Custom label component.
   { code: '<CustomLabel htmlFor="js_id" aria-label="A label" />', options: [{ labelComponents: ['CustomLabel'] }] },
   { code: '<CustomLabel htmlFor="js_id" label="A label" />', options: [{ labelAttributes: ['label'], labelComponents: ['CustomLabel'] }] },
+  { code: '<CustomLabel htmlFor="js_id" aria-label="A label" />', settings: componentsSettings },
   // Custom label attributes.
   { code: '<label htmlFor="js_id" label="A label" />', options: [{ labelAttributes: ['label'] }] },
   // Glob support for controlComponents option.
@@ -57,6 +67,7 @@ const nestingValid = [
   { code: '<label>foo<textarea /></label>' },
   // Custom controlComponents.
   { code: '<label><span>A label<CustomInput /></span></label>', options: [{ controlComponents: ['CustomInput'] }] },
+  { code: '<label><span>A label<CustomInput /></span></label>', settings: componentsSettings },
   { code: '<CustomLabel><span>A label<CustomInput /></span></CustomLabel>', options: [{ controlComponents: ['CustomInput'], labelComponents: ['CustomLabel'] }] },
   { code: '<CustomLabel><span label="A label"><CustomInput /></span></CustomLabel>', options: [{ controlComponents: ['CustomInput'], labelComponents: ['CustomLabel'], labelAttributes: ['label'] }] },
   // Glob support for controlComponents option.
@@ -72,6 +83,8 @@ const bothValid = [
   // Custom label component.
   { code: '<CustomLabel htmlFor="js_id" aria-label="A label"><input /></CustomLabel>', options: [{ labelComponents: ['CustomLabel'] }] },
   { code: '<CustomLabel htmlFor="js_id" label="A label"><input /></CustomLabel>', options: [{ labelAttributes: ['label'], labelComponents: ['CustomLabel'] }] },
+  { code: '<CustomLabel htmlFor="js_id" aria-label="A label"><input /></CustomLabel>', settings: componentsSettings },
+  { code: '<CustomLabel htmlFor="js_id" aria-label="A label"><CustomInput /></CustomLabel>', settings: componentsSettings },
   // Custom label attributes.
   { code: '<label htmlFor="js_id" label="A label"><input /></label>', options: [{ labelAttributes: ['label'] }] },
   { code: '<label htmlFor="selectInput">Some text<select id="selectInput" /></label>' },
@@ -90,6 +103,7 @@ const htmlForInvalid = [
   // Custom label component.
   { code: '<CustomLabel htmlFor="js_id" aria-label="A label" />', options: [{ labelComponents: ['CustomLabel'] }], errors: [expectedError] },
   { code: '<CustomLabel htmlFor="js_id" label="A label" />', options: [{ labelAttributes: ['label'], labelComponents: ['CustomLabel'] }], errors: [expectedError] },
+  { code: '<CustomLabel htmlFor="js_id" aria-label="A label" />', settings: componentsSettings, errors: [expectedError] },
   // Custom label attributes.
   { code: '<label htmlFor="js_id" label="A label" />', options: [{ labelAttributes: ['label'] }], errors: [expectedError] },
 ];
@@ -108,6 +122,8 @@ const nestingInvalid = [
   { code: '<label><span>A label<CustomInput /></span></label>', options: [{ controlComponents: ['CustomInput'] }], errors: [expectedError] },
   { code: '<CustomLabel><span>A label<CustomInput /></span></CustomLabel>', options: [{ controlComponents: ['CustomInput'], labelComponents: ['CustomLabel'] }], errors: [expectedError] },
   { code: '<CustomLabel><span label="A label"><CustomInput /></span></CustomLabel>', options: [{ controlComponents: ['CustomInput'], labelComponents: ['CustomLabel'], labelAttributes: ['label'] }], errors: [expectedError] },
+  { code: '<label><span>A label<CustomInput /></span></label>', settings: componentsSettings, errors: [expectedError] },
+  { code: '<CustomLabel><span>A label<CustomInput /></span></CustomLabel>', settings: componentsSettings, errors: [expectedError] },
 ];
 
 const neverValid = [
@@ -121,12 +137,15 @@ const neverValid = [
   // Custom label component.
   { code: '<CustomLabel aria-label="A label" />', options: [{ labelComponents: ['CustomLabel'] }], errors: [expectedError] },
   { code: '<CustomLabel label="A label" />', options: [{ labelAttributes: ['label'], labelComponents: ['CustomLabel'] }], errors: [expectedError] },
+  { code: '<CustomLabel aria-label="A label" />', settings: componentsSettings, errors: [expectedError] },
   // Custom label attributes.
   { code: '<label label="A label" />', options: [{ labelAttributes: ['label'] }], errors: [expectedError] },
   // Custom controlComponents.
   { code: '<label><span><CustomInput /></span></label>', options: [{ controlComponents: ['CustomInput'] }], errors: [expectedError] },
   { code: '<CustomLabel><span><CustomInput /></span></CustomLabel>', options: [{ controlComponents: ['CustomInput'], labelComponents: ['CustomLabel'] }], errors: [expectedError] },
   { code: '<CustomLabel><span><CustomInput /></span></CustomLabel>', options: [{ controlComponents: ['CustomInput'], labelComponents: ['CustomLabel'], labelAttributes: ['label'] }], errors: [expectedError] },
+  { code: '<label><span><CustomInput /></span></label>', settings: componentsSettings, errors: [expectedError] },
+  { code: '<CustomLabel><span><CustomInput /></span></CustomLabel>', settings: componentsSettings, errors: [expectedError] },
 ];
 // htmlFor valid
 ruleTester.run(ruleName, rule, {
diff --git a/__tests__/src/rules/lang-test.js b/__tests__/src/rules/lang-test.js
index 6fbde3996..ef785a8b3 100644
--- a/__tests__/src/rules/lang-test.js
+++ b/__tests__/src/rules/lang-test.js
@@ -22,6 +22,14 @@ const expectedError = {
   type: 'JSXAttribute',
 };
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Foo: 'html',
+    },
+  },
+};
+
 ruleTester.run('lang', rule, {
   valid: [
     { code: '<div />;' },
@@ -35,11 +43,13 @@ ruleTester.run('lang', rule, {
     { code: '<html lang="ja-Latn" />' },
     { code: '<html lang={foo} />' },
     { code: '<HTML lang="foo" />' },
-    { code: '<Foo lang="bar" />' },
+    { code: '<Foo lang={undefined} />' },
+    { code: '<Foo lang="en" />', settings: componentsSettings },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<html lang="foo" />', errors: [expectedError] },
     { code: '<html lang="zz-LL" />', errors: [expectedError] },
     { code: '<html lang={undefined} />', errors: [expectedError] },
+    { code: '<Foo lang={undefined} />', settings: componentsSettings, errors: [expectedError] },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/media-has-caption-test.js b/__tests__/src/rules/media-has-caption-test.js
index 0435f7803..23d56194d 100644
--- a/__tests__/src/rules/media-has-caption-test.js
+++ b/__tests__/src/rules/media-has-caption-test.js
@@ -30,6 +30,16 @@ const customSchema = [
   },
 ];
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Audio: 'audio',
+      Video: 'video',
+      Track: 'track',
+    },
+  },
+};
+
 ruleTester.run('media-has-caption', rule, {
   valid: [
     { code: '<div />;' },
@@ -93,6 +103,46 @@ ruleTester.run('media-has-caption', rule, {
       code: '<Audio muted={true}></Audio>',
       options: customSchema,
     },
+    {
+      code: '<Audio><track kind="captions" /></Audio>',
+      settings: componentsSettings,
+    },
+    {
+      code: '<audio><Track kind="captions" /></audio>',
+      settings: componentsSettings,
+    },
+    {
+      code: '<Video><track kind="captions" /></Video>',
+      settings: componentsSettings,
+    },
+    {
+      code: '<video><Track kind="captions" /></video>',
+      settings: componentsSettings,
+    },
+    {
+      code: '<Audio><Track kind="captions" /></Audio>',
+      settings: componentsSettings,
+    },
+    {
+      code: '<Video><Track kind="captions" /></Video>',
+      settings: componentsSettings,
+    },
+    {
+      code: '<Video muted></Video>',
+      settings: componentsSettings,
+    },
+    {
+      code: '<Video muted={true}></Video>',
+      settings: componentsSettings,
+    },
+    {
+      code: '<Audio muted></Audio>',
+      settings: componentsSettings,
+    },
+    {
+      code: '<Audio muted={true}></Audio>',
+      settings: componentsSettings,
+    },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<audio><track /></audio>', errors: [expectedError] },
@@ -116,11 +166,23 @@ ruleTester.run('media-has-caption', rule, {
       options: customSchema,
       errors: [expectedError],
     },
+    {
+      code: '<Audio muted={false}></Audio>',
+      settings: componentsSettings,
+      errors: [expectedError],
+    },
+    {
+      code: '<Video muted={false}></Video>',
+      settings: componentsSettings,
+      errors: [expectedError],
+    },
     { code: '<video />', errors: [expectedError] },
     { code: '<audio>Foo</audio>', errors: [expectedError] },
     { code: '<video>Foo</video>', errors: [expectedError] },
     { code: '<Audio />', options: customSchema, errors: [expectedError] },
     { code: '<Video />', options: customSchema, errors: [expectedError] },
+    { code: '<Audio />', settings: componentsSettings, errors: [expectedError] },
+    { code: '<Video />', settings: componentsSettings, errors: [expectedError] },
     { code: '<audio><Track /></audio>', options: customSchema, errors: [expectedError] },
     { code: '<video><Track /></video>', options: customSchema, errors: [expectedError] },
     {
@@ -133,5 +195,15 @@ ruleTester.run('media-has-caption', rule, {
       options: customSchema,
       errors: [expectedError],
     },
+    {
+      code: '<Audio><Track kind="subtitles" /></Audio>',
+      settings: componentsSettings,
+      errors: [expectedError],
+    },
+    {
+      code: '<Video><Track kind="subtitles" /></Video>',
+      settings: componentsSettings,
+      errors: [expectedError],
+    },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/no-autofocus-test.js b/__tests__/src/rules/no-autofocus-test.js
index 636bb671e..ce762765f 100644
--- a/__tests__/src/rules/no-autofocus-test.js
+++ b/__tests__/src/rules/no-autofocus-test.js
@@ -28,6 +28,14 @@ const ignoreNonDOMSchema = [
   },
 ];
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Button: 'button',
+    },
+  },
+};
+
 ruleTester.run('no-autofocus', rule, {
   valid: [
     { code: '<div />;' },
@@ -36,6 +44,8 @@ ruleTester.run('no-autofocus', rule, {
     { code: '<Foo bar />' },
     { code: '<Foo autoFocus />', options: ignoreNonDOMSchema },
     { code: '<div><div autofocus /></div>', options: ignoreNonDOMSchema },
+    { code: '<Button />', settings: componentsSettings },
+    { code: '<Button />', options: ignoreNonDOMSchema, settings: componentsSettings },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<div autoFocus />', errors: [expectedError] },
@@ -46,5 +56,12 @@ ruleTester.run('no-autofocus', rule, {
     { code: '<div autoFocus="false" />', errors: [expectedError] },
     { code: '<input autoFocus />', errors: [expectedError] },
     { code: '<Foo autoFocus />', errors: [expectedError] },
+    { code: '<Button autoFocus />', errors: [expectedError], settings: componentsSettings },
+    {
+      code: '<Button autoFocus />',
+      errors: [expectedError],
+      options: ignoreNonDOMSchema,
+      settings: componentsSettings,
+    },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/no-distracting-elements-test.js b/__tests__/src/rules/no-distracting-elements-test.js
index 8cc484ebf..5e77ae03c 100644
--- a/__tests__/src/rules/no-distracting-elements-test.js
+++ b/__tests__/src/rules/no-distracting-elements-test.js
@@ -22,6 +22,14 @@ const expectedError = (element) => ({
   type: 'JSXOpeningElement',
 });
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Blink: 'blink',
+    },
+  },
+};
+
 ruleTester.run('no-marquee', rule, {
   valid: [
     { code: '<div />;' },
@@ -37,5 +45,6 @@ ruleTester.run('no-marquee', rule, {
     { code: '<blink />', errors: [expectedError('blink')] },
     { code: '<blink {...props} />', errors: [expectedError('blink')] },
     { code: '<blink foo={undefined} />', errors: [expectedError('blink')] },
+    { code: '<Blink />', settings: componentsSettings, errors: [expectedError('blink')] },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/no-interactive-element-to-noninteractive-role-test.js b/__tests__/src/rules/no-interactive-element-to-noninteractive-role-test.js
index e925476b7..393987b02 100644
--- a/__tests__/src/rules/no-interactive-element-to-noninteractive-role-test.js
+++ b/__tests__/src/rules/no-interactive-element-to-noninteractive-role-test.js
@@ -28,6 +28,15 @@ const expectedError = {
 
 const ruleName = 'jsx-a11y/no-interactive-element-to-noninteractive-role';
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Button: 'button',
+      Link: 'a',
+    },
+  },
+};
+
 const alwaysValid = [
   { code: '<TestComponent onClick={doFoo} />' },
   { code: '<Button onClick={doFoo} />' },
@@ -289,6 +298,9 @@ const alwaysValid = [
   /* Namespaced roles are not checked */
   { code: '<div mynamespace:role="term" />' },
   { code: '<input mynamespace:role="img" />' },
+  { code: '<Link href="http://x.y.z" role="img" />' },
+  { code: '<Link href="http://x.y.z" />', settings: componentsSettings },
+  { code: '<Button onClick={doFoo} />', settings: componentsSettings },
 ];
 
 const neverValid = [
@@ -360,6 +372,8 @@ const neverValid = [
   { code: '<summary role="listitem" />;', errors: [expectedError] },
   { code: '<textarea className="foo" role="listitem" />', errors: [expectedError] },
   { code: '<tr role="listitem" />;', errors: [expectedError] },
+  /* Custom elements */
+  { code: '<Link href="http://x.y.z" role="img" />', errors: [expectedError], settings: componentsSettings },
 ];
 
 const recommendedOptions = (configs.recommended.rules[ruleName][1] || {});
diff --git a/__tests__/src/rules/no-noninteractive-element-interactions-test.js b/__tests__/src/rules/no-noninteractive-element-interactions-test.js
index dc949d22d..84b6caa2a 100644
--- a/__tests__/src/rules/no-noninteractive-element-interactions-test.js
+++ b/__tests__/src/rules/no-noninteractive-element-interactions-test.js
@@ -31,6 +31,11 @@ const ruleName = 'no-noninteractive-element-interactions';
 const alwaysValid = [
   { code: '<TestComponent onClick={doFoo} />' },
   { code: '<Button onClick={doFoo} />' },
+  { code: '<Image onClick={() => void 0} />;' },
+  {
+    code: '<Button onClick={() => void 0} />;',
+    settings: { 'jsx-a11y': { components: { Button: 'button' } } },
+  },
   /* All flavors of input */
   { code: '<input onClick={() => void 0} />' },
   { code: '<input type="button" onClick={() => void 0} />' },
@@ -355,6 +360,12 @@ const neverValid = [
   { code: '<div role="article" onError={() => {}} />;', errors: [expectedError] },
   { code: '<div role="article" onMouseDown={() => {}} />;', errors: [expectedError] },
   { code: '<div role="article" onMouseUp={() => {}} />;', errors: [expectedError] },
+  // Custom component
+  {
+    code: '<Image onClick={() => void 0} />;',
+    errors: [expectedError],
+    settings: { 'jsx-a11y': { components: { Image: 'img' } } },
+  },
 ];
 
 const recommendedOptions = configs.recommended.rules[`jsx-a11y/${ruleName}`][1] || {};
diff --git a/__tests__/src/rules/no-noninteractive-element-to-interactive-role-test.js b/__tests__/src/rules/no-noninteractive-element-to-interactive-role-test.js
index 22d306dde..ce4c7f0ef 100644
--- a/__tests__/src/rules/no-noninteractive-element-to-interactive-role-test.js
+++ b/__tests__/src/rules/no-noninteractive-element-to-interactive-role-test.js
@@ -30,6 +30,15 @@ const expectedError = {
 
 const ruleName = 'jsx-a11y/no-noninteractive-element-to-interactive-role';
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Article: 'article',
+      Input: 'input',
+    },
+  },
+};
+
 const alwaysValid = [
   { code: '<TestComponent onClick={doFoo} />' },
   { code: '<Button onClick={doFoo} />' },
@@ -340,6 +349,9 @@ const alwaysValid = [
   { code: '<div role="timer" />;' },
   { code: '<div role="tooltip" />;' },
   { code: '<ul role="list" />;' },
+  /* Custom components */
+  { code: '<Article role="button" />' },
+  { code: '<Input role="button" />', settings: componentsSettings },
 ];
 
 const neverValid = [
@@ -424,6 +436,8 @@ const neverValid = [
   { code: '<td role="menuitem" />;', errors: [expectedError] },
   { code: '<tfoot role="menuitem" />;', errors: [expectedError] },
   { code: '<thead role="menuitem" />;', errors: [expectedError] },
+  /* Custom components */
+  { code: '<Article role="button" />', errors: [expectedError], settings: componentsSettings },
 ];
 
 const recommendedOptions = (configs.recommended.rules[ruleName][1] || {});
diff --git a/__tests__/src/rules/no-noninteractive-tabindex-test.js b/__tests__/src/rules/no-noninteractive-tabindex-test.js
index 779825d52..f5c4f25bd 100644
--- a/__tests__/src/rules/no-noninteractive-tabindex-test.js
+++ b/__tests__/src/rules/no-noninteractive-tabindex-test.js
@@ -26,6 +26,15 @@ const expectedError = {
   type: 'JSXAttribute',
 };
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Article: 'article',
+      MyButton: 'button',
+    },
+  },
+};
+
 const alwaysValid = [
   { code: '<MyButton tabIndex={0} />' },
   { code: '<button />' },
@@ -36,6 +45,8 @@ const alwaysValid = [
   { code: '<div role="button" tabIndex="0" />' },
   { code: '<div role="article" tabIndex="-1" />' },
   { code: '<article tabIndex="-1" />' },
+  { code: '<Article tabIndex="-1" />', settings: componentsSettings },
+  { code: '<MyButton tabIndex={0} />', settings: componentsSettings },
 ];
 
 const neverValid = [
@@ -43,6 +54,7 @@ const neverValid = [
   { code: '<div role="article" tabIndex="0" />', errors: [expectedError] },
   { code: '<article tabIndex="0" />', errors: [expectedError] },
   { code: '<article tabIndex={0} />', errors: [expectedError] },
+  { code: '<Article tabIndex={0} />', errors: [expectedError], settings: componentsSettings },
 ];
 
 const recommendedOptions = (
diff --git a/__tests__/src/rules/no-onchange-test.js b/__tests__/src/rules/no-onchange-test.js
index 1f4129547..a29170b81 100644
--- a/__tests__/src/rules/no-onchange-test.js
+++ b/__tests__/src/rules/no-onchange-test.js
@@ -22,6 +22,15 @@ const expectedError = {
   type: 'JSXOpeningElement',
 };
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      CustomOption: 'option',
+      Input: 'input',
+    },
+  },
+};
+
 ruleTester.run('no-onchange', rule, {
   valid: [
     { code: '<select onBlur={() => {}} />;' },
@@ -34,11 +43,14 @@ ruleTester.run('no-onchange', rule, {
     { code: '<input />;' },
     { code: '<input onChange={() => {}} onChange={() => {}} />;' },
     { code: '<input {...props} />' },
+    { code: '<Input onChange={() => {}} />;', settings: componentsSettings },
+    { code: '<CustomOption onChange={() => {}} />' },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<select onChange={() => {}} />;', errors: [expectedError] },
     { code: '<select onChange={handleOnChange} />;', errors: [expectedError] },
     { code: '<option onChange={() => {}} />', errors: [expectedError] },
     { code: '<option onChange={() => {}} {...props} />', errors: [expectedError] },
+    { code: '<CustomOption onChange={() => {}} />;', errors: [expectedError], settings: componentsSettings },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/no-redundant-roles-test.js b/__tests__/src/rules/no-redundant-roles-test.js
index 31f229e3d..27e5f9c9d 100644
--- a/__tests__/src/rules/no-redundant-roles-test.js
+++ b/__tests__/src/rules/no-redundant-roles-test.js
@@ -26,16 +26,26 @@ const expectedError = (element, implicitRole) => ({
 
 const ruleName = 'jsx-a11y/no-redundant-roles';
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Button: 'button',
+    },
+  },
+};
+
 const alwaysValid = [
   { code: '<div />;' },
   { code: '<button role="main" />' },
   { code: '<MyComponent role="button" />' },
   { code: '<button role={`${foo}button`} />' },
+  { code: '<Button role={`${foo}button`} />', settings: componentsSettings },
 ];
 
 const neverValid = [
   { code: '<button role="button" />', errors: [expectedError('button', 'button')] },
   { code: '<body role="DOCUMENT" />', errors: [expectedError('body', 'document')] },
+  { code: '<Button role="button" />', settings: componentsSettings, errors: [expectedError('button', 'button')] },
 ];
 
 ruleTester.run(`${ruleName}:recommended`, rule, {
diff --git a/__tests__/src/rules/no-static-element-interactions-test.js b/__tests__/src/rules/no-static-element-interactions-test.js
index 286228f03..214e3903c 100644
--- a/__tests__/src/rules/no-static-element-interactions-test.js
+++ b/__tests__/src/rules/no-static-element-interactions-test.js
@@ -28,9 +28,19 @@ const expectedError = {
 
 const ruleName = 'no-static-element-interactions';
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Button: 'button',
+      TestComponent: 'div',
+    },
+  },
+};
+
 const alwaysValid = [
   { code: '<TestComponent onClick={doFoo} />' },
   { code: '<Button onClick={doFoo} />' },
+  { code: '<Button onClick={doFoo} />', settings: componentsSettings },
   { code: '<div />;' },
   { code: '<div className="foo" />;' },
   { code: '<div className="foo" {...props} />;' },
@@ -344,6 +354,8 @@ const neverValid = [
   { code: '<div onClick={() => {}} />;', errors: [expectedError] },
   { code: '<div onMouseDown={() => {}} />;', errors: [expectedError] },
   { code: '<div onMouseUp={() => {}} />;', errors: [expectedError] },
+  // Custom components
+  { code: '<TestComponent onClick={doFoo} />', settings: componentsSettings, errors: [expectedError] },
 ];
 
 const recommendedOptions = configs.recommended.rules[`jsx-a11y/${ruleName}`][1] || {};
diff --git a/__tests__/src/rules/role-has-required-aria-props-test.js b/__tests__/src/rules/role-has-required-aria-props-test.js
index 6bdaa9181..360b76e9e 100644
--- a/__tests__/src/rules/role-has-required-aria-props-test.js
+++ b/__tests__/src/rules/role-has-required-aria-props-test.js
@@ -28,6 +28,14 @@ const errorMessage = (role) => {
   };
 };
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      MyComponent: 'div',
+    },
+  },
+};
+
 // Create basic test cases using all valid role types.
 const basicValidityTests = [...roles.keys()].map((role) => {
   const {
@@ -55,6 +63,7 @@ ruleTester.run('role-has-required-aria-props', rule, {
     { code: '<span role="checkbox" aria-checked="false" aria-labelledby="foo" tabindex="0"></span>' },
     { code: '<input role="checkbox" aria-checked="false" aria-labelledby="foo" tabindex="0" {...props} type="checkbox" />' },
     { code: '<input type="checkbox" role="switch" />' },
+    { code: '<MyComponent role="checkbox" aria-checked="false" aria-labelledby="foo" tabindex="0" />', settings: componentsSettings },
   ].concat(basicValidityTests).map(parserOptionsMapper),
 
   invalid: [
@@ -115,5 +124,7 @@ ruleTester.run('role-has-required-aria-props', rule, {
       code: '<div role="option" />',
       errors: [errorMessage('option')],
     },
+    // Custom element
+    { code: '<MyComponent role="combobox" />', settings: componentsSettings, errors: [errorMessage('combobox')] },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/role-supports-aria-props-test.js b/__tests__/src/rules/role-supports-aria-props-test.js
index 05f4e8d7f..8593ab641 100644
--- a/__tests__/src/rules/role-supports-aria-props-test.js
+++ b/__tests__/src/rules/role-supports-aria-props-test.js
@@ -35,6 +35,14 @@ const errorMessage = (attr, role, tag, isImplicit) => ({
   type: 'JSXOpeningElement',
 });
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Link: 'a',
+    },
+  },
+};
+
 const nonAbstractRoles = [...roles.keys()].filter((role) => roles.get(role).abstract === false);
 
 const createTests = (rolesNames) => rolesNames.reduce((tests, role) => {
@@ -71,6 +79,7 @@ ruleTester.run('role-supports-aria-props', rule, {
     { code: '<div role />' },
     { code: '<div role="presentation" {...props} />' },
     { code: '<Foo.Bar baz={true} />' },
+    { code: '<Link href="#" aria-checked />' },
 
     // IMPLICIT ROLE TESTS
     // A TESTS - implicit role is `link`
@@ -547,5 +556,10 @@ ruleTester.run('role-supports-aria-props', rule, {
       code: '<a href="#" aria-invalid />',
       errors: [errorMessage('aria-invalid', 'link', 'a', true)],
     },
+    {
+      code: '<Link href="#" aria-checked />',
+      errors: [errorMessage('aria-checked', 'link', 'a', true)],
+      settings: componentsSettings,
+    },
   ].concat(invalidTests).map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/scope-test.js b/__tests__/src/rules/scope-test.js
index 4704f96a0..421118dc2 100644
--- a/__tests__/src/rules/scope-test.js
+++ b/__tests__/src/rules/scope-test.js
@@ -22,6 +22,15 @@ const expectedError = {
   type: 'JSXAttribute',
 };
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Foo: 'div',
+      TableHeader: 'th',
+    },
+  },
+};
+
 ruleTester.run('scope', rule, {
   valid: [
     { code: '<div />;' },
@@ -31,8 +40,10 @@ ruleTester.run('scope', rule, {
     { code: '<th scope={foo} />' },
     { code: '<th scope={"col"} {...props} />' },
     { code: '<Foo scope="bar" {...props} />' },
+    { code: '<TableHeader scope="row" />', settings: componentsSettings },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<div scope />', errors: [expectedError] },
+    { code: '<Foo scope="bar" />', settings: componentsSettings, errors: [expectedError] },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/util/getElementType-test.js b/__tests__/src/util/getElementType-test.js
new file mode 100644
index 000000000..5b5bd49c4
--- /dev/null
+++ b/__tests__/src/util/getElementType-test.js
@@ -0,0 +1,45 @@
+import expect from 'expect';
+import getElementType from '../../../src/util/getElementType';
+import JSXElementMock from '../../../__mocks__/JSXElementMock';
+
+describe('getElementType', () => {
+  describe('no settings in context', () => {
+    const elementType = getElementType({ settings: {} });
+
+    it('should return the exact tag name for a DOM element', () => {
+      expect(elementType(JSXElementMock('input').openingElement)).toBe('input');
+    });
+
+    it('should return the exact tag name for a custom element', () => {
+      expect(elementType(JSXElementMock('CustomInput').openingElement)).toBe('CustomInput');
+    });
+
+    it('should return the exact tag name for names that are in Object.prototype', () => {
+      expect(elementType(JSXElementMock('toString').openingElement)).toBe('toString');
+    });
+  });
+
+  describe('components settings in context', () => {
+    const elementType = getElementType({
+      settings: {
+        'jsx-a11y': {
+          components: {
+            CustomInput: 'input',
+          },
+        },
+      },
+    });
+
+    it('should return the exact tag name for a DOM element', () => {
+      expect(elementType(JSXElementMock('input').openingElement)).toBe('input');
+    });
+
+    it('should return the mapped tag name for a custom element', () => {
+      expect(elementType(JSXElementMock('CustomInput').openingElement)).toBe('input');
+    });
+
+    it('should return the exact tag name for a custom element not in the components map', () => {
+      expect(elementType(JSXElementMock('CityInput').openingElement)).toBe('CityInput');
+    });
+  });
+});
diff --git a/__tests__/src/util/hasAccessibleChild-test.js b/__tests__/src/util/hasAccessibleChild-test.js
index 8f8e607ce..5309ae9c5 100644
--- a/__tests__/src/util/hasAccessibleChild-test.js
+++ b/__tests__/src/util/hasAccessibleChild-test.js
@@ -1,4 +1,5 @@
 import expect from 'expect';
+import { elementType } from 'jsx-ast-utils';
 import hasAccessibleChild from '../../../src/util/hasAccessibleChild';
 import JSXElementMock from '../../../__mocks__/JSXElementMock';
 import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
@@ -7,7 +8,7 @@ import JSXExpressionContainerMock from '../../../__mocks__/JSXExpressionContaine
 describe('hasAccessibleChild', () => {
   describe('has no children and does not set dangerouslySetInnerHTML', () => {
     it('returns false', () => {
-      expect(hasAccessibleChild(JSXElementMock('div', []))).toBe(false);
+      expect(hasAccessibleChild(JSXElementMock('div', []), elementType)).toBe(false);
     });
   });
 
@@ -15,7 +16,7 @@ describe('hasAccessibleChild', () => {
     it('Returns true', () => {
       const prop = JSXAttributeMock('dangerouslySetInnerHTML', true);
       const element = JSXElementMock('div', [prop], []);
-      expect(hasAccessibleChild(element)).toBe(true);
+      expect(hasAccessibleChild(element, elementType)).toBe(true);
     });
   });
 
@@ -26,13 +27,13 @@ describe('hasAccessibleChild', () => {
         value: 'foo',
       };
       const element = JSXElementMock('div', [], [child]);
-      expect(hasAccessibleChild(element)).toBe(true);
+      expect(hasAccessibleChild(element, elementType)).toBe(true);
     });
 
     it('Returns true for visible child JSXElement', () => {
       const child = JSXElementMock('div', []);
       const element = JSXElementMock('div', [], [child]);
-      expect(hasAccessibleChild(element)).toBe(true);
+      expect(hasAccessibleChild(element, elementType)).toBe(true);
     });
 
     it('Returns true for JSXText Element', () => {
@@ -41,14 +42,14 @@ describe('hasAccessibleChild', () => {
         value: 'foo',
       };
       const element = JSXElementMock('div', [], [child]);
-      expect(hasAccessibleChild(element)).toBe(true);
+      expect(hasAccessibleChild(element, elementType)).toBe(true);
     });
 
     it('Returns false for hidden child JSXElement', () => {
       const ariaHiddenAttr = JSXAttributeMock('aria-hidden', true);
       const child = JSXElementMock('div', [ariaHiddenAttr]);
       const element = JSXElementMock('div', [], [child]);
-      expect(hasAccessibleChild(element)).toBe(false);
+      expect(hasAccessibleChild(element, elementType)).toBe(false);
     });
 
     it('Returns true for defined JSXExpressionContainer', () => {
@@ -58,7 +59,7 @@ describe('hasAccessibleChild', () => {
       };
       const child = JSXExpressionContainerMock(expression);
       const element = JSXElementMock('div', [], [child]);
-      expect(hasAccessibleChild(element)).toBe(true);
+      expect(hasAccessibleChild(element, elementType)).toBe(true);
     });
 
     it('Returns false for undefined JSXExpressionContainer', () => {
@@ -68,7 +69,7 @@ describe('hasAccessibleChild', () => {
       };
       const child = JSXExpressionContainerMock(expression);
       const element = JSXElementMock('div', [], [child]);
-      expect(hasAccessibleChild(element)).toBe(false);
+      expect(hasAccessibleChild(element, elementType)).toBe(false);
     });
 
     it('Returns false for unknown child type', () => {
@@ -76,13 +77,31 @@ describe('hasAccessibleChild', () => {
         type: 'Unknown',
       };
       const element = JSXElementMock('div', [], [child]);
-      expect(hasAccessibleChild(element)).toBe(false);
+      expect(hasAccessibleChild(element, elementType)).toBe(false);
     });
 
     it('Returns true with children passed as a prop', () => {
       const children = JSXAttributeMock('children', true);
       const element = JSXElementMock('div', [children], []);
-      expect(hasAccessibleChild(element)).toBe(true);
+      expect(hasAccessibleChild(element, elementType)).toBe(true);
+    });
+
+    it('Returns false for hidden child input JSXElement', () => {
+      const child = JSXElementMock('input', [JSXAttributeMock('type', 'hidden')]);
+      const element = JSXElementMock('div', [], [child]);
+      expect(hasAccessibleChild(element, elementType)).toBe(false);
+    });
+
+    it('Returns true for a custom JSXElement even if type hidden', () => {
+      const child = JSXElementMock('CustomInput', [JSXAttributeMock('type', 'hidden')]);
+      const element = JSXElementMock('div', [], [child]);
+      expect(hasAccessibleChild(element, elementType)).toBe(true);
+    });
+
+    it('Returns false for a custom JSXElement mapped to input if type is hidden', () => {
+      const child = JSXElementMock('CustomInput', [JSXAttributeMock('type', 'hidden')]);
+      const element = JSXElementMock('div', [], [child]);
+      expect(hasAccessibleChild(element, () => 'input')).toBe(false);
     });
   });
 });
diff --git a/__tests__/src/util/mayContainChildComponent-test.js b/__tests__/src/util/mayContainChildComponent-test.js
index b647b3415..0bea7c8ad 100644
--- a/__tests__/src/util/mayContainChildComponent-test.js
+++ b/__tests__/src/util/mayContainChildComponent-test.js
@@ -152,4 +152,27 @@ describe('mayContainChildComponent', () => {
       });
     });
   });
+
+  describe('using a custom elementType function', () => {
+    it('should return true when the custom elementType returns the proper name', () => {
+      expect(mayContainChildComponent(
+        JSXElementMock('div', [], [
+          JSXElementMock('CustomInput'),
+        ]),
+        'input',
+        2,
+        () => 'input',
+      )).toBe(true);
+    });
+    it('should return false when the custom elementType returns a wrong name', () => {
+      expect(mayContainChildComponent(
+        JSXElementMock('div', [], [
+          JSXElementMock('CustomInput'),
+        ]),
+        'input',
+        2,
+        () => 'button',
+      )).toBe(false);
+    });
+  });
 });
diff --git a/flow/eslint.js b/flow/eslint.js
index ff3df7ed3..02b3ff601 100644
--- a/flow/eslint.js
+++ b/flow/eslint.js
@@ -6,9 +6,17 @@ export type ESLintReport = {
   message: string,
 };
 
+export type ESLintSettings = {
+  [string]: mixed,
+  'jsx-a11y'?: {
+    components: {[string]: string},
+  },
+}
+
 export type ESLintContext = {
   options: Array<Object>,
   report: (ESLintReport) => void,
+  settings: ESLintSettings,
 };
 
 export type ESLintConfig = {
diff --git a/src/rules/accessible-emoji.js b/src/rules/accessible-emoji.js
index 3488c47dc..788dabbf8 100644
--- a/src/rules/accessible-emoji.js
+++ b/src/rules/accessible-emoji.js
@@ -8,8 +8,9 @@
 // ----------------------------------------------------------------------------
 
 import emojiRegex from 'emoji-regex';
-import { getProp, getLiteralPropValue, elementType } from 'jsx-ast-utils';
+import { getProp, getLiteralPropValue } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 
 const errorMessage = 'Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby.';
@@ -25,29 +26,32 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      const literalChildValue = node.parent.children.find((child) => child.type === 'Literal' || child.type === 'JSXText');
-
-      if (literalChildValue && emojiRegex().test(literalChildValue.value)) {
-        const elementIsHidden = isHiddenFromScreenReader(elementType(node), node.attributes);
-        if (elementIsHidden) {
-          return; // emoji is decorative
-        }
-
-        const rolePropValue = getLiteralPropValue(getProp(node.attributes, 'role'));
-        const ariaLabelProp = getProp(node.attributes, 'aria-label');
-        const arialLabelledByProp = getProp(node.attributes, 'aria-labelledby');
-        const hasLabel = ariaLabelProp !== undefined || arialLabelledByProp !== undefined;
-        const isSpan = elementType(node) === 'span';
-
-        if (hasLabel === false || rolePropValue !== 'img' || isSpan === false) {
-          context.report({
-            node,
-            message: errorMessage,
-          });
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node) => {
+        const literalChildValue = node.parent.children.find((child) => child.type === 'Literal' || child.type === 'JSXText');
+
+        if (literalChildValue && emojiRegex().test(literalChildValue.value)) {
+          const elementIsHidden = isHiddenFromScreenReader(elementType(node), node.attributes);
+          if (elementIsHidden) {
+            return; // emoji is decorative
+          }
+
+          const rolePropValue = getLiteralPropValue(getProp(node.attributes, 'role'));
+          const ariaLabelProp = getProp(node.attributes, 'aria-label');
+          const arialLabelledByProp = getProp(node.attributes, 'aria-labelledby');
+          const hasLabel = ariaLabelProp !== undefined || arialLabelledByProp !== undefined;
+          const isSpan = elementType(node) === 'span';
+
+          if (hasLabel === false || rolePropValue !== 'img' || isSpan === false) {
+            context.report({
+              node,
+              message: errorMessage,
+            });
+          }
         }
-      }
-    },
-  }),
+      },
+    };
+  },
 };
diff --git a/src/rules/alt-text.js b/src/rules/alt-text.js
index 3be17f54f..83c8b5588 100644
--- a/src/rules/alt-text.js
+++ b/src/rules/alt-text.js
@@ -10,10 +10,10 @@
 import {
   getProp,
   getPropValue,
-  elementType,
   getLiteralPropValue,
 } from 'jsx-ast-utils';
 import { generateObjSchema, arraySchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 import hasAccessibleChild from '../util/hasAccessibleChild';
 import isPresentationRole from '../util/isPresentationRole';
 
@@ -44,8 +44,7 @@ const ariaLabelHasValue = (prop) => {
 };
 
 const ruleByElement = {
-  img(context, node) {
-    const nodeType = elementType(node);
+  img(context, node, nodeType) {
     const altProp = getProp(node.attributes, 'alt');
 
     // Missing alt prop error.
@@ -106,14 +105,14 @@ const ruleByElement = {
     });
   },
 
-  object(context, node) {
+  object(context, node, unusedNodeType, elementType) {
     const ariaLabelProp = getProp(node.attributes, 'aria-label');
     const arialLabelledByProp = getProp(node.attributes, 'aria-labelledby');
     const hasLabel = ariaLabelHasValue(ariaLabelProp) || ariaLabelHasValue(arialLabelledByProp);
     const titleProp = getLiteralPropValue(getProp(node.attributes, 'title'));
     const hasTitleAttr = !!titleProp;
 
-    if (hasLabel || hasTitleAttr || hasAccessibleChild(node.parent)) {
+    if (hasLabel || hasTitleAttr || hasAccessibleChild(node.parent, elementType)) {
       return;
     }
 
@@ -154,9 +153,8 @@ const ruleByElement = {
     });
   },
 
-  'input[type="image"]': function inputImage(context, node) {
+  'input[type="image"]': function inputImage(context, node, nodeType) {
     // Only test input[type="image"]
-    const nodeType = elementType(node);
     if (nodeType === 'input') {
       const typePropValue = getPropValue(getProp(node.attributes, 'type'));
       if (typePropValue !== 'image') { return; }
@@ -218,6 +216,7 @@ export default {
         elementOptions,
       ).map((type) => (type === 'input[type="image"]' ? 'input' : type)),
     );
+    const elementType = getElementType(context);
 
     return {
       JSXOpeningElement(node) {
@@ -237,7 +236,7 @@ export default {
           });
         }
 
-        ruleByElement[DOMElement](context, node);
+        ruleByElement[DOMElement](context, node, nodeType, elementType);
       },
     };
   },
diff --git a/src/rules/anchor-has-content.js b/src/rules/anchor-has-content.js
index bb4bc3398..fb9386fb3 100644
--- a/src/rules/anchor-has-content.js
+++ b/src/rules/anchor-has-content.js
@@ -7,7 +7,7 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { elementType } from 'jsx-ast-utils';
+import getElementType from '../util/getElementType';
 import { arraySchema, generateObjSchema } from '../util/schemas';
 import hasAccessibleChild from '../util/hasAccessibleChild';
 
@@ -24,25 +24,28 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      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.
-      if (typeCheck.indexOf(nodeType) === -1) {
-        return;
-      }
-      if (hasAccessibleChild(node.parent)) {
-        return;
-      }
-
-      context.report({
-        node,
-        message: errorMessage,
-      });
-    },
-  }),
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node) => {
+        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.
+        if (typeCheck.indexOf(nodeType) === -1) {
+          return;
+        }
+        if (hasAccessibleChild(node.parent, elementType)) {
+          return;
+        }
+
+        context.report({
+          node,
+          message: errorMessage,
+        });
+      },
+    };
+  },
 };
diff --git a/src/rules/anchor-is-valid.js b/src/rules/anchor-is-valid.js
index 28871b3a6..4e3520628 100644
--- a/src/rules/anchor-is-valid.js
+++ b/src/rules/anchor-is-valid.js
@@ -8,10 +8,11 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { elementType, getProp, getPropValue } from 'jsx-ast-utils';
+import { getProp, getPropValue } from 'jsx-ast-utils';
 import type { JSXOpeningElement } from 'ast-types-flow';
 import type { ESLintConfig, ESLintContext, ESLintVisitorSelectorConfig } from '../../flow/eslint';
 import { generateObjSchema, arraySchema, enumArraySchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 
 const allAspects = ['noHref', 'invalidHref', 'preferButton'];
 
@@ -36,84 +37,87 @@ export default ({
     schema: [schema],
   },
 
-  create: (context: ESLintContext): ESLintVisitorSelectorConfig => ({
-    JSXOpeningElement: (node: JSXOpeningElement): void => {
-      const { attributes } = node;
-      const options = context.options[0] || {};
-      const componentOptions = options.components || [];
-      const typeCheck = ['a'].concat(componentOptions);
-      const nodeType = elementType(node);
+  create: (context: ESLintContext): ESLintVisitorSelectorConfig => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node: JSXOpeningElement): void => {
+        const { attributes } = node;
+        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.
-      if (typeCheck.indexOf(nodeType) === -1) {
-        return;
-      }
+        // Only check anchor elements and custom types.
+        if (typeCheck.indexOf(nodeType) === -1) {
+          return;
+        }
 
-      // Set up the rule aspects to check.
-      const aspects = options.aspects || allAspects;
+        // Set up the rule aspects to check.
+        const aspects = options.aspects || allAspects;
 
-      // Create active aspect flag object. Failing checks will only report
-      // if the related flag is set to true.
-      const activeAspects = {};
-      allAspects.forEach((aspect) => {
-        activeAspects[aspect] = aspects.indexOf(aspect) !== -1;
-      });
+        // Create active aspect flag object. Failing checks will only report
+        // if the related flag is set to true.
+        const activeAspects = {};
+        allAspects.forEach((aspect) => {
+          activeAspects[aspect] = aspects.indexOf(aspect) !== -1;
+        });
 
-      const propOptions = options.specialLink || [];
-      const propsToValidate = ['href'].concat(propOptions);
-      const values = propsToValidate
-        .map((prop) => getProp(node.attributes, prop))
-        .map((prop) => getPropValue(prop));
-      // Checks if any actual or custom href prop is provided.
-      const hasAnyHref = values
-        .filter((value) => value === undefined || value === null).length !== values.length;
-      // Need to check for spread operator as props can be spread onto the element
-      // leading to an incorrect validation error.
-      const hasSpreadOperator = attributes
-        .filter((prop) => prop.type === 'JSXSpreadAttribute').length > 0;
-      const onClick = getProp(attributes, 'onClick');
+        const propOptions = options.specialLink || [];
+        const propsToValidate = ['href'].concat(propOptions);
+        const values = propsToValidate
+          .map((prop) => getProp(node.attributes, prop))
+          .map((prop) => getPropValue(prop));
+        // Checks if any actual or custom href prop is provided.
+        const hasAnyHref = values
+          .filter((value) => value === undefined || value === null).length !== values.length;
+        // Need to check for spread operator as props can be spread onto the element
+        // leading to an incorrect validation error.
+        const hasSpreadOperator = attributes
+          .filter((prop) => prop.type === 'JSXSpreadAttribute').length > 0;
+        const onClick = getProp(attributes, 'onClick');
 
-      // When there is no href at all, specific scenarios apply:
-      if (!hasAnyHref) {
-        // If no spread operator is found and no onClick event is present
-        // it is a link without href.
-        if (!hasSpreadOperator && activeAspects.noHref
-          && (!onClick || (onClick && !activeAspects.preferButton))) {
-          context.report({
-            node,
-            message: noHrefErrorMessage,
-          });
-        }
-        // If no spread operator is found but an onClick is preset it should be a button.
-        if (!hasSpreadOperator && onClick && activeAspects.preferButton) {
-          context.report({
-            node,
-            message: preferButtonErrorMessage,
-          });
+        // When there is no href at all, specific scenarios apply:
+        if (!hasAnyHref) {
+          // If no spread operator is found and no onClick event is present
+          // it is a link without href.
+          if (!hasSpreadOperator && activeAspects.noHref
+            && (!onClick || (onClick && !activeAspects.preferButton))) {
+            context.report({
+              node,
+              message: noHrefErrorMessage,
+            });
+          }
+          // If no spread operator is found but an onClick is preset it should be a button.
+          if (!hasSpreadOperator && onClick && activeAspects.preferButton) {
+            context.report({
+              node,
+              message: preferButtonErrorMessage,
+            });
+          }
+          return;
         }
-        return;
-      }
 
-      // Hrefs have been found, now check for validity.
-      const invalidHrefValues = values
-        .filter((value) => value !== undefined && value !== null)
-        .filter((value) => (typeof value === 'string' && (
-          !value.length || value === '#' || /^\W*?javascript:/.test(value)
-        )));
-      if (invalidHrefValues.length !== 0) {
-        // If an onClick is found it should be a button, otherwise it is an invalid link.
-        if (onClick && activeAspects.preferButton) {
-          context.report({
-            node,
-            message: preferButtonErrorMessage,
-          });
-        } else if (activeAspects.invalidHref) {
-          context.report({
-            node,
-            message: invalidHrefErrorMessage,
-          });
+        // Hrefs have been found, now check for validity.
+        const invalidHrefValues = values
+          .filter((value) => value !== undefined && value !== null)
+          .filter((value) => (typeof value === 'string' && (
+            !value.length || value === '#' || /^\W*?javascript:/.test(value)
+          )));
+        if (invalidHrefValues.length !== 0) {
+          // If an onClick is found it should be a button, otherwise it is an invalid link.
+          if (onClick && activeAspects.preferButton) {
+            context.report({
+              node,
+              message: preferButtonErrorMessage,
+            });
+          } else if (activeAspects.invalidHref) {
+            context.report({
+              node,
+              message: invalidHrefErrorMessage,
+            });
+          }
         }
-      }
-    },
-  }),
+      },
+    };
+  },
 }: ESLintConfig);
diff --git a/src/rules/aria-activedescendant-has-tabindex.js b/src/rules/aria-activedescendant-has-tabindex.js
index 21a9b5518..0f229e2fb 100644
--- a/src/rules/aria-activedescendant-has-tabindex.js
+++ b/src/rules/aria-activedescendant-has-tabindex.js
@@ -4,8 +4,9 @@
  */
 
 import { dom } from 'aria-query';
-import { getProp, elementType } from 'jsx-ast-utils';
+import { getProp } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 import getTabIndex from '../util/getTabIndex';
 import isInteractiveElement from '../util/isInteractiveElement';
 
@@ -28,40 +29,43 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      const { attributes } = node;
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node) => {
+        const { attributes } = node;
 
-      if (getProp(attributes, 'aria-activedescendant') === undefined) {
-        return;
-      }
+        if (getProp(attributes, 'aria-activedescendant') === undefined) {
+          return;
+        }
 
-      const type = elementType(node);
-      // Do not test higher level JSX components, as we do not know what
-      // low-level DOM element this maps to.
-      if (domElements.indexOf(type) === -1) {
-        return;
-      }
-      const tabIndex = getTabIndex(getProp(attributes, 'tabIndex'));
+        const type = elementType(node);
+        // Do not test higher level JSX components, as we do not know what
+        // low-level DOM element this maps to.
+        if (domElements.indexOf(type) === -1) {
+          return;
+        }
+        const tabIndex = getTabIndex(getProp(attributes, 'tabIndex'));
 
-      // If this is an interactive element and the tabindex attribute is not specified,
-      // or the tabIndex property was not mutated, then the tabIndex
-      // property will be undefined.
-      if (
-        isInteractiveElement(type, attributes)
-        && tabIndex === undefined
-      ) {
-        return;
-      }
+        // If this is an interactive element and the tabindex attribute is not specified,
+        // or the tabIndex property was not mutated, then the tabIndex
+        // property will be undefined.
+        if (
+          isInteractiveElement(type, attributes)
+          && tabIndex === undefined
+        ) {
+          return;
+        }
 
-      if (tabIndex >= -1) {
-        return;
-      }
+        if (tabIndex >= -1) {
+          return;
+        }
 
-      context.report({
-        node,
-        message: errorMessage,
-      });
-    },
-  }),
+        context.report({
+          node,
+          message: errorMessage,
+        });
+      },
+    };
+  },
 };
diff --git a/src/rules/aria-role.js b/src/rules/aria-role.js
index 6cec7b88f..847ecda56 100644
--- a/src/rules/aria-role.js
+++ b/src/rules/aria-role.js
@@ -8,7 +8,8 @@
 // ----------------------------------------------------------------------------
 
 import { dom, roles } from 'aria-query';
-import { getLiteralPropValue, propName, elementType } from 'jsx-ast-utils';
+import { getLiteralPropValue, propName } from 'jsx-ast-utils';
+import getElementType from '../util/getElementType';
 import { generateObjSchema } from '../util/schemas';
 
 const errorMessage = 'Elements with ARIA roles must use a valid, non-abstract ARIA role.';
@@ -41,6 +42,7 @@ export default {
     const ignoreNonDOM = !!options.ignoreNonDOM;
     const allowedInvalidRoles = new Set(options.allowedInvalidRoles || []);
     const validRoles = new Set([...roles.keys()].filter((role) => roles.get(role).abstract === false));
+    const elementType = getElementType(context);
 
     return ({
       JSXAttribute: (attribute) => {
diff --git a/src/rules/aria-unsupported-elements.js b/src/rules/aria-unsupported-elements.js
index 787af1248..778a6abd1 100644
--- a/src/rules/aria-unsupported-elements.js
+++ b/src/rules/aria-unsupported-elements.js
@@ -12,8 +12,9 @@ import {
   aria,
   dom,
 } from 'aria-query';
-import { elementType, propName } from 'jsx-ast-utils';
+import { propName } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 
 const errorMessage = (invalidProp) => (
   `This element does not support ARIA roles, states and properties. \
@@ -31,35 +32,38 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      const nodeType = elementType(node);
-      const nodeAttrs = dom.get(nodeType) || {};
-      const {
-        reserved: isReservedNodeType = false,
-      } = nodeAttrs;
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node) => {
+        const nodeType = elementType(node);
+        const nodeAttrs = dom.get(nodeType) || {};
+        const {
+          reserved: isReservedNodeType = false,
+        } = nodeAttrs;
 
-      // If it's not reserved, then it can have aria-* roles, states, and properties
-      if (isReservedNodeType === false) {
-        return;
-      }
-
-      const invalidAttributes = [...aria.keys(), 'role'];
-
-      node.attributes.forEach((prop) => {
-        if (prop.type === 'JSXSpreadAttribute') {
+        // If it's not reserved, then it can have aria-* roles, states, and properties
+        if (isReservedNodeType === false) {
           return;
         }
 
-        const name = propName(prop).toLowerCase();
+        const invalidAttributes = [...aria.keys(), 'role'];
 
-        if (invalidAttributes.indexOf(name) > -1) {
-          context.report({
-            node,
-            message: errorMessage(name),
-          });
-        }
-      });
-    },
-  }),
+        node.attributes.forEach((prop) => {
+          if (prop.type === 'JSXSpreadAttribute') {
+            return;
+          }
+
+          const name = propName(prop).toLowerCase();
+
+          if (invalidAttributes.indexOf(name) > -1) {
+            context.report({
+              node,
+              message: errorMessage(name),
+            });
+          }
+        });
+      },
+    };
+  },
 };
diff --git a/src/rules/autocomplete-valid.js b/src/rules/autocomplete-valid.js
index a5b7c223d..df7b6b840 100644
--- a/src/rules/autocomplete-valid.js
+++ b/src/rules/autocomplete-valid.js
@@ -7,8 +7,9 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 import { runVirtualRule } from 'axe-core';
-import { elementType, getLiteralPropValue, getProp } from 'jsx-ast-utils';
+import { getLiteralPropValue, getProp } from 'jsx-ast-utils';
 import { generateObjSchema, arraySchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 
 const schema = generateObjSchema({
   inputComponents: arraySchema,
@@ -23,37 +24,40 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      const options = context.options[0] || {};
-      const { inputComponents = [] } = options;
-      const inputTypes = ['input'].concat(inputComponents);
-
-      const elType = elementType(node);
-      const autocomplete = getLiteralPropValue(getProp(node.attributes, 'autocomplete'));
-
-      if (typeof autocomplete !== 'string' || !inputTypes.includes(elType)) {
-        return;
-      }
-
-      const type = getLiteralPropValue(getProp(node.attributes, 'type'));
-      const { violations } = runVirtualRule('autocomplete-valid', {
-        nodeName: 'input',
-        attributes: {
-          autocomplete,
-          // Which autocomplete is valid depends on the input type
-          type: type === null ? undefined : type,
-        },
-      });
-
-      if (violations.length === 0) {
-        return;
-      }
-      // Since we only test one rule, with one node, return the message from first (and only) instance of each
-      context.report({
-        node,
-        message: violations[0].nodes[0].all[0].message,
-      });
-    },
-  }),
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node) => {
+        const options = context.options[0] || {};
+        const { inputComponents = [] } = options;
+        const inputTypes = ['input'].concat(inputComponents);
+
+        const elType = elementType(node);
+        const autocomplete = getLiteralPropValue(getProp(node.attributes, 'autocomplete'));
+
+        if (typeof autocomplete !== 'string' || !inputTypes.includes(elType)) {
+          return;
+        }
+
+        const type = getLiteralPropValue(getProp(node.attributes, 'type'));
+        const { violations } = runVirtualRule('autocomplete-valid', {
+          nodeName: 'input',
+          attributes: {
+            autocomplete,
+            // Which autocomplete is valid depends on the input type
+            type: type === null ? undefined : type,
+          },
+        });
+
+        if (violations.length === 0) {
+          return;
+        }
+        // Since we only test one rule, with one node, return the message from first (and only) instance of each
+        context.report({
+          node,
+          message: violations[0].nodes[0].all[0].message,
+        });
+      },
+    };
+  },
 };
diff --git a/src/rules/click-events-have-key-events.js b/src/rules/click-events-have-key-events.js
index cde1b6caa..aa76349de 100644
--- a/src/rules/click-events-have-key-events.js
+++ b/src/rules/click-events-have-key-events.js
@@ -8,9 +8,10 @@
 // ----------------------------------------------------------------------------
 
 import { dom } from 'aria-query';
-import { getProp, hasAnyProp, elementType } from 'jsx-ast-utils';
+import { getProp, hasAnyProp } from 'jsx-ast-utils';
 import includes from 'array-includes';
 import { generateObjSchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 import isInteractiveElement from '../util/isInteractiveElement';
 import isPresentationRole from '../util/isPresentationRole';
@@ -29,39 +30,42 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      const props = node.attributes;
-      if (getProp(props, 'onclick') === undefined) {
-        return;
-      }
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node) => {
+        const props = node.attributes;
+        if (getProp(props, 'onclick') === undefined) {
+          return;
+        }
 
-      const type = elementType(node);
-      const requiredProps = ['onkeydown', 'onkeyup', 'onkeypress'];
+        const type = elementType(node);
+        const requiredProps = ['onkeydown', 'onkeyup', 'onkeypress'];
 
-      if (!includes(domElements, type)) {
-        // Do not test higher level JSX components, as we do not know what
-        // low-level DOM element this maps to.
-        return;
-      }
-      if (
-        isHiddenFromScreenReader(type, props)
-        || isPresentationRole(type, props)
-      ) {
-        return;
-      }
-      if (isInteractiveElement(type, props)) {
-        return;
-      }
-      if (hasAnyProp(props, requiredProps)) {
-        return;
-      }
+        if (!includes(domElements, type)) {
+          // Do not test higher level JSX components, as we do not know what
+          // low-level DOM element this maps to.
+          return;
+        }
+        if (
+          isHiddenFromScreenReader(type, props)
+          || isPresentationRole(type, props)
+        ) {
+          return;
+        }
+        if (isInteractiveElement(type, props)) {
+          return;
+        }
+        if (hasAnyProp(props, requiredProps)) {
+          return;
+        }
 
-      // Visible, non-interactive elements with click handlers require one keyboard event listener.
-      context.report({
-        node,
-        message: errorMessage,
-      });
-    },
-  }),
+        // Visible, non-interactive elements with click handlers require one keyboard event listener.
+        context.report({
+          node,
+          message: errorMessage,
+        });
+      },
+    };
+  },
 };
diff --git a/src/rules/control-has-associated-label.js b/src/rules/control-has-associated-label.js
index f0f74ef88..b97ebe558 100644
--- a/src/rules/control-has-associated-label.js
+++ b/src/rules/control-has-associated-label.js
@@ -9,11 +9,12 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { elementType, getProp, getLiteralPropValue } from 'jsx-ast-utils';
+import { getProp, getLiteralPropValue } from 'jsx-ast-utils';
 import type { JSXElement } from 'ast-types-flow';
 import includes from 'array-includes';
 import { generateObjSchema, arraySchema } from '../util/schemas';
 import type { ESLintConfig, ESLintContext, ESLintVisitorSelectorConfig } from '../../flow/eslint';
+import getElementType from '../util/getElementType';
 import isDOMElement from '../util/isDOMElement';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 import isInteractiveElement from '../util/isInteractiveElement';
@@ -43,6 +44,7 @@ export default ({
   },
 
   create: (context: ESLintContext): ESLintVisitorSelectorConfig => {
+    const elementType = getElementType(context);
     const options = context.options[0] || {};
     const {
       labelAttributes = [],
diff --git a/src/rules/heading-has-content.js b/src/rules/heading-has-content.js
index 426910179..e9ede4e70 100644
--- a/src/rules/heading-has-content.js
+++ b/src/rules/heading-has-content.js
@@ -7,8 +7,8 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { elementType } from 'jsx-ast-utils';
 import { generateObjSchema, arraySchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 import hasAccessibleChild from '../util/hasAccessibleChild';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 
@@ -34,28 +34,31 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      const options = context.options[0] || {};
-      const componentOptions = options.components || [];
-      const typeCheck = headings.concat(componentOptions);
-      const nodeType = elementType(node);
-
-      // Only check 'h*' elements and custom types.
-      if (typeCheck.indexOf(nodeType) === -1) {
-        return;
-      }
-      if (hasAccessibleChild(node.parent)) {
-        return;
-      }
-      if (isHiddenFromScreenReader(nodeType, node.attributes)) {
-        return;
-      }
-
-      context.report({
-        node,
-        message: errorMessage,
-      });
-    },
-  }),
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node) => {
+        const options = context.options[0] || {};
+        const componentOptions = options.components || [];
+        const typeCheck = headings.concat(componentOptions);
+        const nodeType = elementType(node);
+
+        // Only check 'h*' elements and custom types.
+        if (typeCheck.indexOf(nodeType) === -1) {
+          return;
+        }
+        if (hasAccessibleChild(node.parent, elementType)) {
+          return;
+        }
+        if (isHiddenFromScreenReader(nodeType, node.attributes)) {
+          return;
+        }
+
+        context.report({
+          node,
+          message: errorMessage,
+        });
+      },
+    };
+  },
 };
diff --git a/src/rules/html-has-lang.js b/src/rules/html-has-lang.js
index d106c72f2..7cf768823 100644
--- a/src/rules/html-has-lang.js
+++ b/src/rules/html-has-lang.js
@@ -7,8 +7,9 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { elementType, getProp, getPropValue } from 'jsx-ast-utils';
+import { getProp, getPropValue } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 
 const errorMessage = '<html> elements must have the lang prop.';
 
@@ -23,24 +24,27 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      const type = elementType(node);
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node) => {
+        const type = elementType(node);
 
-      if (type && type !== 'html') {
-        return;
-      }
+        if (type && type !== 'html') {
+          return;
+        }
 
-      const lang = getPropValue(getProp(node.attributes, 'lang'));
+        const lang = getPropValue(getProp(node.attributes, 'lang'));
 
-      if (lang) {
-        return;
-      }
+        if (lang) {
+          return;
+        }
 
-      context.report({
-        node,
-        message: errorMessage,
-      });
-    },
-  }),
+        context.report({
+          node,
+          message: errorMessage,
+        });
+      },
+    };
+  },
 };
diff --git a/src/rules/iframe-has-title.js b/src/rules/iframe-has-title.js
index ecde98c65..272f89ed9 100644
--- a/src/rules/iframe-has-title.js
+++ b/src/rules/iframe-has-title.js
@@ -7,7 +7,8 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { elementType, getProp, getPropValue } from 'jsx-ast-utils';
+import { getProp, getPropValue } from 'jsx-ast-utils';
+import getElementType from '../util/getElementType';
 import { generateObjSchema } from '../util/schemas';
 
 const errorMessage = '<iframe> elements must have a unique title property.';
@@ -23,24 +24,27 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      const type = elementType(node);
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node) => {
+        const type = elementType(node);
 
-      if (type && type !== 'iframe') {
-        return;
-      }
+        if (type && type !== 'iframe') {
+          return;
+        }
 
-      const title = getPropValue(getProp(node.attributes, 'title'));
+        const title = getPropValue(getProp(node.attributes, 'title'));
 
-      if (title && typeof title === 'string') {
-        return;
-      }
+        if (title && typeof title === 'string') {
+          return;
+        }
 
-      context.report({
-        node,
-        message: errorMessage,
-      });
-    },
-  }),
+        context.report({
+          node,
+          message: errorMessage,
+        });
+      },
+    };
+  },
 };
diff --git a/src/rules/img-redundant-alt.js b/src/rules/img-redundant-alt.js
index d034458fd..6e2ba640e 100644
--- a/src/rules/img-redundant-alt.js
+++ b/src/rules/img-redundant-alt.js
@@ -7,8 +7,9 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { getProp, getLiteralPropValue, elementType } from 'jsx-ast-utils';
+import { getProp, getLiteralPropValue } from 'jsx-ast-utils';
 import { generateObjSchema, arraySchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 
 const REDUNDANT_WORDS = [
@@ -33,42 +34,45 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      const options = context.options[0] || {};
-      const componentOptions = options.components || [];
-      const typesToValidate = ['img'].concat(componentOptions);
-      const nodeType = elementType(node);
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node) => {
+        const options = context.options[0] || {};
+        const componentOptions = options.components || [];
+        const typesToValidate = ['img'].concat(componentOptions);
+        const nodeType = elementType(node);
 
-      // Only check 'label' elements and custom types.
-      if (typesToValidate.indexOf(nodeType) === -1) {
-        return;
-      }
+        // Only check 'label' elements and custom types.
+        if (typesToValidate.indexOf(nodeType) === -1) {
+          return;
+        }
 
-      const altProp = getProp(node.attributes, 'alt');
-      // Return if alt prop is not present.
-      if (altProp === undefined) {
-        return;
-      }
+        const altProp = getProp(node.attributes, 'alt');
+        // Return if alt prop is not present.
+        if (altProp === undefined) {
+          return;
+        }
 
-      const value = getLiteralPropValue(altProp);
-      const isVisible = isHiddenFromScreenReader(nodeType, node.attributes) === false;
+        const value = getLiteralPropValue(altProp);
+        const isVisible = isHiddenFromScreenReader(nodeType, node.attributes) === false;
 
-      const {
-        words = [],
-      } = options;
-      const redundantWords = REDUNDANT_WORDS.concat(words);
+        const {
+          words = [],
+        } = options;
+        const redundantWords = REDUNDANT_WORDS.concat(words);
 
-      if (typeof value === 'string' && isVisible) {
-        const hasRedundancy = new RegExp(`(?!{)\\b(${redundantWords.join('|')})\\b(?!})`, 'i').test(value);
+        if (typeof value === 'string' && isVisible) {
+          const hasRedundancy = new RegExp(`(?!{)\\b(${redundantWords.join('|')})\\b(?!})`, 'i').test(value);
 
-        if (hasRedundancy === true) {
-          context.report({
-            node,
-            message: errorMessage,
-          });
+          if (hasRedundancy === true) {
+            context.report({
+              node,
+              message: errorMessage,
+            });
+          }
         }
-      }
-    },
-  }),
+      },
+    };
+  },
 };
diff --git a/src/rules/interactive-supports-focus.js b/src/rules/interactive-supports-focus.js
index 93637eff4..f13cbf45e 100644
--- a/src/rules/interactive-supports-focus.js
+++ b/src/rules/interactive-supports-focus.js
@@ -10,7 +10,6 @@ import {
 } from 'aria-query';
 import {
   getProp,
-  elementType,
   eventHandlersByType,
   getLiteralPropValue,
   hasAnyProp,
@@ -22,6 +21,7 @@ import {
   enumArraySchema,
   generateObjSchema,
 } from '../util/schemas';
+import getElementType from '../util/getElementType';
 import isDisabledElement from '../util/isDisabledElement';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 import isInteractiveElement from '../util/isInteractiveElement';
@@ -56,56 +56,59 @@ export default ({
     schema: [schema],
   },
 
-  create: (context: ESLintContext): ESLintVisitorSelectorConfig => ({
-    JSXOpeningElement: (node: JSXOpeningElement) => {
-      const tabbable = (
-        context.options && context.options[0] && context.options[0].tabbable
-      ) || [];
-      const { attributes } = node;
-      const type = elementType(node);
-      const hasInteractiveProps = hasAnyProp(attributes, interactiveProps);
-      const hasTabindex = getTabIndex(getProp(attributes, 'tabIndex')) !== undefined;
+  create: (context: ESLintContext): ESLintVisitorSelectorConfig => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node: JSXOpeningElement) => {
+        const tabbable = (
+          context.options && context.options[0] && context.options[0].tabbable
+        ) || [];
+        const { attributes } = node;
+        const type = elementType(node);
+        const hasInteractiveProps = hasAnyProp(attributes, interactiveProps);
+        const hasTabindex = getTabIndex(getProp(attributes, 'tabIndex')) !== undefined;
 
-      if (!includes(domElements, type)) {
-        // Do not test higher level JSX components, as we do not know what
-        // low-level DOM element this maps to.
-        return;
-      }
-      if (
-        !hasInteractiveProps
-        || isDisabledElement(attributes)
-        || isHiddenFromScreenReader(type, attributes)
-        || isPresentationRole(type, attributes)
-      ) {
-        // Presentation is an intentional signal from the author that this
-        // element is not meant to be perceivable. For example, a click screen
-        // to close a dialog .
-        return;
-      }
+        if (!includes(domElements, type)) {
+          // Do not test higher level JSX components, as we do not know what
+          // low-level DOM element this maps to.
+          return;
+        }
+        if (
+          !hasInteractiveProps
+          || isDisabledElement(attributes)
+          || isHiddenFromScreenReader(type, attributes)
+          || isPresentationRole(type, attributes)
+        ) {
+          // Presentation is an intentional signal from the author that this
+          // element is not meant to be perceivable. For example, a click screen
+          // to close a dialog .
+          return;
+        }
 
-      if (
-        hasInteractiveProps
-        && isInteractiveRole(type, attributes)
-        && !isInteractiveElement(type, attributes)
-        && !isNonInteractiveElement(type, attributes)
-        && !isNonInteractiveRole(type, attributes)
-        && !hasTabindex
-      ) {
-        const role = getLiteralPropValue(getProp(attributes, 'role'));
-        if (includes(tabbable, role)) {
-          // Always tabbable, tabIndex = 0
-          context.report({
-            node,
-            message: `Elements with the '${role}' interactive role must be tabbable.`,
-          });
-        } else {
-          // Focusable, tabIndex = -1 or 0
-          context.report({
-            node,
-            message: `Elements with the '${role}' interactive role must be focusable.`,
-          });
+        if (
+          hasInteractiveProps
+          && isInteractiveRole(type, attributes)
+          && !isInteractiveElement(type, attributes)
+          && !isNonInteractiveElement(type, attributes)
+          && !isNonInteractiveRole(type, attributes)
+          && !hasTabindex
+        ) {
+          const role = getLiteralPropValue(getProp(attributes, 'role'));
+          if (includes(tabbable, role)) {
+            // Always tabbable, tabIndex = 0
+            context.report({
+              node,
+              message: `Elements with the '${role}' interactive role must be tabbable.`,
+            });
+          } else {
+            // Focusable, tabIndex = -1 or 0
+            context.report({
+              node,
+              message: `Elements with the '${role}' interactive role must be focusable.`,
+            });
+          }
         }
-      }
-    },
-  }),
+      },
+    };
+  },
 }: ESLintConfig);
diff --git a/src/rules/label-has-associated-control.js b/src/rules/label-has-associated-control.js
index acd463222..7ee98ef65 100644
--- a/src/rules/label-has-associated-control.js
+++ b/src/rules/label-has-associated-control.js
@@ -9,10 +9,11 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { getProp, getPropValue, elementType } from 'jsx-ast-utils';
+import { getProp, getPropValue } from 'jsx-ast-utils';
 import type { JSXElement } from 'ast-types-flow';
 import { generateObjSchema, arraySchema } from '../util/schemas';
 import type { ESLintConfig, ESLintContext, ESLintVisitorSelectorConfig } from '../../flow/eslint';
+import getElementType from '../util/getElementType';
 import mayContainChildComponent from '../util/mayContainChildComponent';
 import mayHaveAccessibleLabel from '../util/mayHaveAccessibleLabel';
 
@@ -55,6 +56,7 @@ export default ({
     const labelComponents = options.labelComponents || [];
     const assertType = options.assert || 'either';
     const componentNames = ['label'].concat(labelComponents);
+    const elementType = getElementType(context);
 
     const rule = (node: JSXElement) => {
       if (componentNames.indexOf(elementType(node.openingElement)) === -1) {
@@ -79,6 +81,7 @@ export default ({
         node,
         name,
         recursionDepth,
+        elementType,
       ));
       const hasAccessibleLabel = mayHaveAccessibleLabel(
         node,
diff --git a/src/rules/label-has-for.js b/src/rules/label-has-for.js
index 2332346b8..e231709dd 100644
--- a/src/rules/label-has-for.js
+++ b/src/rules/label-has-for.js
@@ -7,8 +7,9 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { getProp, getPropValue, elementType } from 'jsx-ast-utils';
+import { getProp, getPropValue } from 'jsx-ast-utils';
 import { generateObjSchema, arraySchema, enumArraySchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 import hasAccessibleChild from '../util/hasAccessibleChild';
 
 const enumValues = ['nesting', 'id'];
@@ -51,9 +52,9 @@ const validateId = (node) => {
   return htmlForAttr !== false && !!htmlForValue;
 };
 
-const validate = (node, required, allowChildren) => {
+const validate = (node, required, allowChildren, elementType) => {
   if (allowChildren === true) {
-    return hasAccessibleChild(node.parent);
+    return hasAccessibleChild(node.parent, elementType);
   }
   if (required === 'nesting') {
     return validateNesting(node);
@@ -61,23 +62,23 @@ const validate = (node, required, allowChildren) => {
   return validateId(node);
 };
 
-const getValidityStatus = (node, required, allowChildren) => {
+const getValidityStatus = (node, required, allowChildren, elementType) => {
   if (Array.isArray(required.some)) {
-    const isValid = required.some.some((rule) => validate(node, rule, allowChildren));
+    const isValid = required.some.some((rule) => validate(node, rule, allowChildren, elementType));
     const message = !isValid
       ? `Form label must have ANY of the following types of associated control: ${required.some.join(', ')}`
       : null;
     return { isValid, message };
   }
   if (Array.isArray(required.every)) {
-    const isValid = required.every.every((rule) => validate(node, rule, allowChildren));
+    const isValid = required.every.every((rule) => validate(node, rule, allowChildren, elementType));
     const message = !isValid
       ? `Form label must have ALL of the following types of associated control: ${required.every.join(', ')}`
       : null;
     return { isValid, message };
   }
 
-  const isValid = validate(node, required, allowChildren);
+  const isValid = validate(node, required, allowChildren, elementType);
   const message = !isValid
     ? `Form label must have the following type of associated control: ${required}`
     : null;
@@ -93,28 +94,31 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      const options = context.options[0] || {};
-      const componentOptions = options.components || [];
-      const typesToValidate = ['label'].concat(componentOptions);
-      const nodeType = elementType(node);
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node) => {
+        const options = context.options[0] || {};
+        const componentOptions = options.components || [];
+        const typesToValidate = ['label'].concat(componentOptions);
+        const nodeType = elementType(node);
 
-      // Only check 'label' elements and custom types.
-      if (typesToValidate.indexOf(nodeType) === -1) {
-        return;
-      }
+        // Only check 'label' elements and custom types.
+        if (typesToValidate.indexOf(nodeType) === -1) {
+          return;
+        }
 
-      const required = options.required || { every: ['nesting', 'id'] };
-      const allowChildren = options.allowChildren || false;
+        const required = options.required || { every: ['nesting', 'id'] };
+        const allowChildren = options.allowChildren || false;
 
-      const { isValid, message } = getValidityStatus(node, required, allowChildren);
-      if (!isValid) {
-        context.report({
-          node,
-          message,
-        });
-      }
-    },
-  }),
+        const { isValid, message } = getValidityStatus(node, required, allowChildren, elementType);
+        if (!isValid) {
+          context.report({
+            node,
+            message,
+          });
+        }
+      },
+    };
+  },
 };
diff --git a/src/rules/lang.js b/src/rules/lang.js
index cecfc97c5..545d8a290 100644
--- a/src/rules/lang.js
+++ b/src/rules/lang.js
@@ -7,9 +7,10 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { propName, elementType, getLiteralPropValue } from 'jsx-ast-utils';
+import { propName, getLiteralPropValue } from 'jsx-ast-utils';
 import tags from 'language-tags';
 import { generateObjSchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 
 const errorMessage = 'lang attribute must have a valid value.';
 
@@ -24,42 +25,45 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXAttribute: (node) => {
-      const name = propName(node);
-      if (name && name.toUpperCase() !== 'LANG') {
-        return;
-      }
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXAttribute: (node) => {
+        const name = propName(node);
+        if (name && name.toUpperCase() !== 'LANG') {
+          return;
+        }
 
-      const { parent } = node;
-      const type = elementType(parent);
-      if (type && type !== 'html') {
-        return;
-      }
+        const { parent } = node;
+        const type = elementType(parent);
+        if (type && type !== 'html') {
+          return;
+        }
 
-      const value = getLiteralPropValue(node);
+        const value = getLiteralPropValue(node);
+
+        // Don't check identifiers
+        if (value === null) {
+          return;
+        }
+        if (value === undefined) {
+          context.report({
+            node,
+            message: errorMessage,
+          });
+
+          return;
+        }
+
+        if (tags.check(value)) {
+          return;
+        }
 
-      // Don't check identifiers
-      if (value === null) {
-        return;
-      }
-      if (value === undefined) {
         context.report({
           node,
           message: errorMessage,
         });
-
-        return;
-      }
-
-      if (tags.check(value)) {
-        return;
-      }
-
-      context.report({
-        node,
-        message: errorMessage,
-      });
-    },
-  }),
+      },
+    };
+  },
 };
diff --git a/src/rules/media-has-caption.js b/src/rules/media-has-caption.js
index 227acab1f..0b9ef8386 100644
--- a/src/rules/media-has-caption.js
+++ b/src/rules/media-has-caption.js
@@ -9,9 +9,10 @@
 // ----------------------------------------------------------------------------
 
 import type { JSXElement, JSXOpeningElement, Node } from 'ast-types-flow';
-import { elementType, getProp, getLiteralPropValue } from 'jsx-ast-utils';
+import { getProp, getLiteralPropValue } from 'jsx-ast-utils';
 import type { ESLintConfig, ESLintContext, ESLintVisitorSelectorConfig } from '../../flow/eslint';
 import { generateObjSchema, arraySchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 
 const errorMessage = 'Media elements such as <audio> and <video> must have a <track> for captions.';
 
@@ -44,48 +45,51 @@ export default ({
     schema: [schema],
   },
 
-  create: (context: ESLintContext): ESLintVisitorSelectorConfig => ({
-    JSXElement: (node: JSXElement) => {
-      const element: JSXOpeningElement = node.openingElement;
-      const type = elementType(element);
-      if (!isMediaType(context, type)) {
-        return;
-      }
-      const mutedProp = getProp(element.attributes, 'muted');
-      const mutedPropVal: boolean = getLiteralPropValue(mutedProp);
-      if (mutedPropVal === true) {
-        return;
-      }
-      // $FlowFixMe https://github.com/facebook/flow/issues/1414
-      const trackChildren: Array<JSXElement> = node.children.filter((child: Node) => {
-        if (child.type !== 'JSXElement') {
-          return false;
+  create: (context: ESLintContext): ESLintVisitorSelectorConfig => {
+    const elementType = getElementType(context);
+    return {
+      JSXElement: (node: JSXElement) => {
+        const element: JSXOpeningElement = node.openingElement;
+        const type = elementType(element);
+        if (!isMediaType(context, type)) {
+          return;
+        }
+        const mutedProp = getProp(element.attributes, 'muted');
+        const mutedPropVal: boolean = getLiteralPropValue(mutedProp);
+        if (mutedPropVal === true) {
+          return;
         }
-
         // $FlowFixMe https://github.com/facebook/flow/issues/1414
-        return isTrackType(context, elementType(child.openingElement));
-      });
+        const trackChildren: Array<JSXElement> = node.children.filter((child: Node) => {
+          if (child.type !== 'JSXElement') {
+            return false;
+          }
 
-      if (trackChildren.length === 0) {
-        context.report({
-          node: element,
-          message: errorMessage,
+          // $FlowFixMe https://github.com/facebook/flow/issues/1414
+          return isTrackType(context, elementType(child.openingElement));
         });
-        return;
-      }
 
-      const hasCaption: boolean = trackChildren.some((track) => {
-        const kindProp = getProp(track.openingElement.attributes, 'kind');
-        const kindPropValue = getLiteralPropValue(kindProp) || '';
-        return kindPropValue.toLowerCase() === 'captions';
-      });
+        if (trackChildren.length === 0) {
+          context.report({
+            node: element,
+            message: errorMessage,
+          });
+          return;
+        }
 
-      if (!hasCaption) {
-        context.report({
-          node: element,
-          message: errorMessage,
+        const hasCaption: boolean = trackChildren.some((track) => {
+          const kindProp = getProp(track.openingElement.attributes, 'kind');
+          const kindPropValue = getLiteralPropValue(kindProp) || '';
+          return kindPropValue.toLowerCase() === 'captions';
         });
-      }
-    },
-  }),
+
+        if (!hasCaption) {
+          context.report({
+            node: element,
+            message: errorMessage,
+          });
+        }
+      },
+    };
+  },
 }: ESLintConfig);
diff --git a/src/rules/no-autofocus.js b/src/rules/no-autofocus.js
index dfbd00c3b..43c3fe599 100644
--- a/src/rules/no-autofocus.js
+++ b/src/rules/no-autofocus.js
@@ -7,9 +7,10 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { propName, elementType } from 'jsx-ast-utils';
+import { propName } from 'jsx-ast-utils';
 import { dom } from 'aria-query';
 import { generateObjSchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 
 const errorMessage = 'The autoFocus prop should not be used, as it can reduce usability and accessibility for users.';
 
@@ -29,27 +30,30 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXAttribute: (attribute) => {
-      // Determine if ignoreNonDOM is set to true
-      // If true, then do not run rule.
-      const options = context.options[0] || {};
-      const ignoreNonDOM = !!options.ignoreNonDOM;
-
-      if (ignoreNonDOM) {
-        const type = elementType(attribute.parent);
-        if (!dom.get(type)) {
-          return;
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXAttribute: (attribute) => {
+        // Determine if ignoreNonDOM is set to true
+        // If true, then do not run rule.
+        const options = context.options[0] || {};
+        const ignoreNonDOM = !!options.ignoreNonDOM;
+
+        if (ignoreNonDOM) {
+          const type = elementType(attribute.parent);
+          if (!dom.get(type)) {
+            return;
+          }
         }
-      }
-
-      // Don't normalize, since React only recognizes autoFocus on low-level DOM elements.
-      if (propName(attribute) === 'autoFocus') {
-        context.report({
-          node: attribute,
-          message: errorMessage,
-        });
-      }
-    },
-  }),
+
+        // Don't normalize, since React only recognizes autoFocus on low-level DOM elements.
+        if (propName(attribute) === 'autoFocus') {
+          context.report({
+            node: attribute,
+            message: errorMessage,
+          });
+        }
+      },
+    };
+  },
 };
diff --git a/src/rules/no-distracting-elements.js b/src/rules/no-distracting-elements.js
index 5377f625c..618921a43 100644
--- a/src/rules/no-distracting-elements.js
+++ b/src/rules/no-distracting-elements.js
@@ -7,8 +7,8 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { elementType } from 'jsx-ast-utils';
 import { generateObjSchema, enumArraySchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 
 const errorMessage = (element) => (
   `Do not use <${element}> elements as they can create visual accessibility issues and are deprecated.`
@@ -32,19 +32,22 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      const options = context.options[0] || {};
-      const elementOptions = options.elements || DEFAULT_ELEMENTS;
-      const type = elementType(node);
-      const distractingElement = elementOptions.find((element) => type === element);
-
-      if (distractingElement) {
-        context.report({
-          node,
-          message: errorMessage(distractingElement),
-        });
-      }
-    },
-  }),
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node) => {
+        const options = context.options[0] || {};
+        const elementOptions = options.elements || DEFAULT_ELEMENTS;
+        const type = elementType(node);
+        const distractingElement = elementOptions.find((element) => type === element);
+
+        if (distractingElement) {
+          context.report({
+            node,
+            message: errorMessage(distractingElement),
+          });
+        }
+      },
+    };
+  },
 };
diff --git a/src/rules/no-interactive-element-to-noninteractive-role.js b/src/rules/no-interactive-element-to-noninteractive-role.js
index dbb374135..e817fb573 100644
--- a/src/rules/no-interactive-element-to-noninteractive-role.js
+++ b/src/rules/no-interactive-element-to-noninteractive-role.js
@@ -11,7 +11,6 @@
 
 import { dom } from 'aria-query';
 import {
-  elementType,
   getProp,
   getLiteralPropValue,
   propName,
@@ -21,6 +20,7 @@ import includes from 'array-includes';
 import has from 'has';
 import type { ESLintConfig, ESLintContext, ESLintVisitorSelectorConfig } from '../../flow/eslint';
 import type { ESLintJSXAttribute } from '../../flow/eslint-jsx';
+import getElementType from '../util/getElementType';
 import isInteractiveElement from '../util/isInteractiveElement';
 import isNonInteractiveRole from '../util/isNonInteractiveRole';
 import isPresentationRole from '../util/isPresentationRole';
@@ -50,6 +50,7 @@ export default ({
 
   create: (context: ESLintContext): ESLintVisitorSelectorConfig => {
     const { options } = context;
+    const elementType = getElementType(context);
     return {
       JSXAttribute: (attribute: ESLintJSXAttribute) => {
         const attributeName: JSXIdentifier = propName(attribute);
diff --git a/src/rules/no-noninteractive-element-interactions.js b/src/rules/no-noninteractive-element-interactions.js
index 13e387ea4..052a4a131 100644
--- a/src/rules/no-noninteractive-element-interactions.js
+++ b/src/rules/no-noninteractive-element-interactions.js
@@ -9,7 +9,6 @@
 
 import { dom } from 'aria-query';
 import {
-  elementType,
   eventHandlersByType,
   getPropValue,
   getProp,
@@ -21,6 +20,7 @@ import includes from 'array-includes';
 import has from 'has';
 import type { ESLintConfig, ESLintContext, ESLintVisitorSelectorConfig } from '../../flow/eslint';
 import { arraySchema, generateObjSchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 import isAbstractRole from '../util/isAbstractRole';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 import isInteractiveElement from '../util/isInteractiveElement';
@@ -54,6 +54,7 @@ export default ({
 
   create: (context: ESLintContext): ESLintVisitorSelectorConfig => {
     const { options } = context;
+    const elementType = getElementType(context);
     return {
       JSXOpeningElement: (node: JSXOpeningElement) => {
         let { attributes } = node;
diff --git a/src/rules/no-noninteractive-element-to-interactive-role.js b/src/rules/no-noninteractive-element-to-interactive-role.js
index 64ed9a766..8c4b8aebc 100644
--- a/src/rules/no-noninteractive-element-to-interactive-role.js
+++ b/src/rules/no-noninteractive-element-to-interactive-role.js
@@ -11,7 +11,6 @@
 
 import { dom } from 'aria-query';
 import {
-  elementType,
   propName,
 } from 'jsx-ast-utils';
 import type { JSXIdentifier } from 'ast-types-flow';
@@ -19,6 +18,7 @@ import includes from 'array-includes';
 import has from 'has';
 import type { ESLintConfig, ESLintContext, ESLintVisitorSelectorConfig } from '../../flow/eslint';
 import type { ESLintJSXAttribute } from '../../flow/eslint-jsx';
+import getElementType from '../util/getElementType';
 import getExplicitRole from '../util/getExplicitRole';
 import isNonInteractiveElement from '../util/isNonInteractiveElement';
 import isInteractiveRole from '../util/isInteractiveRole';
@@ -48,6 +48,7 @@ export default ({
 
   create: (context: ESLintContext): ESLintVisitorSelectorConfig => {
     const { options } = context;
+    const elementType = getElementType(context);
     return {
       JSXAttribute: (attribute: ESLintJSXAttribute) => {
         const attributeName: JSXIdentifier = propName(attribute);
diff --git a/src/rules/no-noninteractive-tabindex.js b/src/rules/no-noninteractive-tabindex.js
index 7d6dbfff6..88f1b023c 100644
--- a/src/rules/no-noninteractive-tabindex.js
+++ b/src/rules/no-noninteractive-tabindex.js
@@ -11,12 +11,12 @@
 import { dom } from 'aria-query';
 import type { JSXOpeningElement } from 'ast-types-flow';
 import {
-  elementType,
   getProp,
   getLiteralPropValue,
 } from 'jsx-ast-utils';
 import includes from 'array-includes';
 import type { ESLintConfig, ESLintContext, ESLintVisitorSelectorConfig } from '../../flow/eslint';
+import getElementType from '../util/getElementType';
 import isInteractiveElement from '../util/isInteractiveElement';
 import isInteractiveRole from '../util/isInteractiveRole';
 import isNonLiteralProperty from '../util/isNonLiteralProperty';
@@ -48,6 +48,7 @@ export default ({
 
   create: (context: ESLintContext): ESLintVisitorSelectorConfig => {
     const { options } = context;
+    const elementType = getElementType(context);
     return {
       JSXOpeningElement: (node: JSXOpeningElement) => {
         const type = elementType(node);
diff --git a/src/rules/no-onchange.js b/src/rules/no-onchange.js
index 48012632d..fe391c723 100644
--- a/src/rules/no-onchange.js
+++ b/src/rules/no-onchange.js
@@ -7,8 +7,9 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { getProp, elementType } from 'jsx-ast-utils';
+import { getProp } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 
 const errorMessage = 'onBlur must be used instead of onchange, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users.';
 
@@ -29,23 +30,26 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      const nodeType = elementType(node);
-
-      if (applicableTypes.indexOf(nodeType) === -1) {
-        return;
-      }
-
-      const onChange = getProp(node.attributes, 'onChange');
-      const hasOnBlur = getProp(node.attributes, 'onBlur') !== undefined;
-
-      if (onChange && !hasOnBlur) {
-        context.report({
-          node,
-          message: errorMessage,
-        });
-      }
-    },
-  }),
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node) => {
+        const nodeType = elementType(node);
+
+        if (applicableTypes.indexOf(nodeType) === -1) {
+          return;
+        }
+
+        const onChange = getProp(node.attributes, 'onChange');
+        const hasOnBlur = getProp(node.attributes, 'onBlur') !== undefined;
+
+        if (onChange && !hasOnBlur) {
+          context.report({
+            node,
+            message: errorMessage,
+          });
+        }
+      },
+    };
+  },
 };
diff --git a/src/rules/no-redundant-roles.js b/src/rules/no-redundant-roles.js
index 602aa2c75..ae031a444 100644
--- a/src/rules/no-redundant-roles.js
+++ b/src/rules/no-redundant-roles.js
@@ -9,11 +9,11 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { elementType } from 'jsx-ast-utils';
 import includes from 'array-includes';
 import has from 'has';
 import type { JSXOpeningElement } from 'ast-types-flow';
 import type { ESLintConfig, ESLintContext, ESLintVisitorSelectorConfig } from '../../flow/eslint';
+import getElementType from '../util/getElementType';
 import getExplicitRole from '../util/getExplicitRole';
 import getImplicitRole from '../util/getImplicitRole';
 
@@ -43,6 +43,7 @@ export default ({
 
   create: (context: ESLintContext): ESLintVisitorSelectorConfig => {
     const { options } = context;
+    const elementType = getElementType(context);
     return {
       JSXOpeningElement: (node: JSXOpeningElement) => {
         const type = elementType(node);
diff --git a/src/rules/no-static-element-interactions.js b/src/rules/no-static-element-interactions.js
index 2acb09497..5fd12ee17 100644
--- a/src/rules/no-static-element-interactions.js
+++ b/src/rules/no-static-element-interactions.js
@@ -10,7 +10,6 @@
 
 import { dom } from 'aria-query';
 import {
-  elementType,
   eventHandlersByType,
   getPropValue,
   getProp,
@@ -20,6 +19,7 @@ import type { JSXOpeningElement } from 'ast-types-flow';
 import includes from 'array-includes';
 import type { ESLintConfig, ESLintContext, ESLintVisitorSelectorConfig } from '../../flow/eslint';
 import { arraySchema, generateObjSchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 import isAbstractRole from '../util/isAbstractRole';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 import isInteractiveElement from '../util/isInteractiveElement';
@@ -53,6 +53,7 @@ export default ({
 
   create: (context: ESLintContext): ESLintVisitorSelectorConfig => {
     const { options } = context;
+    const elementType = getElementType(context);
     return {
       JSXOpeningElement: (node: JSXOpeningElement) => {
         const { attributes } = node;
diff --git a/src/rules/role-has-required-aria-props.js b/src/rules/role-has-required-aria-props.js
index 4803db650..f20eb6467 100644
--- a/src/rules/role-has-required-aria-props.js
+++ b/src/rules/role-has-required-aria-props.js
@@ -10,12 +10,12 @@
 
 import { dom, roles } from 'aria-query';
 import {
-  elementType,
   getProp,
   getLiteralPropValue,
   propName,
 } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 import isSemanticRoleElement from '../util/isSemanticRoleElement';
 
 const errorMessage = (role, requiredProps) => (
@@ -33,56 +33,59 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXAttribute: (attribute) => {
-      const name = propName(attribute).toLowerCase();
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXAttribute: (attribute) => {
+        const name = propName(attribute).toLowerCase();
 
-      if (name !== 'role') {
-        return;
-      }
+        if (name !== 'role') {
+          return;
+        }
 
-      const type = elementType(attribute.parent);
-      if (!dom.get(type)) {
-        return;
-      }
+        const type = elementType(attribute.parent);
+        if (!dom.get(type)) {
+          return;
+        }
 
-      const roleAttrValue = getLiteralPropValue(attribute);
-      const { attributes } = attribute.parent;
+        const roleAttrValue = getLiteralPropValue(attribute);
+        const { attributes } = attribute.parent;
 
-      // If value is undefined, then the role attribute will be dropped in the DOM.
-      // If value is null, then getLiteralAttributeValue is telling us
-      // that the value isn't in the form of a literal.
-      if (roleAttrValue === undefined || roleAttrValue === null) {
-        return;
-      }
+        // If value is undefined, then the role attribute will be dropped in the DOM.
+        // If value is null, then getLiteralAttributeValue is telling us
+        // that the value isn't in the form of a literal.
+        if (roleAttrValue === undefined || roleAttrValue === null) {
+          return;
+        }
 
-      const normalizedValues = String(roleAttrValue).toLowerCase().split(' ');
-      const validRoles = normalizedValues
-        .filter((val) => [...roles.keys()].indexOf(val) > -1);
+        const normalizedValues = String(roleAttrValue).toLowerCase().split(' ');
+        const validRoles = normalizedValues
+          .filter((val) => [...roles.keys()].indexOf(val) > -1);
 
-      // Check semantic DOM elements
-      // For example, <input type="checkbox" role="switch" />
-      if (isSemanticRoleElement(type, attributes)) {
-        return;
-      }
-      // Check arbitrary DOM elements
-      validRoles.forEach((role) => {
-        const {
-          requiredProps: requiredPropKeyValues,
-        } = roles.get(role);
-        const requiredProps = Object.keys(requiredPropKeyValues);
+        // Check semantic DOM elements
+        // For example, <input type="checkbox" role="switch" />
+        if (isSemanticRoleElement(type, attributes)) {
+          return;
+        }
+        // Check arbitrary DOM elements
+        validRoles.forEach((role) => {
+          const {
+            requiredProps: requiredPropKeyValues,
+          } = roles.get(role);
+          const requiredProps = Object.keys(requiredPropKeyValues);
 
-        if (requiredProps.length > 0) {
-          const hasRequiredProps = requiredProps
-            .every((prop) => getProp(attribute.parent.attributes, prop));
-          if (hasRequiredProps === false) {
-            context.report({
-              node: attribute,
-              message: errorMessage(role.toLowerCase(), requiredProps),
-            });
+          if (requiredProps.length > 0) {
+            const hasRequiredProps = requiredProps
+              .every((prop) => getProp(attributes, prop));
+            if (hasRequiredProps === false) {
+              context.report({
+                node: attribute,
+                message: errorMessage(role.toLowerCase(), requiredProps),
+              });
+            }
           }
-        }
-      });
-    },
-  }),
+        });
+      },
+    };
+  },
 };
diff --git a/src/rules/role-supports-aria-props.js b/src/rules/role-supports-aria-props.js
index d6edb8945..9bfdd0f96 100644
--- a/src/rules/role-supports-aria-props.js
+++ b/src/rules/role-supports-aria-props.js
@@ -16,10 +16,10 @@ import {
   getProp,
   getLiteralPropValue,
   getPropValue,
-  elementType,
   propName,
 } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 import getImplicitRole from '../util/getImplicitRole';
 
 const errorMessage = (attr, role, tag, isImplicit) => {
@@ -42,47 +42,50 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXOpeningElement: (node) => {
-      // If role is not explicitly defined, then try and get its implicit role.
-      const type = elementType(node);
-      const role = getProp(node.attributes, 'role');
-      const roleValue = role ? getLiteralPropValue(role) : getImplicitRole(type, node.attributes);
-      const isImplicit = roleValue && role === undefined;
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXOpeningElement: (node) => {
+        // If role is not explicitly defined, then try and get its implicit role.
+        const type = elementType(node);
+        const role = getProp(node.attributes, 'role');
+        const roleValue = role ? getLiteralPropValue(role) : getImplicitRole(type, node.attributes);
+        const isImplicit = roleValue && role === undefined;
 
-      // If there is no explicit or implicit role, then assume that the element
-      // can handle the global set of aria-* properties.
-      // This actually isn't true - should fix in future release.
-      if (
-        typeof roleValue !== 'string'
-        || roles.get(roleValue) === undefined
-      ) {
-        return;
-      }
+        // If there is no explicit or implicit role, then assume that the element
+        // can handle the global set of aria-* properties.
+        // This actually isn't true - should fix in future release.
+        if (
+          typeof roleValue !== 'string'
+          || roles.get(roleValue) === undefined
+        ) {
+          return;
+        }
 
-      // Make sure it has no aria-* properties defined outside of its property set.
-      const {
-        props: propKeyValues,
-      } = roles.get(roleValue);
-      const propertySet = Object.keys(propKeyValues);
-      const invalidAriaPropsForRole = [...aria.keys()]
-        .filter((attribute) => propertySet.indexOf(attribute) === -1);
+        // Make sure it has no aria-* properties defined outside of its property set.
+        const {
+          props: propKeyValues,
+        } = roles.get(roleValue);
+        const propertySet = Object.keys(propKeyValues);
+        const invalidAriaPropsForRole = [...aria.keys()]
+          .filter((attribute) => propertySet.indexOf(attribute) === -1);
 
-      node.attributes.forEach((prop) => {
-        // Ignore the attribute if its value is null or undefined.
-        if (getPropValue(prop) == null) return;
+        node.attributes.forEach((prop) => {
+          // Ignore the attribute if its value is null or undefined.
+          if (getPropValue(prop) == null) return;
 
-        // Ignore the attribute if it's a spread.
-        if (prop.type === 'JSXSpreadAttribute') return;
+          // Ignore the attribute if it's a spread.
+          if (prop.type === 'JSXSpreadAttribute') return;
 
-        const name = propName(prop);
-        if (invalidAriaPropsForRole.indexOf(name) > -1) {
-          context.report({
-            node,
-            message: errorMessage(name, roleValue, type, isImplicit),
-          });
-        }
-      });
-    },
-  }),
+          const name = propName(prop);
+          if (invalidAriaPropsForRole.indexOf(name) > -1) {
+            context.report({
+              node,
+              message: errorMessage(name, roleValue, type, isImplicit),
+            });
+          }
+        });
+      },
+    };
+  },
 };
diff --git a/src/rules/scope.js b/src/rules/scope.js
index 8434e0ae1..a647ce792 100644
--- a/src/rules/scope.js
+++ b/src/rules/scope.js
@@ -8,8 +8,9 @@
 // ----------------------------------------------------------------------------
 
 import { dom } from 'aria-query';
-import { propName, elementType } from 'jsx-ast-utils';
+import { propName } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
+import getElementType from '../util/getElementType';
 
 const errorMessage = 'The scope prop can only be used on <th> elements.';
 
@@ -25,29 +26,32 @@ export default {
     schema: [schema],
   },
 
-  create: (context) => ({
-    JSXAttribute: (node) => {
-      const name = propName(node);
-      if (name && name.toUpperCase() !== 'SCOPE') {
-        return;
-      }
-
-      const { parent } = node;
-      const tagName = elementType(parent);
-
-      // Do not test higher level JSX components, as we do not know what
-      // low-level DOM element this maps to.
-      if (!dom.has(tagName)) {
-        return;
-      }
-      if (tagName && tagName.toUpperCase() === 'TH') {
-        return;
-      }
-
-      context.report({
-        node,
-        message: errorMessage,
-      });
-    },
-  }),
+  create: (context) => {
+    const elementType = getElementType(context);
+    return {
+      JSXAttribute: (node) => {
+        const name = propName(node);
+        if (name && name.toUpperCase() !== 'SCOPE') {
+          return;
+        }
+
+        const { parent } = node;
+        const tagName = elementType(parent);
+
+        // Do not test higher level JSX components, as we do not know what
+        // low-level DOM element this maps to.
+        if (!dom.has(tagName)) {
+          return;
+        }
+        if (tagName && tagName.toUpperCase() === 'TH') {
+          return;
+        }
+
+        context.report({
+          node,
+          message: errorMessage,
+        });
+      },
+    };
+  },
 };
diff --git a/src/util/getElementType.js b/src/util/getElementType.js
new file mode 100644
index 000000000..51c69b1de
--- /dev/null
+++ b/src/util/getElementType.js
@@ -0,0 +1,23 @@
+/**
+ * @flow
+ */
+
+import type { JSXOpeningElement } from 'ast-types-flow';
+import has from 'has';
+import { elementType } from 'jsx-ast-utils';
+
+import type { ESLintContext } from '../../flow/eslint';
+
+const getElementType = (context: ESLintContext): ((node: JSXOpeningElement) => string) => {
+  const { settings } = context;
+  const componentMap = settings['jsx-a11y']?.components;
+  if (!componentMap) {
+    return elementType;
+  }
+  return (node: JSXOpeningElement): string => {
+    const rawType = elementType(node);
+    return has(componentMap, rawType) ? componentMap[rawType] : rawType;
+  };
+};
+
+export default getElementType;
diff --git a/src/util/hasAccessibleChild.js b/src/util/hasAccessibleChild.js
index 814b9d616..6fe255b20 100644
--- a/src/util/hasAccessibleChild.js
+++ b/src/util/hasAccessibleChild.js
@@ -1,10 +1,10 @@
 // @flow
 
-import { elementType, hasAnyProp } from 'jsx-ast-utils';
-import type { JSXElement, Node } from 'ast-types-flow';
+import { hasAnyProp } from 'jsx-ast-utils';
+import type { JSXElement, Node, JSXOpeningElement } from 'ast-types-flow';
 import isHiddenFromScreenReader from './isHiddenFromScreenReader';
 
-export default function hasAccessibleChild(node: JSXElement): boolean {
+export default function hasAccessibleChild(node: JSXElement, elementType: (JSXOpeningElement) => string): boolean {
   return node.children.some((child: Node) => {
     switch (child.type) {
       case 'Literal':
diff --git a/src/util/mayContainChildComponent.js b/src/util/mayContainChildComponent.js
index ddd98306f..43a03ef0f 100644
--- a/src/util/mayContainChildComponent.js
+++ b/src/util/mayContainChildComponent.js
@@ -7,14 +7,15 @@
  * @flow
  */
 
-import { elementType } from 'jsx-ast-utils';
-import type { Node } from 'ast-types-flow';
+import type { JSXOpeningElement, Node } from 'ast-types-flow';
+import { elementType as rawElementType } from 'jsx-ast-utils';
 import minimatch from 'minimatch';
 
 export default function mayContainChildComponent(
   root: Node,
   componentName: string,
   maxDepth: number = 1,
+  elementType: ((node: JSXOpeningElement) => string) = rawElementType,
 ): boolean {
   function traverseChildren(
     node: Node,