no-static-element-interactions custom attribute mapping

__tests__/src/rules/no-static-element-interactions-test.js

@@ -34,6 +34,22 @@ const componentsSettings = {
     components: {
       Button: 'button',
       TestComponent: 'div',
+      Link: {
+        components: 'a',
+        attributes: {
+          href: ['to', 'href'],
+        },
+      },
+    },
+  },
+};
+
+const componentsSettingNoAttributes = {
+  'jsx-a11y': {
+    components: {
+      Button: 'button',
+      TestComponent: 'div',
+      Link: 'a',
     },
   },
 };
@@ -82,6 +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: '<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={() => {}} />;' },
@@ -355,7 +373,10 @@ const neverValid = [
   { code: '<div onMouseDown={() => {}} />;', errors: [expectedError] },
   { code: '<div onMouseUp={() => {}} />;', errors: [expectedError] },
   // Custom components
-  { code: '<TestComponent onClick={doFoo} />', settings: componentsSettings, 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] || {};

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.

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>,

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,8 +54,8 @@ 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,

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;

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;
   };
 };