Adds custom config option for no-static-element-interactions to allow attributes that render down to specific native ones

Author: sarahvharris

__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] || {};

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)

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,14 +69,50 @@ 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
       && attributesComparator(elementSchema.attributes, attributes)
     );
   }
 
+  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,14 +143,15 @@ 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.
   if (!dom.has(tagName)) {
     return false;
   }
 
-  return checkIsInteractiveElement(tagName, attributes);
+  return checkIsInteractiveElement(tagName, attributes, options);
 };
 
 export default isInteractiveElement;