Add warning and default to off

README.md

@@ -89,15 +89,15 @@ Add `plugin:jsx-a11y/recommended` or `plugin:jsx-a11y/strict` in `extends`:
 }
 ```
 
-> As you are extending our configuration, you can omit `"plugins": ["jsx-a11y"]` from your `.eslintrc` configuration file.
+### Configurations
 
-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.
+> As you are extending our configuration, you can omit `"plugins": ["jsx-a11y"]` from your `.eslintrc` configuration file.
 
 ```json
 {
   "settings": {
     "jsx-a11y": {
+      "polymorphicPropName": "as",
       "components": {
         "CityInput": "input",
         "CustomButton": "button",
@@ -109,6 +109,24 @@ configuration file by mapping each custom component name to a DOM element type.
 }
 ```
 
+#### Component Mapping
+
+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.
+
+#### Polymorphic Props
+
+You can optionally use the `polymorphicPropName` setting to define the prop your code uses to create 
+polymorphic components. This setting will be used determine the element type in rules that require semantic context.  
+
+For example, if you set the `polymorphicPropName` setting to `as` then this components: 
+
+`<Box as='h3'>Configurations </Box>`
+
+will be evalutated as an `h3`. If no `polymorphicPropName` is set then the component will be evalutated as `Box`.
+
+⚠️ Polymorphic props can make code harder to maintain please use this feature with caution. 
+
 ## Supported Rules
 
 <!-- begin auto-generated rules list -->

__tests__/src/util/getElementType-test.js

@@ -18,8 +18,8 @@ describe('getElementType', () => {
     it('should return the exact tag name for names that are in Object.prototype', () => {
       expect(elementType(JSXElementMock('toString').openingElement)).toBe('toString');
     });
-    it('should return the tag name provided by the polymorphic "as" prop', () => {
-      expect(elementType(JSXElementMock('span', [JSXAttributeMock('as', 'h1')]).openingElement)).toBe('h1');
+    it('should return the default tag name provided', () => {
+      expect(elementType(JSXElementMock('span', [JSXAttributeMock('as', 'h1')]).openingElement)).toBe('span');
     });
   });
 
@@ -46,8 +46,8 @@ describe('getElementType', () => {
       expect(elementType(JSXElementMock('CityInput').openingElement)).toBe('CityInput');
     });
 
-    it('should return the tag name provided by the polymorphic "as" prop', () => {
-      expect(elementType(JSXElementMock('span', [JSXAttributeMock('as', 'h1')]).openingElement)).toBe('h1');
+    it('should return the default tag name since not polymorphicPropName was provided', () => {
+      expect(elementType(JSXElementMock('span', [JSXAttributeMock('as', 'h1')]).openingElement)).toBe('span');
     });
   });
 

src/util/getElementType.js

@@ -4,17 +4,18 @@
 
 import type { JSXOpeningElement } from 'ast-types-flow';
 import has from 'has';
-import { elementType, getPropValue, getProp } from 'jsx-ast-utils';
+import { elementType, getProp, getLiteralPropValue } from 'jsx-ast-utils';
 
 import type { ESLintContext } from '../../flow/eslint';
 
 const getElementType = (context: ESLintContext): ((node: JSXOpeningElement) => string) => {
   const { settings } = context;
-  const polymorphicPropName = settings['jsx-a11y']?.polymorphicPropName ?? 'as';
+  const polymorphicPropName = settings['jsx-a11y']?.polymorphicPropName;
   const componentMap = settings['jsx-a11y']?.components;
 
   return (node: JSXOpeningElement): string => {
-    const rawType = getPropValue(getProp(node.attributes, polymorphicPropName)) ?? elementType(node);
+    const polymorphicProp = polymorphicPropName ? getLiteralPropValue(getProp(node.attributes, polymorphicPropName)) : undefined;
+    const rawType = polymorphicProp ?? elementType(node);
 
     if (!componentMap) {
       return rawType;