Merge pull request #73 from primer/tylerjdev/tooltip-interactive-jsx-fix

Fix for `nonInteractiveLink` rule

Author: TylerJDev

.changeset/loud-bears-wave.md

@@ -0,0 +1,6 @@
+---
+'eslint-plugin-primer-react': patch
+---
+
+* Fixes `nonInteractiveLink` rule for links that pass values through JSX rather than a string
+* Adds optional chaining to `getJSXOpeningElementAttribute` to avoid error when no `name` is present

src/rules/__tests__/a11y-explicit-heading.test.js

@@ -34,6 +34,15 @@ ruleTester.run('a11y-explicit-heading', rule, {
   const args = {};
   <Heading as="h2" {...args}>Heading level 2</Heading>
   `,
+  `
+  import {Heading} from '@primer/react';
+  <Heading
+    {...someProps}
+    as="h3"
+  >
+    Passed spread props
+  </Heading>
+  `
 
 ],
 invalid: [    

src/rules/__tests__/a11y-tooltip-interactive-trigger.test.js

@@ -51,7 +51,22 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
     `import {Tooltip, Link} from '@primer/react';
     <Tooltip aria-label="Supplementary text" direction="e">
       <Link href="https://github.com">Link</Link>
-    </Tooltip>`
+    </Tooltip>`,
+    `
+    import {Tooltip, Link} from '@primer/react';
+    <Tooltip aria-label={avatar.avatarName} direction="e">
+      <Link href={avatar.avatarLink} underline={true}>
+        User avatar
+      </Link>
+    </Tooltip>` ,
+    `
+    import {Tooltip, Link} from '@primer/react';
+    <Tooltip aria-label="product" direction="e">
+      <Link href={productLink}>
+        Product
+      </Link>
+    </Tooltip>
+    `
   ],
   invalid: [
     {

src/rules/a11y-tooltip-interactive-trigger.js

@@ -1,3 +1,4 @@
+const {getPropValue, propName} = require('jsx-ast-utils')
 const {isPrimerComponent} = require('../utils/is-primer-component')
 const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
 const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
@@ -21,11 +22,21 @@ const isAnchorTag = el => {
   return openingEl === 'a' || openingEl.toLowerCase() === 'link'
 }
 
+const isJSXValue = (attributes) => {
+  const node = attributes.find(attribute => propName(attribute) === 'href');
+  const isJSXExpression = node.value.type === 'JSXExpressionContainer' && node 
+    && typeof getPropValue(node) === 'string';
+
+  return isJSXExpression
+}
+
 const isInteractiveAnchor = child => {
   const hasHref = getJSXOpeningElementAttribute(child.openingElement, 'href')
   if (!hasHref) return false
   const href = getJSXOpeningElementAttribute(child.openingElement, 'href').value.value
-  const isAnchorInteractive = typeof href === 'string' && href !== ''
+  const hasJSXValue = isJSXValue(child.openingElement.attributes);
+  const isAnchorInteractive = (typeof href === 'string' && href !== '' || hasJSXValue)
+
   return isAnchorInteractive
 }
 

src/utils/get-jsx-opening-element-attribute.js

@@ -1,7 +1,7 @@
 function getJSXOpeningElementAttribute(openingEl, name) {
   const attributes = openingEl.attributes
   const attribute = attributes.find(attribute => {
-    return attribute.name.name === name
+    return attribute.name && attribute.name.name === name
   })
 
   return attribute