From cc2c3d1d7e37461daf0a4618bbca3b640301c92e Mon Sep 17 00:00:00 2001
From: Sarah Harris <sarah.harris@gusto.com>
Date: Wed, 9 Jul 2025 14:53:09 -0400
Subject: [PATCH 1/9] Adds custom config option for
 no-static-element-interactions to allow attributes that render down to
 specific native ones

---
 .../no-static-element-interactions-test.js    | 21 ++++++++++
 src/rules/no-static-element-interactions.js   |  3 +-
 src/util/isInteractiveElement.js              | 42 ++++++++++++++++++-
 3 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/__tests__/src/rules/no-static-element-interactions-test.js b/__tests__/src/rules/no-static-element-interactions-test.js
index fa1705651..5024b5e2b 100644
--- a/__tests__/src/rules/no-static-element-interactions-test.js
+++ b/__tests__/src/rules/no-static-element-interactions-test.js
@@ -29,11 +29,25 @@ const expectedError = {
 
 const ruleName = 'no-static-element-interactions';
 
+const customOptions = [{
+  a: {
+    attributes: {
+      href: ['to', 'href'],
+    },
+  },
+  button: {
+    attributes: {
+      onClick: ['onClick', 'handleClick'],
+    },
+  },
+}];
+
 const componentsSettings = {
   'jsx-a11y': {
     components: {
       Button: 'button',
       TestComponent: 'div',
+      Link: 'a',
     },
   },
 };
@@ -82,6 +96,10 @@ const alwaysValid = [
   { code: '<textarea onClick={() => void 0} className="foo" />' },
   { code: '<a onClick={() => void 0} href="http://x.y.z" />' },
   { code: '<a onClick={() => void 0} href="http://x.y.z" tabIndex="0" />' },
+  { code: '<a onClick={() => void 0} to="path/to/page" />', options: customOptions },
+  { code: '<button handleClick={() => void 0} />', options: customOptions },
+  { code: '<Link onClick={() => void 0} to="path/to/page" />', settings: componentsSettings, options: customOptions },
+  { code: '<Button handleClick={() => void 0} />', settings: componentsSettings, options: customOptions },
   { code: '<audio onClick={() => {}} />;' },
   { code: '<form onClick={() => {}} />;' },
   { code: '<form onSubmit={() => {}} />;' },
@@ -356,6 +374,9 @@ const neverValid = [
   { code: '<div onMouseUp={() => {}} />;', errors: [expectedError] },
   // Custom components
   { code: '<TestComponent onClick={doFoo} />', settings: componentsSettings, errors: [expectedError] },
+  // Components without custom options
+  { code: '<a onClick={() => void 0} to="path/to/page" />', errors: [expectedError] },
+  { code: '<TestComponent onClick={() => void 0} to="path/to/page" />', settings: componentsSettings, errors: [expectedError] },
 ];
 
 const recommendedOptions = configs.recommended.rules[`jsx-a11y/${ruleName}`][1] || {};
diff --git a/src/rules/no-static-element-interactions.js b/src/rules/no-static-element-interactions.js
index 038d7c1e4..4f0b56f9c 100644
--- a/src/rules/no-static-element-interactions.js
+++ b/src/rules/no-static-element-interactions.js
@@ -59,6 +59,7 @@ export default ({
         const {
           allowExpressionValues,
           handlers = defaultInteractiveProps,
+          ...elementOptions
         } = (options[0] || {});
 
         const hasInteractiveProps = handlers
@@ -83,7 +84,7 @@ export default ({
           return;
         }
         if (
-          isInteractiveElement(type, attributes)
+          isInteractiveElement(type, attributes, elementOptions)
           || isInteractiveRole(type, attributes)
           || isNonInteractiveElement(type, attributes)
           || isNonInteractiveRole(type, attributes)
diff --git a/src/util/isInteractiveElement.js b/src/util/isInteractiveElement.js
index 7acd4867c..a17b02d40 100644
--- a/src/util/isInteractiveElement.js
+++ b/src/util/isInteractiveElement.js
@@ -14,6 +14,7 @@ import {
 import includes from 'array-includes';
 import flatMap from 'array.prototype.flatmap';
 
+import { getProp, getPropValue } from 'jsx-ast-utils';
 import attributesComparator from './attributesComparator';
 
 const roleKeys = roles.keys();
@@ -68,7 +69,7 @@ const interactiveElementAXObjectSchemas = flatMap(
   ([elementSchema, AXObjectsArr]) => (AXObjectsArr.every((role): boolean => interactiveAXObjects.has(role)) ? [elementSchema] : []),
 );
 
-function checkIsInteractiveElement(tagName, attributes): boolean {
+function checkIsInteractiveElement(tagName, attributes, options = {}): boolean {
   function elementSchemaMatcher(elementSchema) {
     return (
       tagName === elementSchema.name
@@ -76,6 +77,42 @@ function checkIsInteractiveElement(tagName, attributes): boolean {
     );
   }
 
+  function isInteractiveElementWithCustomOptions() {
+    const elementConfig = options[tagName];
+
+    if (!elementConfig) return false;
+
+    return Object.keys(elementConfig.attributes).some((standardAttr) => {
+      const customAttrs = elementConfig.attributes[standardAttr];
+
+      const validCustomAttr = customAttrs.find((customAttr) => {
+        if (customAttr === standardAttr) return false;
+        const customProp = getProp(attributes, customAttr);
+        return customProp && getPropValue(customProp) != null;
+      });
+
+      if (validCustomAttr) {
+        const originalProp = getProp(attributes, validCustomAttr);
+        const standardProp = {
+          ...originalProp,
+          name: {
+            ...originalProp.name,
+            name: standardAttr,
+          },
+        };
+
+        return checkIsInteractiveElement(tagName, [...attributes, standardProp], {});
+      }
+
+      return false;
+    });
+  }
+
+  // Checks if there are custom options for this element
+  if (options && Object.keys(options).length > 0) {
+    return isInteractiveElementWithCustomOptions();
+  }
+
   // Check in elementRoles for inherent interactive role associations for
   // this element.
   const isInherentInteractiveElement = interactiveElementRoleSchemas.some(elementSchemaMatcher);
@@ -106,6 +143,7 @@ function checkIsInteractiveElement(tagName, attributes): boolean {
 const isInteractiveElement = (
   tagName: string,
   attributes: Array<Node>,
+  options: Object = {},
 ): boolean => {
   // Do not test higher level JSX components, as we do not know what
   // low-level DOM element this maps to.
@@ -113,7 +151,7 @@ const isInteractiveElement = (
     return false;
   }
 
-  return checkIsInteractiveElement(tagName, attributes);
+  return checkIsInteractiveElement(tagName, attributes, options);
 };
 
 export default isInteractiveElement;

From 7a4a9c5f3810f031cc8b6f792e982675b1a9181d Mon Sep 17 00:00:00 2001
From: Sarah Harris <sarah.harris@gusto.com>
Date: Wed, 9 Jul 2025 15:26:12 -0400
Subject: [PATCH 2/9] [New]: add attributes rule option for
 `no-static-element-interactions` which allows custom mapping of attributes to
 native ones

---
 .../no-static-element-interactions-test.js    | 28 +++++----
 docs/rules/no-static-element-interactions.md  | 59 ++++++++++++++-----
 src/util/isInteractiveElement.js              | 10 ++--
 3 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/__tests__/src/rules/no-static-element-interactions-test.js b/__tests__/src/rules/no-static-element-interactions-test.js
index 5024b5e2b..18fdfaaa0 100644
--- a/__tests__/src/rules/no-static-element-interactions-test.js
+++ b/__tests__/src/rules/no-static-element-interactions-test.js
@@ -29,18 +29,24 @@ const expectedError = {
 
 const ruleName = 'no-static-element-interactions';
 
-const customOptions = [{
-  a: {
-    attributes: {
-      href: ['to', 'href'],
-    },
-  },
-  button: {
-    attributes: {
-      onClick: ['onClick', 'handleClick'],
-    },
+const customOptions = [
+  {
+    attributes: [
+      {
+        components: ['a', 'Link'],
+        attributes: {
+          href: ['to', 'href'],
+        },
+      },
+      {
+        components: ['button', 'Button'],
+        attributes: {
+          onClick: ['onClick', 'handleClick'],
+        },
+      },
+    ],
   },
-}];
+];
 
 const componentsSettings = {
   'jsx-a11y': {
diff --git a/docs/rules/no-static-element-interactions.md b/docs/rules/no-static-element-interactions.md
index 147ea1b2a..6372d999b 100644
--- a/docs/rules/no-static-element-interactions.md
+++ b/docs/rules/no-static-element-interactions.md
@@ -21,24 +21,25 @@ Indicate the element's role with the `role` attribute:
   onClick={onClickHandler}
   onKeyPress={onKeyPressHandler}
   role="button"
-  tabindex="0">
+  tabindex="0"
+>
   Save
 </div>
 ```
 
 Common interactive roles include:
 
-  1. `button`
-  1. `link`
-  1. `checkbox`
-  1. `menuitem`
-  1. `menuitemcheckbox`
-  1. `menuitemradio`
-  1. `option`
-  1. `radio`
-  1. `searchbox`
-  1. `switch`
-  1. `textbox`
+1. `button`
+1. `link`
+1. `checkbox`
+1. `menuitem`
+1. `menuitemcheckbox`
+1. `menuitemradio`
+1. `option`
+1. `radio`
+1. `searchbox`
+1. `switch`
+1. `textbox`
 
 Note: Adding a role to your element does **not** add behavior. When a semantic HTML element like `<button>` is used, then it will also respond to Enter key presses when it has focus. The developer is responsible for providing the expected behavior of an element that the role suggests it would have: focusability and key press support.
 
@@ -47,12 +48,16 @@ Note: Adding a role to your element does **not** add behavior. When a semantic H
 If your element is catching bubbled click or key events from descendant elements, there are no appropriate roles for your element: you will have to deactivate the rule. Consider explaining the reason for disabling the rule as well.
 
 ```jsx
-{/* The <div> element has a child <button> element that allows keyboard interaction */}
-{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+{
+  /* The <div> element has a child <button> element that allows keyboard interaction */
+}
+{
+  /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
+}
 <div onClick={this.handleButtonClick}>
   <button>Save</button>
   <button>Cancel</button>
-</div>
+</div>;
 ```
 
 Do not use the role `presentation` on the element: it removes the element's semantics, and may also remove its children's semantics, creating big issues with assistive technology.
@@ -74,11 +79,23 @@ You may configure which handler props should be taken into account when applying
       'onKeyUp',
     ],
     allowExpressionValues: true,
+    attributes: [
+      {
+        components: ['a', 'Link'],
+        attributes: {
+          href: ['to', 'href'],
+        },
+      },
+    ],
   },
 ],
 ```
 
-Adjust the list of handler prop names in the handlers array to increase or decrease the coverage surface of this rule in your codebase.
+### `handlers`
+
+Adjust the list of handler prop names in the `handlers` array to increase or decrease the coverage surface of this rule in your codebase.
+
+### `allowExpressionValues`
 
 The `allowExpressionValues` option determines whether the `role` attribute is allowed to be assigned using an expression. For example, the following would pass in recommended mode if `allowExpressionValues` is set to be `true`:
 
@@ -88,6 +105,16 @@ The `allowExpressionValues` option determines whether the `role` attribute is al
 <div role={isButton ? "button" : "link"} onClick={() => {}} />;
 ```
 
+### `attributes`
+
+The `attributes` array allows to set custom attributes for a given list of components. This is useful in cases where you are utilizing libraries that may have different prop names mapped to a native attribute (e.g., `to` being used for `href`)
+
+```jsx
+// these will be valid given the `attributes` option above
+<a onClick={() => {}} className="foo" to="some/path" />
+<Link onClick={() => {}} className="foo" to="some/path" />
+```
+
 ### Succeed
 
 ```jsx
diff --git a/src/util/isInteractiveElement.js b/src/util/isInteractiveElement.js
index a17b02d40..7730aab11 100644
--- a/src/util/isInteractiveElement.js
+++ b/src/util/isInteractiveElement.js
@@ -78,12 +78,12 @@ function checkIsInteractiveElement(tagName, attributes, options = {}): boolean {
   }
 
   function isInteractiveElementWithCustomOptions() {
-    const elementConfig = options[tagName];
+    const matchingConfig = options.attributes.find((config) => config.components && config.components.includes(tagName));
 
-    if (!elementConfig) return false;
+    if (!matchingConfig) return false;
 
-    return Object.keys(elementConfig.attributes).some((standardAttr) => {
-      const customAttrs = elementConfig.attributes[standardAttr];
+    return Object.keys(matchingConfig.attributes).some((standardAttr) => {
+      const customAttrs = matchingConfig.attributes[standardAttr];
 
       const validCustomAttr = customAttrs.find((customAttr) => {
         if (customAttr === standardAttr) return false;
@@ -109,7 +109,7 @@ function checkIsInteractiveElement(tagName, attributes, options = {}): boolean {
   }
 
   // Checks if there are custom options for this element
-  if (options && Object.keys(options).length > 0) {
+  if (options && options.attributes && options.attributes.length > 0) {
     return isInteractiveElementWithCustomOptions();
   }
 

From d1fa08736da6af148afeb865691c31fc973b065b Mon Sep 17 00:00:00 2001
From: Sarah Harris <sarah.harris@gusto.com>
Date: Wed, 16 Jul 2025 15:58:32 -0400
Subject: [PATCH 3/9] [Feat]: add `attributes` option to the global
 `components` option

---
 .../no-static-element-interactions-test.js    | 36 ++++++-------
 docs/rules/no-static-element-interactions.md  | 24 +--------
 flow/eslint.js                                |  2 +-
 src/rules/no-static-element-interactions.js   |  6 +--
 src/util/getAttributes.js                     | 50 +++++++++++++++++++
 src/util/getElementType.js                    | 15 +++++-
 src/util/isInteractiveElement.js              | 42 +---------------
 7 files changed, 86 insertions(+), 89 deletions(-)
 create mode 100644 src/util/getAttributes.js

diff --git a/__tests__/src/rules/no-static-element-interactions-test.js b/__tests__/src/rules/no-static-element-interactions-test.js
index 18fdfaaa0..e6f058f31 100644
--- a/__tests__/src/rules/no-static-element-interactions-test.js
+++ b/__tests__/src/rules/no-static-element-interactions-test.js
@@ -29,26 +29,22 @@ const expectedError = {
 
 const ruleName = 'no-static-element-interactions';
 
-const customOptions = [
-  {
-    attributes: [
-      {
-        components: ['a', 'Link'],
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Button: 'button',
+      TestComponent: 'div',
+      Link: {
+        components: 'a',
         attributes: {
           href: ['to', 'href'],
         },
       },
-      {
-        components: ['button', 'Button'],
-        attributes: {
-          onClick: ['onClick', 'handleClick'],
-        },
-      },
-    ],
+    },
   },
-];
+};
 
-const componentsSettings = {
+const componentsSettingNoAttributes = {
   'jsx-a11y': {
     components: {
       Button: 'button',
@@ -102,10 +98,8 @@ const alwaysValid = [
   { code: '<textarea onClick={() => void 0} className="foo" />' },
   { code: '<a onClick={() => void 0} href="http://x.y.z" />' },
   { code: '<a onClick={() => void 0} href="http://x.y.z" tabIndex="0" />' },
-  { code: '<a onClick={() => void 0} to="path/to/page" />', options: customOptions },
-  { code: '<button handleClick={() => void 0} />', options: customOptions },
-  { code: '<Link onClick={() => void 0} to="path/to/page" />', settings: componentsSettings, options: customOptions },
-  { code: '<Button handleClick={() => void 0} />', settings: componentsSettings, options: customOptions },
+  { code: '<Link onClick={() => void 0} to="path/to/page" />', settings: componentsSettings },
+  { code: '<Link onClick={() => void 0} href="http://x.y.z" />', settings: componentsSettings },
   { code: '<audio onClick={() => {}} />;' },
   { code: '<form onClick={() => {}} />;' },
   { code: '<form onSubmit={() => {}} />;' },
@@ -379,10 +373,10 @@ const neverValid = [
   { code: '<div onMouseDown={() => {}} />;', errors: [expectedError] },
   { code: '<div onMouseUp={() => {}} />;', errors: [expectedError] },
   // Custom components
-  { code: '<TestComponent onClick={doFoo} />', settings: componentsSettings, errors: [expectedError] },
-  // Components without custom options
-  { code: '<a onClick={() => void 0} to="path/to/page" />', errors: [expectedError] },
   { code: '<TestComponent onClick={() => void 0} to="path/to/page" />', settings: componentsSettings, errors: [expectedError] },
+  { code: '<Link onClick={() => void 0} to="path/to/page" />', settings: componentsSettingNoAttributes, errors: [expectedError] },
+  // `a` with a `to` is not valid, only custom components listed in `components`
+  { code: '<a onClick={() => void 0} to="path/to/page" />', settings: componentsSettings, errors: [expectedError] },
 ];
 
 const recommendedOptions = configs.recommended.rules[`jsx-a11y/${ruleName}`][1] || {};
diff --git a/docs/rules/no-static-element-interactions.md b/docs/rules/no-static-element-interactions.md
index 6372d999b..4dc5b5a56 100644
--- a/docs/rules/no-static-element-interactions.md
+++ b/docs/rules/no-static-element-interactions.md
@@ -79,23 +79,11 @@ You may configure which handler props should be taken into account when applying
       'onKeyUp',
     ],
     allowExpressionValues: true,
-    attributes: [
-      {
-        components: ['a', 'Link'],
-        attributes: {
-          href: ['to', 'href'],
-        },
-      },
-    ],
   },
 ],
 ```
 
-### `handlers`
-
-Adjust the list of handler prop names in the `handlers` array to increase or decrease the coverage surface of this rule in your codebase.
-
-### `allowExpressionValues`
+Adjust the list of handler prop names in the handlers array to increase or decrease the coverage surface of this rule in your codebase.
 
 The `allowExpressionValues` option determines whether the `role` attribute is allowed to be assigned using an expression. For example, the following would pass in recommended mode if `allowExpressionValues` is set to be `true`:
 
@@ -105,16 +93,6 @@ The `allowExpressionValues` option determines whether the `role` attribute is al
 <div role={isButton ? "button" : "link"} onClick={() => {}} />;
 ```
 
-### `attributes`
-
-The `attributes` array allows to set custom attributes for a given list of components. This is useful in cases where you are utilizing libraries that may have different prop names mapped to a native attribute (e.g., `to` being used for `href`)
-
-```jsx
-// these will be valid given the `attributes` option above
-<a onClick={() => {}} className="foo" to="some/path" />
-<Link onClick={() => {}} className="foo" to="some/path" />
-```
-
 ### Succeed
 
 ```jsx
diff --git a/flow/eslint.js b/flow/eslint.js
index af299b6b3..10426ea44 100644
--- a/flow/eslint.js
+++ b/flow/eslint.js
@@ -9,7 +9,7 @@ export type ESLintReport = {
 export type ESLintSettings = {
   [string]: mixed,
   'jsx-a11y'?: {
-    components?: { [string]: string },
+    components?: { [string]: string | { component: string, attributes: { [string]: Array<string> } } },
     attributes?: { for?: string[] },
     polymorphicPropName?: string,
     polymorphicAllowList?: Array<string>,
diff --git a/src/rules/no-static-element-interactions.js b/src/rules/no-static-element-interactions.js
index 4f0b56f9c..dcf6fb57d 100644
--- a/src/rules/no-static-element-interactions.js
+++ b/src/rules/no-static-element-interactions.js
@@ -27,6 +27,7 @@ import isNonInteractiveElement from '../util/isNonInteractiveElement';
 import isNonInteractiveRole from '../util/isNonInteractiveRole';
 import isNonLiteralProperty from '../util/isNonLiteralProperty';
 import isPresentationRole from '../util/isPresentationRole';
+import getAttributes from '../util/getAttributes';
 
 const errorMessage = 'Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.';
 
@@ -53,13 +54,12 @@ export default ({
     const elementType = getElementType(context);
     return {
       JSXOpeningElement: (node: JSXOpeningElement) => {
-        const { attributes } = node;
         const type = elementType(node);
+        const attributes = getAttributes(node, type, context);
 
         const {
           allowExpressionValues,
           handlers = defaultInteractiveProps,
-          ...elementOptions
         } = (options[0] || {});
 
         const hasInteractiveProps = handlers
@@ -84,7 +84,7 @@ export default ({
           return;
         }
         if (
-          isInteractiveElement(type, attributes, elementOptions)
+          isInteractiveElement(type, attributes)
           || isInteractiveRole(type, attributes)
           || isNonInteractiveElement(type, attributes)
           || isNonInteractiveRole(type, attributes)
diff --git a/src/util/getAttributes.js b/src/util/getAttributes.js
new file mode 100644
index 000000000..3677d220e
--- /dev/null
+++ b/src/util/getAttributes.js
@@ -0,0 +1,50 @@
+import { getProp } from 'jsx-ast-utils';
+
+const getAttributes = (node, type, context) => {
+  const { settings } = context;
+  const { attributes } = node;
+  const components = settings['jsx-a11y']?.components;
+
+  if (!components || !type) {
+    return attributes;
+  }
+
+  const componentConfig = Object.entries(components).find(([, config]) => (
+    config && typeof config === 'object' && config.component === type
+  ));
+
+  if (!componentConfig) {
+    return attributes;
+  }
+
+  const [, config] = componentConfig;
+  const attributeMap = config && typeof config === 'object' ? config.attributes : null;
+
+  if (!attributeMap || typeof attributeMap !== 'object') {
+    return attributes;
+  }
+
+  const mappedAttributes = [...attributes];
+
+  Object.entries(attributeMap).forEach(([originalAttr, mappedAttrs]) => {
+    if (Array.isArray(mappedAttrs)) {
+      mappedAttrs.forEach((mappedAttr) => {
+        const mappedProp = getProp(attributes, mappedAttr);
+        if (mappedProp) {
+          const newAttribute = {
+            ...mappedProp,
+            name: {
+              ...mappedProp.name,
+              name: originalAttr,
+            },
+          };
+          mappedAttributes.push(newAttribute);
+        }
+      });
+    }
+  });
+
+  return mappedAttributes;
+};
+
+export default getAttributes;
diff --git a/src/util/getElementType.js b/src/util/getElementType.js
index 1fdab7216..2f141debd 100644
--- a/src/util/getElementType.js
+++ b/src/util/getElementType.js
@@ -31,7 +31,20 @@ const getElementType = (context: ESLintContext): ((node: JSXOpeningElement) => s
       return rawType;
     }
 
-    return hasOwn(componentMap, rawType) ? componentMap[rawType] : rawType;
+    const componentType = componentMap[rawType];
+
+    if (typeof componentType === 'object') {
+      const customComponent = Object.entries(componentType).find(([key]) => key === rawType);
+
+      if (customComponent) {
+        [rawType] = customComponent;
+        return hasOwn(componentMap, rawType) ? rawType : rawType;
+      }
+    } else if (typeof componentType === 'string') {
+      return hasOwn(componentMap, rawType) ? componentType : rawType;
+    }
+
+    return rawType;
   };
 };
 
diff --git a/src/util/isInteractiveElement.js b/src/util/isInteractiveElement.js
index 7730aab11..7acd4867c 100644
--- a/src/util/isInteractiveElement.js
+++ b/src/util/isInteractiveElement.js
@@ -14,7 +14,6 @@ import {
 import includes from 'array-includes';
 import flatMap from 'array.prototype.flatmap';
 
-import { getProp, getPropValue } from 'jsx-ast-utils';
 import attributesComparator from './attributesComparator';
 
 const roleKeys = roles.keys();
@@ -69,7 +68,7 @@ const interactiveElementAXObjectSchemas = flatMap(
   ([elementSchema, AXObjectsArr]) => (AXObjectsArr.every((role): boolean => interactiveAXObjects.has(role)) ? [elementSchema] : []),
 );
 
-function checkIsInteractiveElement(tagName, attributes, options = {}): boolean {
+function checkIsInteractiveElement(tagName, attributes): boolean {
   function elementSchemaMatcher(elementSchema) {
     return (
       tagName === elementSchema.name
@@ -77,42 +76,6 @@ function checkIsInteractiveElement(tagName, attributes, options = {}): boolean {
     );
   }
 
-  function isInteractiveElementWithCustomOptions() {
-    const matchingConfig = options.attributes.find((config) => config.components && config.components.includes(tagName));
-
-    if (!matchingConfig) return false;
-
-    return Object.keys(matchingConfig.attributes).some((standardAttr) => {
-      const customAttrs = matchingConfig.attributes[standardAttr];
-
-      const validCustomAttr = customAttrs.find((customAttr) => {
-        if (customAttr === standardAttr) return false;
-        const customProp = getProp(attributes, customAttr);
-        return customProp && getPropValue(customProp) != null;
-      });
-
-      if (validCustomAttr) {
-        const originalProp = getProp(attributes, validCustomAttr);
-        const standardProp = {
-          ...originalProp,
-          name: {
-            ...originalProp.name,
-            name: standardAttr,
-          },
-        };
-
-        return checkIsInteractiveElement(tagName, [...attributes, standardProp], {});
-      }
-
-      return false;
-    });
-  }
-
-  // Checks if there are custom options for this element
-  if (options && options.attributes && options.attributes.length > 0) {
-    return isInteractiveElementWithCustomOptions();
-  }
-
   // Check in elementRoles for inherent interactive role associations for
   // this element.
   const isInherentInteractiveElement = interactiveElementRoleSchemas.some(elementSchemaMatcher);
@@ -143,7 +106,6 @@ function checkIsInteractiveElement(tagName, attributes, options = {}): boolean {
 const isInteractiveElement = (
   tagName: string,
   attributes: Array<Node>,
-  options: Object = {},
 ): boolean => {
   // Do not test higher level JSX components, as we do not know what
   // low-level DOM element this maps to.
@@ -151,7 +113,7 @@ const isInteractiveElement = (
     return false;
   }
 
-  return checkIsInteractiveElement(tagName, attributes, options);
+  return checkIsInteractiveElement(tagName, attributes);
 };
 
 export default isInteractiveElement;

From f43e0c76dd5f1e8a190e00d7395d502ba3d6d134 Mon Sep 17 00:00:00 2001
From: Sarah Harris <sarah.harris@gusto.com>
Date: Mon, 21 Jul 2025 14:43:17 -0400
Subject: [PATCH 4/9] [chore]: revert md format changes

---
 docs/rules/no-static-element-interactions.md | 35 +++++++++-----------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/docs/rules/no-static-element-interactions.md b/docs/rules/no-static-element-interactions.md
index 4dc5b5a56..147ea1b2a 100644
--- a/docs/rules/no-static-element-interactions.md
+++ b/docs/rules/no-static-element-interactions.md
@@ -21,25 +21,24 @@ Indicate the element's role with the `role` attribute:
   onClick={onClickHandler}
   onKeyPress={onKeyPressHandler}
   role="button"
-  tabindex="0"
->
+  tabindex="0">
   Save
 </div>
 ```
 
 Common interactive roles include:
 
-1. `button`
-1. `link`
-1. `checkbox`
-1. `menuitem`
-1. `menuitemcheckbox`
-1. `menuitemradio`
-1. `option`
-1. `radio`
-1. `searchbox`
-1. `switch`
-1. `textbox`
+  1. `button`
+  1. `link`
+  1. `checkbox`
+  1. `menuitem`
+  1. `menuitemcheckbox`
+  1. `menuitemradio`
+  1. `option`
+  1. `radio`
+  1. `searchbox`
+  1. `switch`
+  1. `textbox`
 
 Note: Adding a role to your element does **not** add behavior. When a semantic HTML element like `<button>` is used, then it will also respond to Enter key presses when it has focus. The developer is responsible for providing the expected behavior of an element that the role suggests it would have: focusability and key press support.
 
@@ -48,16 +47,12 @@ Note: Adding a role to your element does **not** add behavior. When a semantic H
 If your element is catching bubbled click or key events from descendant elements, there are no appropriate roles for your element: you will have to deactivate the rule. Consider explaining the reason for disabling the rule as well.
 
 ```jsx
-{
-  /* The <div> element has a child <button> element that allows keyboard interaction */
-}
-{
-  /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
-}
+{/* The <div> element has a child <button> element that allows keyboard interaction */}
+{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
 <div onClick={this.handleButtonClick}>
   <button>Save</button>
   <button>Cancel</button>
-</div>;
+</div>
 ```
 
 Do not use the role `presentation` on the element: it removes the element's semantics, and may also remove its children's semantics, creating big issues with assistive technology.

From c5f68b9b56f291b30dfc17c3dfb27b4e908480fc Mon Sep 17 00:00:00 2001
From: Sarah Harris <sarah.harris@gusto.com>
Date: Tue, 22 Jul 2025 09:27:09 -0400
Subject: [PATCH 5/9] [chore]: tests, getAttributes clean-up

---
 __tests__/src/util/getAttributes-test.js | 98 ++++++++++++++++++++++++
 src/util/getAttributes.js                | 76 ++++++++----------
 2 files changed, 130 insertions(+), 44 deletions(-)
 create mode 100644 __tests__/src/util/getAttributes-test.js

diff --git a/__tests__/src/util/getAttributes-test.js b/__tests__/src/util/getAttributes-test.js
new file mode 100644
index 000000000..40425b857
--- /dev/null
+++ b/__tests__/src/util/getAttributes-test.js
@@ -0,0 +1,98 @@
+import test from 'tape';
+
+import getAttributes from '../../../src/util/getAttributes';
+import JSXElementMock from '../../../__mocks__/JSXElementMock';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+
+const componentsSettings = {
+  'jsx-a11y': {
+    components: {
+      Button: 'button',
+      MyInput: {
+        component: 'input',
+        attributes: {
+          type: ['myType'],
+        },
+      },
+      Link: {
+        component: 'a',
+        attributes: {
+          href: ['to', 'href'],
+          onClick: ['onClick', 'handleClick'],
+        },
+      },
+    },
+  },
+};
+
+test('getAttributes', (t) => {
+  t.test('no settings in context', (st) => {
+    st.deepEqual(
+      getAttributes(
+        JSXElementMock('input').openingElement,
+        'input',
+        {},
+      ),
+      [],
+      'returns no attributes',
+    );
+
+    st.deepEqual(
+      getAttributes(
+        JSXElementMock('input', [JSXAttributeMock('type', 'text')]).openingElement,
+        'input',
+        {},
+      ),
+      [JSXAttributeMock('type', 'text')],
+      'returns raw attributes if no settings are provided',
+    );
+
+    st.end();
+  });
+
+  t.test('components settings in context', (st) => {
+    st.deepEqual(
+      getAttributes(
+        JSXElementMock('MyInput', [JSXAttributeMock('type', 'text')]).openingElement,
+        'input',
+        { settings: componentsSettings },
+      ),
+      [JSXAttributeMock('myType', 'text')],
+      'should expect a custom attribute name mapping to `myType`',
+    );
+
+    st.deepEqual(
+      getAttributes(
+        JSXElementMock('input', [JSXAttributeMock('type', 'text')]).openingElement,
+        'input',
+        { settings: componentsSettings },
+      ),
+      [JSXAttributeMock('type', 'text')],
+      'should not expect a custom attribute name when native element is used',
+    );
+
+    st.deepEqual(
+      getAttributes(
+        JSXElementMock('Button', [JSXAttributeMock('type', 'text')]).openingElement,
+        'button',
+        { settings: componentsSettings },
+      ),
+      [JSXAttributeMock('type', 'text')],
+      'should not expect a custom attribute name when no custom attributes configured',
+    );
+
+    st.deepEqual(
+      getAttributes(
+        JSXElementMock('Link', [JSXAttributeMock('href', '/path'), JSXAttributeMock('onClick', 'handler')]).openingElement,
+        'a',
+        { settings: componentsSettings },
+      ),
+      [JSXAttributeMock('to', '/path'), JSXAttributeMock('href', '/path'), JSXAttributeMock('onClick', 'handler'), JSXAttributeMock('handleClick', 'handler')],
+      'should map multiple attributes according to configuration',
+    );
+
+    st.end();
+  });
+
+  t.end();
+});
diff --git a/src/util/getAttributes.js b/src/util/getAttributes.js
index 3677d220e..e68fe1e3d 100644
--- a/src/util/getAttributes.js
+++ b/src/util/getAttributes.js
@@ -1,47 +1,35 @@
-import { getProp } from 'jsx-ast-utils';
-
-const getAttributes = (node, type, context) => {
-  const { settings } = context;
-  const { attributes } = node;
-  const components = settings['jsx-a11y']?.components;
-
-  if (!components || !type) {
-    return attributes;
-  }
-
-  const componentConfig = Object.entries(components).find(([, config]) => (
-    config && typeof config === 'object' && config.component === type
-  ));
-
-  if (!componentConfig) {
-    return attributes;
-  }
-
-  const [, config] = componentConfig;
-  const attributeMap = config && typeof config === 'object' ? config.attributes : null;
-
-  if (!attributeMap || typeof attributeMap !== 'object') {
-    return attributes;
-  }
-
-  const mappedAttributes = [...attributes];
-
-  Object.entries(attributeMap).forEach(([originalAttr, mappedAttrs]) => {
-    if (Array.isArray(mappedAttrs)) {
-      mappedAttrs.forEach((mappedAttr) => {
-        const mappedProp = getProp(attributes, mappedAttr);
-        if (mappedProp) {
-          const newAttribute = {
-            ...mappedProp,
-            name: {
-              ...mappedProp.name,
-              name: originalAttr,
-            },
-          };
-          mappedAttributes.push(newAttribute);
-        }
-      });
-    }
+// @flow
+
+import type { Node, JSXOpeningElement } from 'ast-types-flow';
+import { getProp, elementType } from 'jsx-ast-utils';
+import type { ESLintContext } from '../../flow/eslint';
+
+const getAttributes = (node: JSXOpeningElement, type: string, context: ESLintContext): Node[] => {
+  const { attributes: rawAttributes } = node;
+  const { components } = context?.settings?.['jsx-a11y'] || {};
+
+  if (!type || !components) return rawAttributes;
+
+  const jsxElementName = elementType(node);
+  const componentConfig = components[jsxElementName];
+
+  if (!componentConfig || componentConfig.component !== type) return rawAttributes;
+
+  const { attributes: settingsAttributes } = typeof componentConfig === 'object' ? componentConfig : {};
+
+  if (!settingsAttributes || typeof settingsAttributes !== 'object') return rawAttributes;
+
+  const mappedAttributes = Object.entries(settingsAttributes).flatMap(([originalAttr, mappedAttrs]) => {
+    if (!Array.isArray(mappedAttrs)) return [];
+
+    const originalProp = getProp(rawAttributes, originalAttr);
+    return originalProp ? mappedAttrs.map((mappedAttr) => ({
+      ...originalProp,
+      name: {
+        ...originalProp.name,
+        name: mappedAttr,
+      },
+    })) : [];
   });
 
   return mappedAttributes;

From da0ca327daa9f54a3d4ad1c7d9f7b66aa8973681 Mon Sep 17 00:00:00 2001
From: Sarah Harris <sarah.harris@gusto.com>
Date: Tue, 22 Jul 2025 14:51:42 -0400
Subject: [PATCH 6/9] [chore]: rename getAttributes to getSettingsAttributes

---
 __tests__/src/util/getAttributes-test.js      | 98 -------------------
 .../src/util/getSettingsAttributes-test.js    | 63 ++++++++++++
 src/rules/no-static-element-interactions.js   | 11 ++-
 src/util/getAttributes.js                     | 38 -------
 src/util/getSettingsAttributes.js             | 59 +++++++++++
 5 files changed, 128 insertions(+), 141 deletions(-)
 delete mode 100644 __tests__/src/util/getAttributes-test.js
 create mode 100644 __tests__/src/util/getSettingsAttributes-test.js
 delete mode 100644 src/util/getAttributes.js
 create mode 100644 src/util/getSettingsAttributes.js

diff --git a/__tests__/src/util/getAttributes-test.js b/__tests__/src/util/getAttributes-test.js
deleted file mode 100644
index 40425b857..000000000
--- a/__tests__/src/util/getAttributes-test.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import test from 'tape';
-
-import getAttributes from '../../../src/util/getAttributes';
-import JSXElementMock from '../../../__mocks__/JSXElementMock';
-import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
-
-const componentsSettings = {
-  'jsx-a11y': {
-    components: {
-      Button: 'button',
-      MyInput: {
-        component: 'input',
-        attributes: {
-          type: ['myType'],
-        },
-      },
-      Link: {
-        component: 'a',
-        attributes: {
-          href: ['to', 'href'],
-          onClick: ['onClick', 'handleClick'],
-        },
-      },
-    },
-  },
-};
-
-test('getAttributes', (t) => {
-  t.test('no settings in context', (st) => {
-    st.deepEqual(
-      getAttributes(
-        JSXElementMock('input').openingElement,
-        'input',
-        {},
-      ),
-      [],
-      'returns no attributes',
-    );
-
-    st.deepEqual(
-      getAttributes(
-        JSXElementMock('input', [JSXAttributeMock('type', 'text')]).openingElement,
-        'input',
-        {},
-      ),
-      [JSXAttributeMock('type', 'text')],
-      'returns raw attributes if no settings are provided',
-    );
-
-    st.end();
-  });
-
-  t.test('components settings in context', (st) => {
-    st.deepEqual(
-      getAttributes(
-        JSXElementMock('MyInput', [JSXAttributeMock('type', 'text')]).openingElement,
-        'input',
-        { settings: componentsSettings },
-      ),
-      [JSXAttributeMock('myType', 'text')],
-      'should expect a custom attribute name mapping to `myType`',
-    );
-
-    st.deepEqual(
-      getAttributes(
-        JSXElementMock('input', [JSXAttributeMock('type', 'text')]).openingElement,
-        'input',
-        { settings: componentsSettings },
-      ),
-      [JSXAttributeMock('type', 'text')],
-      'should not expect a custom attribute name when native element is used',
-    );
-
-    st.deepEqual(
-      getAttributes(
-        JSXElementMock('Button', [JSXAttributeMock('type', 'text')]).openingElement,
-        'button',
-        { settings: componentsSettings },
-      ),
-      [JSXAttributeMock('type', 'text')],
-      'should not expect a custom attribute name when no custom attributes configured',
-    );
-
-    st.deepEqual(
-      getAttributes(
-        JSXElementMock('Link', [JSXAttributeMock('href', '/path'), JSXAttributeMock('onClick', 'handler')]).openingElement,
-        'a',
-        { settings: componentsSettings },
-      ),
-      [JSXAttributeMock('to', '/path'), JSXAttributeMock('href', '/path'), JSXAttributeMock('onClick', 'handler'), JSXAttributeMock('handleClick', 'handler')],
-      'should map multiple attributes according to configuration',
-    );
-
-    st.end();
-  });
-
-  t.end();
-});
diff --git a/__tests__/src/util/getSettingsAttributes-test.js b/__tests__/src/util/getSettingsAttributes-test.js
new file mode 100644
index 000000000..1d0ff8bed
--- /dev/null
+++ b/__tests__/src/util/getSettingsAttributes-test.js
@@ -0,0 +1,63 @@
+import test from 'tape';
+
+import getSettingsAttributes from '../../../src/util/getSettingsAttributes';
+import JSXElementMock from '../../../__mocks__/JSXElementMock';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+
+test('getSettingsAttributes', (t) => {
+  t.test('no settings in context', (st) => {
+    st.deepEqual(
+      getSettingsAttributes(JSXElementMock('a', [JSXAttributeMock('foo', 'path/to/page')]).openingElement, {}),
+      [JSXAttributeMock('foo', 'path/to/page')],
+      'returns existing attributes when no component settings exist',
+    );
+
+    st.deepEqual(
+      getSettingsAttributes(JSXElementMock('Link', [JSXAttributeMock('foo', 'path/to/page')]).openingElement, {}),
+      [JSXAttributeMock('foo', 'path/to/page')],
+      'returns existing attributes when no component settings exist',
+    );
+
+    st.end();
+  });
+
+  t.test('with component settings mapping', (st) => {
+    st.deepEqual(
+      getSettingsAttributes(JSXElementMock('Link', [JSXAttributeMock('foo', 'path/to/page')]).openingElement, {
+        'jsx-a11y': {
+          components: {
+            Link: {
+              component: 'a',
+              attributes: {
+                href: ['foo'],
+              },
+            },
+          },
+        },
+      }),
+      [JSXAttributeMock('href', 'path/to/page')],
+      'returns the exisiting attributes and the mapped attributes',
+    );
+
+    st.deepEqual(
+      getSettingsAttributes(JSXElementMock('a', [JSXAttributeMock('foo', 'path/to/page')]).openingElement, {
+        'jsx-a11y': {
+          components: {
+            Link: {
+              component: 'a',
+              attributes: {
+                href: ['foo'],
+              },
+            },
+          },
+        },
+      }),
+      [JSXAttributeMock('foo', 'path/to/page')],
+      'should return the existing attributes when no mapping exists',
+    );
+
+    st.end();
+  });
+
+  t.end();
+});
diff --git a/src/rules/no-static-element-interactions.js b/src/rules/no-static-element-interactions.js
index dcf6fb57d..486b8074a 100644
--- a/src/rules/no-static-element-interactions.js
+++ b/src/rules/no-static-element-interactions.js
@@ -27,7 +27,7 @@ import isNonInteractiveElement from '../util/isNonInteractiveElement';
 import isNonInteractiveRole from '../util/isNonInteractiveRole';
 import isNonLiteralProperty from '../util/isNonLiteralProperty';
 import isPresentationRole from '../util/isPresentationRole';
-import getAttributes from '../util/getAttributes';
+import getSettingsAttributes from '../util/getSettingsAttributes';
 
 const errorMessage = 'Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.';
 
@@ -50,12 +50,13 @@ export default ({
   },
 
   create: (context: ESLintContext): ESLintVisitorSelectorConfig => {
-    const { options } = context;
+    const { options, settings } = context;
     const elementType = getElementType(context);
     return {
       JSXOpeningElement: (node: JSXOpeningElement) => {
         const type = elementType(node);
-        const attributes = getAttributes(node, type, context);
+        // checking global settings for attribute mappings
+        const attributes = getSettingsAttributes(node, settings);
 
         const {
           allowExpressionValues,
@@ -64,8 +65,8 @@ export default ({
 
         const hasInteractiveProps = handlers
           .some((prop) => (
-            hasProp(attributes, prop)
-            && getPropValue(getProp(attributes, prop)) != null
+            (hasProp(attributes, prop)
+            && getPropValue(getProp(attributes, prop)) != null)
           ));
 
         if (!dom.has(type)) {
diff --git a/src/util/getAttributes.js b/src/util/getAttributes.js
deleted file mode 100644
index e68fe1e3d..000000000
--- a/src/util/getAttributes.js
+++ /dev/null
@@ -1,38 +0,0 @@
-// @flow
-
-import type { Node, JSXOpeningElement } from 'ast-types-flow';
-import { getProp, elementType } from 'jsx-ast-utils';
-import type { ESLintContext } from '../../flow/eslint';
-
-const getAttributes = (node: JSXOpeningElement, type: string, context: ESLintContext): Node[] => {
-  const { attributes: rawAttributes } = node;
-  const { components } = context?.settings?.['jsx-a11y'] || {};
-
-  if (!type || !components) return rawAttributes;
-
-  const jsxElementName = elementType(node);
-  const componentConfig = components[jsxElementName];
-
-  if (!componentConfig || componentConfig.component !== type) return rawAttributes;
-
-  const { attributes: settingsAttributes } = typeof componentConfig === 'object' ? componentConfig : {};
-
-  if (!settingsAttributes || typeof settingsAttributes !== 'object') return rawAttributes;
-
-  const mappedAttributes = Object.entries(settingsAttributes).flatMap(([originalAttr, mappedAttrs]) => {
-    if (!Array.isArray(mappedAttrs)) return [];
-
-    const originalProp = getProp(rawAttributes, originalAttr);
-    return originalProp ? mappedAttrs.map((mappedAttr) => ({
-      ...originalProp,
-      name: {
-        ...originalProp.name,
-        name: mappedAttr,
-      },
-    })) : [];
-  });
-
-  return mappedAttributes;
-};
-
-export default getAttributes;
diff --git a/src/util/getSettingsAttributes.js b/src/util/getSettingsAttributes.js
new file mode 100644
index 000000000..dfd218472
--- /dev/null
+++ b/src/util/getSettingsAttributes.js
@@ -0,0 +1,59 @@
+// @flow
+
+import type { Node, JSXOpeningElement } from 'ast-types-flow';
+import { elementType, getProp } from 'jsx-ast-utils';
+import type { ESLintSettings } from '../../flow/eslint';
+
+/**
+ * Looks at the `settings` global config for custom component attribute mappings
+ * This works for use cases where a custom component uses a prop name that renders to a specific attribute on the DOM element
+ *
+ * @example
+ * {
+ *   'jsx-a11y': {
+ *     components: {
+ *       Link: {
+ *         component: 'a',
+ *         attributes: {
+ *           href: ['foo'],
+ *         },
+ *       },
+ *     },
+ *   },
+ * }
+ *
+ * <Link foo="path/to/page" /> // will be checked as if <a href="path/to/page" />
+ */
+const getSettingsAttributes = (node: JSXOpeningElement, settings: ESLintSettings): Node[] => {
+  const { attributes: rawAttributes } = node;
+  const { components } = settings?.['jsx-a11y'] || {};
+
+  if (!components || typeof components !== 'object') return rawAttributes;
+
+  const jsxElementName = elementType(node);
+  const componentConfig = components[jsxElementName];
+
+  const { attributes: settingsAttributes } = typeof componentConfig === 'object' ? componentConfig : {};
+
+  if (!settingsAttributes || typeof settingsAttributes !== 'object') return rawAttributes;
+
+  const mappedAttributes = Object.entries(settingsAttributes).flatMap(([originalAttr, mappedAttrs]) => {
+    if (!Array.isArray(mappedAttrs)) return [];
+
+    return mappedAttrs.flatMap((mappedAttr) => {
+      const originalProp = getProp(rawAttributes, mappedAttr);
+
+      return originalProp ? [{
+        ...originalProp,
+        name: {
+          ...originalProp.name,
+          name: originalAttr,
+        },
+      }] : [];
+    });
+  });
+
+  return mappedAttributes;
+};
+
+export default getSettingsAttributes;

From 42396c2b356ead71719f9080808604680d766843 Mon Sep 17 00:00:00 2001
From: Sarah Harris <sarah.harris@gusto.com>
Date: Tue, 22 Jul 2025 15:32:06 -0400
Subject: [PATCH 7/9] [chore]: add more tests, fix logic for non-mapped attrs
 in settings

---
 .../no-static-element-interactions-test.js    | 14 +----
 .../src/util/getSettingsAttributes-test.js    | 58 ++++++++++++++++++-
 src/util/getSettingsAttributes.js             | 27 ++++++---
 3 files changed, 77 insertions(+), 22 deletions(-)

diff --git a/__tests__/src/rules/no-static-element-interactions-test.js b/__tests__/src/rules/no-static-element-interactions-test.js
index e6f058f31..c1a26b42e 100644
--- a/__tests__/src/rules/no-static-element-interactions-test.js
+++ b/__tests__/src/rules/no-static-element-interactions-test.js
@@ -35,7 +35,7 @@ const componentsSettings = {
       Button: 'button',
       TestComponent: 'div',
       Link: {
-        components: 'a',
+        component: 'a',
         attributes: {
           href: ['to', 'href'],
         },
@@ -44,16 +44,6 @@ const componentsSettings = {
   },
 };
 
-const componentsSettingNoAttributes = {
-  'jsx-a11y': {
-    components: {
-      Button: 'button',
-      TestComponent: 'div',
-      Link: 'a',
-    },
-  },
-};
-
 const alwaysValid = [
   { code: '<TestComponent onClick={doFoo} />' },
   { code: '<Button onClick={doFoo} />' },
@@ -373,8 +363,8 @@ const neverValid = [
   { code: '<div onMouseDown={() => {}} />;', errors: [expectedError] },
   { code: '<div onMouseUp={() => {}} />;', errors: [expectedError] },
   // Custom components
+  { code: '<Link onClick={() => void 0} to="path/to/page" />', settings: { 'jsx-a11y': { components: { Link: 'a' } } }, errors: [expectedError] },
   { code: '<TestComponent onClick={() => void 0} to="path/to/page" />', settings: componentsSettings, errors: [expectedError] },
-  { code: '<Link onClick={() => void 0} to="path/to/page" />', settings: componentsSettingNoAttributes, errors: [expectedError] },
   // `a` with a `to` is not valid, only custom components listed in `components`
   { code: '<a onClick={() => void 0} to="path/to/page" />', settings: componentsSettings, errors: [expectedError] },
 ];
diff --git a/__tests__/src/util/getSettingsAttributes-test.js b/__tests__/src/util/getSettingsAttributes-test.js
index 1d0ff8bed..45b033000 100644
--- a/__tests__/src/util/getSettingsAttributes-test.js
+++ b/__tests__/src/util/getSettingsAttributes-test.js
@@ -18,6 +18,14 @@ test('getSettingsAttributes', (t) => {
       'returns existing attributes when no component settings exist',
     );
 
+    st.deepEqual(
+      getSettingsAttributes(JSXElementMock('Link', [JSXAttributeMock('foo', 'path/to/page')]).openingElement, {
+        'jsx-a11y': {},
+      }),
+      [JSXAttributeMock('foo', 'path/to/page')],
+      'returns existing attributes when `components` is empty',
+    );
+
     st.end();
   });
 
@@ -40,7 +48,24 @@ test('getSettingsAttributes', (t) => {
     );
 
     st.deepEqual(
-      getSettingsAttributes(JSXElementMock('a', [JSXAttributeMock('foo', 'path/to/page')]).openingElement, {
+      getSettingsAttributes(JSXElementMock('Link', [JSXAttributeMock('bar', 'path/to/page')]).openingElement, {
+        'jsx-a11y': {
+          components: {
+            Link: {
+              component: 'a',
+              attributes: {
+                href: ['foo', 'bar'],
+              },
+            },
+          },
+        },
+      }),
+      [JSXAttributeMock('href', 'path/to/page')],
+      'returns the exisiting attributes and the mapped attributes',
+    );
+
+    st.deepEqual(
+      getSettingsAttributes(JSXElementMock('button', [JSXAttributeMock('foo', 'path/to/page')]).openingElement, {
         'jsx-a11y': {
           components: {
             Link: {
@@ -56,6 +81,37 @@ test('getSettingsAttributes', (t) => {
       'should return the existing attributes when no mapping exists',
     );
 
+    st.deepEqual(
+      getSettingsAttributes(JSXElementMock('Link', [JSXAttributeMock('bar', 'path/to/page')]).openingElement, {
+        'jsx-a11y': {
+          components: {
+            Link: {
+              component: 'a',
+              attributes: {
+                href: ['foo'],
+              },
+            },
+          },
+        },
+      }),
+      [JSXAttributeMock('bar', 'path/to/page')],
+      'returns the exisiting attributes when no mapping exists',
+    );
+
+    st.deepEqual(
+      getSettingsAttributes(JSXElementMock('Link', [JSXAttributeMock('foo', 'path/to/page')]).openingElement, {
+        settings: {
+          'jsx-a11y': {
+            components: {
+              Link: 'a',
+            },
+          },
+        },
+      }),
+      [JSXAttributeMock('foo', 'path/to/page')],
+      'returns existing attributes when components mapping to the component does not have attributes',
+    );
+
     st.end();
   });
 
diff --git a/src/util/getSettingsAttributes.js b/src/util/getSettingsAttributes.js
index dfd218472..15f37eb13 100644
--- a/src/util/getSettingsAttributes.js
+++ b/src/util/getSettingsAttributes.js
@@ -1,7 +1,7 @@
 // @flow
 
 import type { Node, JSXOpeningElement } from 'ast-types-flow';
-import { elementType, getProp } from 'jsx-ast-utils';
+import { elementType, getProp, propName } from 'jsx-ast-utils';
 import type { ESLintSettings } from '../../flow/eslint';
 
 /**
@@ -37,23 +37,32 @@ const getSettingsAttributes = (node: JSXOpeningElement, settings: ESLintSettings
 
   if (!settingsAttributes || typeof settingsAttributes !== 'object') return rawAttributes;
 
+  const mappedRawAttrNames = new Set();
+
   const mappedAttributes = Object.entries(settingsAttributes).flatMap(([originalAttr, mappedAttrs]) => {
     if (!Array.isArray(mappedAttrs)) return [];
 
     return mappedAttrs.flatMap((mappedAttr) => {
       const originalProp = getProp(rawAttributes, mappedAttr);
 
-      return originalProp ? [{
-        ...originalProp,
-        name: {
-          ...originalProp.name,
-          name: originalAttr,
-        },
-      }] : [];
+      if (originalProp) {
+        mappedRawAttrNames.add(mappedAttr);
+        return [{
+          ...originalProp,
+          name: {
+            ...originalProp.name,
+            name: originalAttr,
+          },
+        }];
+      }
+      return [];
     });
   });
 
-  return mappedAttributes;
+  // raw attributes that don't have mappings
+  const unmappedAttributes = rawAttributes.filter((attr) => !mappedRawAttrNames.has(propName(attr)));
+
+  return [...unmappedAttributes, ...mappedAttributes];
 };
 
 export default getSettingsAttributes;

From fe44166530051c0a3b6a081200494cba4e4ae57e Mon Sep 17 00:00:00 2001
From: Sarah Harris <sarah.harris@gusto.com>
Date: Wed, 23 Jul 2025 09:52:55 -0400
Subject: [PATCH 8/9] [chore]: outlier test cases

---
 .../no-static-element-interactions-test.js    | 20 ++++++++++++++++++-
 src/util/getElementType.js                    |  8 ++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/__tests__/src/rules/no-static-element-interactions-test.js b/__tests__/src/rules/no-static-element-interactions-test.js
index c1a26b42e..ad82bcaf4 100644
--- a/__tests__/src/rules/no-static-element-interactions-test.js
+++ b/__tests__/src/rules/no-static-element-interactions-test.js
@@ -34,12 +34,24 @@ const componentsSettings = {
     components: {
       Button: 'button',
       TestComponent: 'div',
+      // Custom component with mapped attributes
       Link: {
         component: 'a',
         attributes: {
-          href: ['to', 'href'],
+          href: ['to', 'href', 'foo'],
         },
       },
+      // Custom component with a redundant attribute
+      TestComponent2: {
+        attributes: {
+          href: ['href'],
+        },
+        component: 'a',
+      },
+      // Custom component with empty attributes object
+      TestComponent3: {
+        component: 'a',
+      },
     },
   },
 };
@@ -89,7 +101,9 @@ const alwaysValid = [
   { code: '<a onClick={() => void 0} href="http://x.y.z" />' },
   { code: '<a onClick={() => void 0} href="http://x.y.z" tabIndex="0" />' },
   { code: '<Link onClick={() => void 0} to="path/to/page" />', settings: componentsSettings },
+  { code: '<Link onClick={() => void 0} foo="path/to/page" />', settings: componentsSettings },
   { code: '<Link onClick={() => void 0} href="http://x.y.z" />', settings: componentsSettings },
+  { code: '<TestComponent2 onClick={() => void 0} href="http://x.y.z" />;', settings: componentsSettings },
   { code: '<audio onClick={() => {}} />;' },
   { code: '<form onClick={() => {}} />;' },
   { code: '<form onSubmit={() => {}} />;' },
@@ -365,6 +379,10 @@ const neverValid = [
   // Custom components
   { code: '<Link onClick={() => void 0} to="path/to/page" />', settings: { 'jsx-a11y': { components: { Link: 'a' } } }, errors: [expectedError] },
   { code: '<TestComponent onClick={() => void 0} to="path/to/page" />', settings: componentsSettings, errors: [expectedError] },
+  // Custom component with a redundant attribute
+  { code: '<TestComponent2 onClick={() => void 0} to="path/to/page" />;', settings: componentsSettings, errors: [expectedError] },
+  // Custom component with empty attributes object
+  { code: '<TestComponent3 onClick={() => void 0} to="path/to/page" />;', settings: componentsSettings, errors: [expectedError] },
   // `a` with a `to` is not valid, only custom components listed in `components`
   { code: '<a onClick={() => void 0} to="path/to/page" />', settings: componentsSettings, errors: [expectedError] },
 ];
diff --git a/src/util/getElementType.js b/src/util/getElementType.js
index 2f141debd..c1b2d0276 100644
--- a/src/util/getElementType.js
+++ b/src/util/getElementType.js
@@ -33,15 +33,19 @@ const getElementType = (context: ESLintContext): ((node: JSXOpeningElement) => s
 
     const componentType = componentMap[rawType];
 
+    if (typeof componentType === 'string') {
+      return hasOwn(componentMap, rawType) ? componentType : rawType;
+    }
+
     if (typeof componentType === 'object') {
+      if (componentType.component) return componentType.component;
+
       const customComponent = Object.entries(componentType).find(([key]) => key === rawType);
 
       if (customComponent) {
         [rawType] = customComponent;
         return hasOwn(componentMap, rawType) ? rawType : rawType;
       }
-    } else if (typeof componentType === 'string') {
-      return hasOwn(componentMap, rawType) ? componentType : rawType;
     }
 
     return rawType;

From 2917b243ae9f4bb8d54d02a9c7c4b1f36d6ca7f1 Mon Sep 17 00:00:00 2001
From: Sarah Harris <sarah.harris@gusto.com>
Date: Thu, 7 Aug 2025 10:02:49 -0400
Subject: [PATCH 9/9] [chore]: add spread prop check

---
 src/util/getSettingsAttributes.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/util/getSettingsAttributes.js b/src/util/getSettingsAttributes.js
index 15f37eb13..68ed29318 100644
--- a/src/util/getSettingsAttributes.js
+++ b/src/util/getSettingsAttributes.js
@@ -25,7 +25,7 @@ import type { ESLintSettings } from '../../flow/eslint';
  * <Link foo="path/to/page" /> // will be checked as if <a href="path/to/page" />
  */
 const getSettingsAttributes = (node: JSXOpeningElement, settings: ESLintSettings): Node[] => {
-  const { attributes: rawAttributes } = node;
+  const { attributes: rawAttributes = [] } = node;
   const { components } = settings?.['jsx-a11y'] || {};
 
   if (!components || typeof components !== 'object') return rawAttributes;
@@ -60,7 +60,7 @@ const getSettingsAttributes = (node: JSXOpeningElement, settings: ESLintSettings
   });
 
   // raw attributes that don't have mappings
-  const unmappedAttributes = rawAttributes.filter((attr) => !mappedRawAttrNames.has(propName(attr)));
+  const unmappedAttributes = rawAttributes.filter((attr) => attr.type !== 'JSXSpreadAttribute' && !mappedRawAttrNames.has(propName(attr)));
 
   return [...unmappedAttributes, ...mappedAttributes];
 };