feat: Allow polymorphic linting to be restricted to specified components

README.md

@@ -124,6 +124,8 @@ For example, if you set the `polymorphicPropName` setting to `as` then this elem
 
 will be evaluated as an `h3`. If no `polymorphicPropName` is set, then the component will be evaluated as `Box`.
 
+To restrict polymorphic linting to specified components, additionally set `polymorphicAllowList` to an array of component names.
+
 ⚠️  Polymorphic components can make code harder to maintain; please use this feature with caution.
 
 ## Supported Rules

__tests__/src/util/getElementType-test.js

@@ -76,4 +76,38 @@ describe('getElementType', () => {
       expect(elementType(JSXElementMock('CustomButton', [JSXAttributeMock('as', 'a')]).openingElement)).toBe('button');
     });
   });
+
+  describe('polymorphicPropName settings and explicitly defined polymorphicAllowList in context', () => {
+    const elementType = getElementType({
+      settings: {
+        'jsx-a11y': {
+          polymorphicPropName: 'asChild',
+          polymorphicAllowList: [
+            'Box',
+            'Icon',
+          ],
+          components: {
+            Box: 'div',
+            Icon: 'svg',
+          },
+        },
+      },
+    });
+
+    it('should not use the polymorphic prop if polymorphicAllowList is defined, but element is not part of polymorphicAllowList', () => {
+      expect(elementType(JSXElementMock('Spinner', [JSXAttributeMock('asChild', 'img')]).openingElement)).toBe('Spinner');
+    });
+
+    it('should use the polymorphic prop if it is in explicitly defined polymorphicAllowList', () => {
+      expect(elementType(JSXElementMock('Icon', [JSXAttributeMock('asChild', 'img')]).openingElement)).toBe('img');
+    });
+
+    it('should return the tag name provided by the polymorphic prop, "asChild", defined in the settings instead of the component mapping tag', () => {
+      expect(elementType(JSXElementMock('Box', [JSXAttributeMock('asChild', 'span')]).openingElement)).toBe('span');
+    });
+
+    it('should return the tag name provided by the component mapping if the polymorphic prop, "asChild", defined in the settings is not set', () => {
+      expect(elementType(JSXElementMock('Box', [JSXAttributeMock('as', 'a')]).openingElement)).toBe('div');
+    });
+  });
 });

flow/eslint.js

@@ -10,6 +10,7 @@ export type ESLintSettings = {
   [string]: mixed,
   'jsx-a11y'?: {
     polymorphicPropName?: string,
+    polymorphicAllowList?: Array<string>,
     components?: {[string]: string},
   },
 }

src/util/getElementType.js

@@ -4,18 +4,27 @@
 
 import type { JSXOpeningElement } from 'ast-types-flow';
 import hasOwn from 'hasown';
+import includes from 'array-includes';
 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;
+  const polymorphicAllowList = settings['jsx-a11y']?.polymorphicAllowList;
+
   const componentMap = settings['jsx-a11y']?.components;
 
   return (node: JSXOpeningElement): string => {
     const polymorphicProp = polymorphicPropName ? getLiteralPropValue(getProp(node.attributes, polymorphicPropName)) : undefined;
-    const rawType = polymorphicProp ?? elementType(node);
+
+    let rawType = elementType(node);
+    if (polymorphicProp) {
+      if (!polymorphicAllowList || includes(polymorphicAllowList, rawType)) {
+        rawType = polymorphicProp;
+      }
+    }
 
     if (!componentMap) {
       return rawType;