Update link lint rule to skip Link with className (#193)

* Update link lint rule to skip Link with className * Create slow-dolphins-float.md
primer · Jun 11, 2024 · 5fc19f6 · 5fc19f6
1 parent e839a19
commit 5fc19f6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/.changeset/slow-dolphins-float.md b/.changeset/slow-dolphins-float.md
@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": patch
+---
+
+Update link lint rule to skip Link with className
diff --git a/src/rules/__tests__/a11y-link-in-text-block.test.js b/src/rules/__tests__/a11y-link-in-text-block.test.js
@@ -115,6 +115,16 @@ ruleTester.run('a11y-link-in-text-block', rule, {
           includes:
         </Heading>
 `,
+    `import {Link} from '@primer/react';
+      <p>bla blah
+      <Link className={styles.someClass}>Link text</Link>
+      </p>
+    `,
+    `import {Link} from '@primer/react';
+    <p>bla blah
+    <Link className='some-class'>Link text</Link>
+    </p>
+  `,
   ],
   invalid: [
     {

diff --git a/src/rules/a11y-link-in-text-block.js b/src/rules/a11y-link-in-text-block.js
@@ -28,6 +28,10 @@ module.exports = {
           name === 'Link' &&
           node.parent.children
         ) {
+          // Skip if Link has className because we cannot deduce what styles are applied.
+          const classNameAttribute = getJSXOpeningElementAttribute(node.openingElement, 'className')
+          if (classNameAttribute) return
+
           let siblings = node.parent.children
           const parentName = node.parent.openingElement?.name?.name
           // Skip if Link is nested inside of a heading.