Skip to content

Fix for nonInteractiveLink rule #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 28, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/loud-bears-wave.md
Original file line number Diff line number Diff line change
@@ -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
9 changes: 9 additions & 0 deletions src/rules/__tests__/a11y-explicit-heading.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down
17 changes: 16 additions & 1 deletion src/rules/__tests__/a11y-tooltip-interactive-trigger.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
{
Expand Down
13 changes: 12 additions & 1 deletion src/rules/a11y-tooltip-interactive-trigger.js
Original file line number Diff line number Diff line change
@@ -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')
Expand All @@ -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
}

Expand Down
2 changes: 1 addition & 1 deletion src/utils/get-jsx-opening-element-attribute.js
Original file line number Diff line number Diff line change
@@ -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
Expand Down