eslint-plugin-primer-react 7.0.2 → 7.1.0-rc.57f3453

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "7.0.2",
+  "version": "7.1.0-rc.57f3453",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {
@@ -34,7 +34,7 @@
     "eslint-traverse": "^1.0.0",
     "lodash": "^4.17.21",
     "styled-system": "^5.1.5",
-    "@typescript-eslint/utils": "8.35.0",
+    "@typescript-eslint/utils": "8.38.0",
     "typescript": "^5.8.2"
   },
   "devDependencies": {

package/src/configs/recommended.js

@@ -17,6 +17,7 @@ module.exports = {
     'primer-react/new-color-css-vars': 'error',
     'primer-react/a11y-explicit-heading': 'error',
     'primer-react/a11y-no-title-usage': 'error',
+    'primer-react/a11y-no-duplicate-form-labels': 'error',
     'primer-react/no-deprecated-props': 'warn',
     'primer-react/a11y-remove-disable-tooltip': 'error',
     'primer-react/a11y-use-accessible-tooltip': 'error',

package/src/index.js

@@ -12,6 +12,7 @@ module.exports = {
     'a11y-remove-disable-tooltip': require('./rules/a11y-remove-disable-tooltip'),
     'a11y-use-accessible-tooltip': require('./rules/a11y-use-accessible-tooltip'),
     'a11y-no-title-usage': require('./rules/a11y-no-title-usage'),
+    'a11y-no-duplicate-form-labels': require('./rules/a11y-no-duplicate-form-labels'),
     'use-deprecated-from-deprecated': require('./rules/use-deprecated-from-deprecated'),
     'no-wildcard-imports': require('./rules/no-wildcard-imports'),
     'no-unnecessary-components': require('./rules/no-unnecessary-components'),

package/src/rules/__tests__/a11y-no-duplicate-form-labels.test.js

@@ -0,0 +1,112 @@
+const rule = require('../a11y-no-duplicate-form-labels')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('a11y-no-duplicate-form-labels', rule, {
+  valid: [
+    // TextInput without aria-label is valid
+    `import {FormControl, TextInput} from '@primer/react';
+    <FormControl>
+      <FormControl.Label>Form Input Label</FormControl.Label>
+      <TextInput />
+    </FormControl>`,
+
+    // TextInput with aria-label but no FormControl.Label is valid
+    `import {FormControl, TextInput} from '@primer/react';
+    <FormControl>
+      <TextInput aria-label="Form Input Label" />
+    </FormControl>`,
+
+    // TextInput with aria-label outside FormControl is valid
+    `import {TextInput} from '@primer/react';
+    <TextInput aria-label="Form Input Label" />`,
+
+    // TextInput with visuallyHidden FormControl.Label is valid
+    `import {FormControl, TextInput} from '@primer/react';
+    <FormControl>
+      <FormControl.Label visuallyHidden>Form Input Label</FormControl.Label>
+      <TextInput />
+    </FormControl>`,
+
+    // FormControl without FormControl.Label but with aria-label is valid
+    `import {FormControl, TextInput} from '@primer/react';
+    <FormControl>
+      <TextInput aria-label="Form Input Label" />
+    </FormControl>`,
+
+    // Multiple TextInputs with different approaches
+    `import {FormControl, TextInput} from '@primer/react';
+    <div>
+      <FormControl>
+        <FormControl.Label>Visible Label</FormControl.Label>
+        <TextInput />
+      </FormControl>
+      <FormControl>
+        <TextInput aria-label="Standalone Input" />
+      </FormControl>
+    </div>`,
+  ],
+  invalid: [
+    {
+      code: `import {FormControl, TextInput} from '@primer/react';
+      <FormControl>
+        <FormControl.Label>Form Input Label</FormControl.Label>
+        <TextInput aria-label="Form Input Label" />
+      </FormControl>`,
+      errors: [
+        {
+          messageId: 'duplicateLabel',
+        },
+      ],
+    },
+    {
+      code: `import {FormControl, TextInput} from '@primer/react';
+      <FormControl>
+        <FormControl.Label>Username</FormControl.Label>
+        <TextInput aria-label="Enter your username" />
+      </FormControl>`,
+      errors: [
+        {
+          messageId: 'duplicateLabel',
+        },
+      ],
+    },
+    {
+      code: `import {FormControl, TextInput} from '@primer/react';
+      <FormControl>
+        <FormControl.Label visuallyHidden>Password</FormControl.Label>
+        <TextInput aria-label="Enter password" />
+      </FormControl>`,
+      errors: [
+        {
+          messageId: 'duplicateLabel',
+        },
+      ],
+    },
+    {
+      code: `import {FormControl, TextInput} from '@primer/react';
+      <div>
+        <FormControl>
+          <FormControl.Label>Email</FormControl.Label>
+          <div>
+            <TextInput aria-label="Email address" />
+          </div>
+        </FormControl>
+      </div>`,
+      errors: [
+        {
+          messageId: 'duplicateLabel',
+        },
+      ],
+    },
+  ],
+})

package/src/rules/__tests__/enforce-button-for-link-with-nohref.test.js

@@ -0,0 +1,86 @@
+const rule = require('../enforce-button-for-link-with-nohref')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('enforce-button-for-link-with-nohref', rule, {
+  valid: [
+    // Link with href attribute
+    `import {Link} from '@primer/react';
+    <Link href="https://example.com">Valid Link</Link>`,
+
+    // Link with href and inline prop
+    `import {Link} from '@primer/react';
+    <Link inline href="https://example.com">Valid Inline Link</Link>`,
+
+    // Link with href and className
+    `import {Link} from '@primer/react';
+    <Link className="some-class" href="https://example.com">Valid Link with Class</Link>`,
+
+    // Link with href, inline, and className
+    `import {Link} from '@primer/react';
+    <Link className="some-class" inline href="https://example.com">Valid Inline Link with Class</Link>`,
+
+    // Link with href as variable
+    `import {Link} from '@primer/react';
+    const url = '/about';
+    <Link href={url}>About</Link>`,
+
+    // Button component (not Link)
+    `import {Button} from '@primer/react';
+    <Button onClick={handleClick}>Click me</Button>`,
+
+    // Regular HTML link (not Primer Link)
+    `<a onClick={handleClick}>Click me</a>`,
+
+    // Link from different package
+    `import {Link} from 'react-router-dom';
+    <Link to="/about">About</Link>`,
+  ],
+  invalid: [
+    {
+      code: `import {Link} from '@primer/react';
+      <Link>Invalid Link without href</Link>`,
+      errors: [
+        {
+          messageId: 'noLinkWithoutHref',
+        },
+      ],
+    },
+    {
+      code: `import {Link} from '@primer/react';
+      <Link className="some-class">Invalid Link with class but no href</Link>`,
+      errors: [
+        {
+          messageId: 'noLinkWithoutHref',
+        },
+      ],
+    },
+    {
+      code: `import {Link} from '@primer/react';
+      <Link inline>Invalid inline Link without href</Link>`,
+      errors: [
+        {
+          messageId: 'noLinkWithoutHref',
+        },
+      ],
+    },
+    {
+      code: `import {Link} from '@primer/react';
+      <Link onClick={handleClick}>Invalid Link with onClick but no href</Link>`,
+      errors: [
+        {
+          messageId: 'noLinkWithoutHref',
+        },
+      ],
+    },
+  ],
+})

package/src/rules/a11y-no-duplicate-form-labels.js

@@ -0,0 +1,69 @@
+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')
+
+const isFormControl = node => getJSXOpeningElementName(node) === 'FormControl'
+const isFormControlLabel = node => getJSXOpeningElementName(node) === 'FormControl.Label'
+const isTextInput = node => getJSXOpeningElementName(node) === 'TextInput'
+
+const hasAriaLabel = node => {
+  const ariaLabel = getJSXOpeningElementAttribute(node, 'aria-label')
+  return !!ariaLabel
+}
+
+const findFormControlLabel = (node, sourceCode) => {
+  // Traverse up the parent chain to find FormControl
+  let current = node.parent
+  while (current) {
+    if (
+      current.type === 'JSXElement' &&
+      isFormControl(current.openingElement) &&
+      isPrimerComponent(current.openingElement.name, sourceCode.getScope(current))
+    ) {
+      // Found FormControl, now check if it has a FormControl.Label child
+      return current.children.some(
+        child =>
+          child.type === 'JSXElement' &&
+          isFormControlLabel(child.openingElement) &&
+          isPrimerComponent(child.openingElement.name, sourceCode.getScope(child)),
+      )
+    }
+    current = current.parent
+  }
+  return false
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Prevent duplicate labels on form inputs by disallowing aria-label on TextInput when FormControl.Label is present.',
+      url: require('../url')(module),
+    },
+    schema: [],
+    messages: {
+      duplicateLabel:
+        'TextInput should not have aria-label when FormControl.Label is present. Use FormControl.Label with visuallyHidden prop if needed.',
+    },
+  },
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode()
+    return {
+      JSXOpeningElement(jsxNode) {
+        if (isPrimerComponent(jsxNode.name, sourceCode.getScope(jsxNode)) && isTextInput(jsxNode)) {
+          // Check if TextInput has aria-label
+          if (hasAriaLabel(jsxNode)) {
+            // Check if there's a FormControl.Label in the parent FormControl
+            if (findFormControlLabel(jsxNode, sourceCode)) {
+              context.report({
+                node: jsxNode,
+                messageId: 'duplicateLabel',
+              })
+            }
+          }
+        }
+      },
+    }
+  },
+}

package/src/rules/enforce-button-for-link-with-nohref.js

@@ -0,0 +1,41 @@
+const url = require('../url')
+const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
+const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
+const {isPrimerComponent} = require('../utils/is-primer-component')
+
+module.exports = {
+  meta: {
+    type: 'error',
+    docs: {
+      description: 'Disallow usage of Link component without href',
+      recommended: true,
+      url: url(module),
+    },
+    messages: {
+      noLinkWithoutHref: 'Links without href and other side effects are not accessible. Use a Button instead.',
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode()
+    return {
+      JSXElement(node) {
+        const openingElement = node.openingElement
+        const elementName = getJSXOpeningElementName(openingElement)
+
+        // Check if this is a Link component from @primer/react
+        if (elementName === 'Link' && isPrimerComponent(openingElement.name, sourceCode.getScope(node))) {
+          // Check if the Link has an href attribute
+          const hrefAttribute = getJSXOpeningElementAttribute(openingElement, 'href')
+
+          if (!hrefAttribute) {
+            context.report({
+              node: openingElement,
+              messageId: 'noLinkWithoutHref',
+            })
+          }
+        }
+      },
+    }
+  },
+}