[New] allow polymorphic linting to be restricted to specified components

README.md

@@ -221,6 +221,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

@@ -106,5 +106,49 @@ test('getElementType', (t) => {
     st.end();
   });
 
+  t.test('polymorphicPropName settings and explicitly defined polymorphicAllowList in context', (st) => {
+    const elementType = getElementType({
+      settings: {
+        'jsx-a11y': {
+          polymorphicPropName: 'asChild',
+          polymorphicAllowList: [
+            'Box',
+            'Icon',
+          ],
+          components: {
+            Box: 'div',
+            Icon: 'svg',
+          },
+        },
+      },
+    });
+
+    st.equal(
+      elementType(JSXElementMock('Spinner', [JSXAttributeMock('asChild', 'img')]).openingElement),
+      'Spinner',
+      'does not use the polymorphic prop if polymorphicAllowList is defined, but element is not part of polymorphicAllowList',
+    );
+
+    st.equal(
+      elementType(JSXElementMock('Icon', [JSXAttributeMock('asChild', 'img')]).openingElement),
+      'img',
+      'uses the polymorphic prop if it is in explicitly defined polymorphicAllowList',
+    );
+
+    st.equal(
+      elementType(JSXElementMock('Box', [JSXAttributeMock('asChild', 'span')]).openingElement),
+      'span',
+      'returns the tag name provided by the polymorphic prop, "asChild", defined in the settings instead of the component mapping tag',
+    );
+
+    st.equal(
+      elementType(JSXElementMock('Box', [JSXAttributeMock('as', 'a')]).openingElement),
+      'div',
+      'returns the tag name provided by the component mapping if the polymorphic prop, "asChild", defined in the settings is not set',
+    );
+
+    st.end();
+  });
+
   t.end();
 });

flow/eslint.js

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

src/util/getElementType.js

@@ -4,18 +4,28 @@
 
 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
+      && (!polymorphicAllowList || includes(polymorphicAllowList, rawType))
+    ) {
+      rawType = polymorphicProp;
+    }
 
     if (!componentMap) {
       return rawType;