From ef9f86b0348f8f77db6fd48df730948446b65f17 Mon Sep 17 00:00:00 2001
From: Pascal Corpet <pascal@bayesimpact.org>
Date: Fri, 25 Mar 2022 10:26:41 +0100
Subject: [PATCH] [New] Introduce a plugin-wide setting for custom components.

For #174
---
 __tests__/__util__/parserOptionsMapper.js     |   2 +
 .../__util__/ruleOptionsMapperFactory.js      |   6 +-
 __tests__/src/rules/accessible-emoji-test.js  |   6 +
 .../src/rules/anchor-has-content-test.js      |  10 ++
 __tests__/src/rules/anchor-is-valid-test.js   |  16 +-
 ...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     |  14 ++
 __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 +++++++++
 ...oninteractive-element-interactions-test.js |  11 ++
 __tests__/src/util/getElementType-test.js     |  56 +++++++
 .../src/util/mayContainChildComponent-test.js |  23 +++
 flow/eslint.js                                |   8 +
 src/rules/accessible-emoji.js                 |  54 ++++---
 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/lang.js                             |  68 ++++----
 src/rules/media-has-caption.js                |  80 +++++-----
 .../no-noninteractive-element-interactions.js |   3 +-
 src/util/getElementType.js                    |  32 ++++
 src/util/mayContainChildComponent.js          |   5 +-
 43 files changed, 897 insertions(+), 468 deletions(-)
 create mode 100644 __tests__/src/util/getElementType-test.js
 create mode 100644 src/util/getElementType.js

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..891035a11 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: { input: ['CustomInput'] } } },
+    },
   ].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/anchor-has-content-test.js b/__tests__/src/rules/anchor-has-content-test.js
index 77559da31..b59d0d834 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: { a: ['Link'] } } },
+    },
   ].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: { a: ['Link'] } } },
+    },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/anchor-is-valid-test.js b/__tests__/src/rules/anchor-is-valid-test.js
index fd7f44940..b9a21f386 100644
--- a/__tests__/src/rules/anchor-is-valid-test.js
+++ b/__tests__/src/rules/anchor-is-valid-test.js
@@ -78,10 +78,18 @@ const componentsAndSpecialLinkAndNoHrefAspect = [{
   aspects: ['noHref'],
 }];
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      a: ['Anchor', 'Link'],
+    },
+  },
+};
+
 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 +127,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 +341,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..d16fe0329 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: { div: ['CustomComponent'] } } },
+    },
     {
       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: { div: ['CustomComponent'] } } },
+    },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/aria-role-test.js b/__tests__/src/rules/aria-role-test.js
index a9cdfeb51..09d0addd6 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..54118c3e7 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..0e3e3df13 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..8f7197f27 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..e3261c0b1 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: { button: ['CustomControl'] } } } },
   // 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: { button: ['CustomControl'] } } } },
   { 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..e2d164115 100644
--- a/__tests__/src/rules/heading-has-content-test.js
+++ b/__tests__/src/rules/heading-has-content-test.js
@@ -26,6 +26,15 @@ const components = [{
   components: ['Heading', 'Title'],
 }];
 
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      h2: ['Heading'],
+      h1: ['Title'],
+    },
+  },
+};
+
 ruleTester.run('heading-has-content', rule, {
   valid: [
     // DEFAULT ELEMENT TESTS
@@ -51,6 +60,8 @@ 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 },
   ].map(parserOptionsMapper),
   invalid: [
     // DEFAULT ELEMENT TESTS
@@ -62,5 +73,8 @@ ruleTester.run('heading-has-content', rule, {
     { 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 },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/html-has-lang-test.js b/__tests__/src/rules/html-has-lang-test.js
index 61348f676..6ea3fc341 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: { html: ['HTMLTop'] } } } },
   ].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: { html: ['HTMLTop'] } } } },
   ].map(parserOptionsMapper),
 });
diff --git a/__tests__/src/rules/iframe-has-title-test.js b/__tests__/src/rules/iframe-has-title-test.js
index 195fdba44..e34e683c6 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: {
+      iframe: ['FooComponent'],
+    },
+  },
+};
+
 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..d918a7cc6 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: {
+      img: ['Image'],
+    },
+  },
+};
+
 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..15a0d5236 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..4284ed7be 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: {
+      input: ['CustomInput'],
+      label: ['CustomLabel'],
+    },
+  },
+};
+
 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..8c8831265 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: {
+      html: ['Foo'],
+    },
+  },
+};
+
 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..1cd3b1aee 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-noninteractive-element-interactions-test.js b/__tests__/src/rules/no-noninteractive-element-interactions-test.js
index dc949d22d..3d86376e3 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: { img: ['Image'] } } },
+  },
 ];
 
 const recommendedOptions = configs.recommended.rules[`jsx-a11y/${ruleName}`][1] || {};
diff --git a/__tests__/src/util/getElementType-test.js b/__tests__/src/util/getElementType-test.js
new file mode 100644
index 000000000..a15815812
--- /dev/null
+++ b/__tests__/src/util/getElementType-test.js
@@ -0,0 +1,56 @@
+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');
+    });
+  });
+
+  describe('components settings in context', () => {
+    const elementType = getElementType({
+      settings: {
+        'jsx-a11y': {
+          components: {
+            input: ['CustomInput'],
+          },
+        },
+      },
+    });
+
+    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');
+    });
+  });
+
+  it('should fail if a component is included several times', () => {
+    expect(() => {
+      getElementType({
+        settings: {
+          'jsx-a11y': {
+            components: {
+              input: ['CustomInput'],
+              button: ['CustomInput'],
+            },
+          },
+        },
+      });
+    }).toThrow('CustomInput was specified twice.');
+  });
+});
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..040608fca 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]: Array<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/anchor-has-content.js b/src/rules/anchor-has-content.js
index bb4bc3398..b58da60ad 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)) {
+          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..3331dadbf 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)) {
+          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/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-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/util/getElementType.js b/src/util/getElementType.js
new file mode 100644
index 000000000..88ac5beb7
--- /dev/null
+++ b/src/util/getElementType.js
@@ -0,0 +1,32 @@
+/**
+ * @flow
+ */
+
+import type { JSXOpeningElement } from 'ast-types-flow';
+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;
+  }
+  const reverseComponentMaps: {[string]: string} = {};
+  Object.entries(componentMap).forEach(([domElement, customComponents]) => {
+    customComponents.forEach((customComponent) => {
+      const existingDomElement = reverseComponentMaps[customComponent];
+      if (existingDomElement && existingDomElement !== domElement) {
+        throw new Error(`${customComponent} was specified twice.`);
+      }
+      reverseComponentMaps[customComponent] = domElement;
+    });
+  });
+  return (node: JSXOpeningElement): string => {
+    const rawType = elementType(node);
+    return reverseComponentMaps[rawType] || rawType;
+  };
+};
+
+export default getElementType;
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,