[chore]: rename getAttributes to getSettingsAttributes

Author: sarahvharris

__tests__/src/util/getAttributes-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();
+});

__tests__/src/util/getSettingsAttributes-test.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)) {

src/rules/no-static-element-interactions.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;