eslint-plugin-primer-react 5.2.0 → 5.2.1-rc.1fbdfd0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "5.2.0",
+  "version": "5.2.1-rc.1fbdfd0",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {

package/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: [
     {

package/src/rules/a11y-link-in-text-block.js

@@ -4,6 +4,9 @@ const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-elemen
 
 module.exports = {
   meta: {
+    docs: {
+      url: require('../url')(module),
+    },
     type: 'problem',
     schema: [
       {
@@ -15,7 +18,8 @@ module.exports = {
       },
     ],
     messages: {
-      linkInTextBlock: '<Link>s that are used within a text block should have the inline prop.',
+      linkInTextBlock:
+        'Links should have the inline prop if it appear in a text block and only uses color to distinguish itself from surrounding text.',
     },
   },
   create(context) {
@@ -28,6 +32,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.