[Feat]: add attributes option to the global components option

Author: sarahvharris

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

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

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

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

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