[New]: add attributes rule option for no-static-element-interactions which allows custom mapping of attributes to native ones

Author: sarahvharris

__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': {

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

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