eslint-plugin-primer-react 4.0.0-rc.b9f7dc6 → 4.0.0

package/.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: weekly
+    open-pull-requests-limit: 99
+    allow: 
+      - dependency-name: "eslint-plugin-github"
+      - dependency-name: "eslint-plugin-jsx-a11y"

package/CHANGELOG.md

@@ -6,6 +6,21 @@
 
 - [#51](https://github.com/primer/eslint-plugin-primer-react/pull/51) [`a65aa32`](https://github.com/primer/eslint-plugin-primer-react/commit/a65aa32c612c7fe952ec47bb3d926cf8adae9fab) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Add `a11y-tooltip-interactive-trigger`
 
+* [#66](https://github.com/primer/eslint-plugin-primer-react/pull/66) [`d1df609`](https://github.com/primer/eslint-plugin-primer-react/commit/d1df609b260505ee9dea1740bc96a3187355d727) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Add `a11y-explicit-heading` rule
+
+### Minor Changes
+
+- [#67](https://github.com/primer/eslint-plugin-primer-react/pull/67) [`4dfdb47`](https://github.com/primer/eslint-plugin-primer-react/commit/4dfdb47b40e7f187573b8203830541b86cc7a953) Thanks [@TylerJDev](https://github.com/TylerJDev)! - \* Updates component mapping, adds `components.js`
+  - Bumps `eslint-plugin-github` and `eslint-plugin-jsx-a11y`
+  - Fixes bug in `a11y-explicit-heading` when using spread props, or variable for `as`
+
+### Patch Changes
+
+- [#72](https://github.com/primer/eslint-plugin-primer-react/pull/72) [`522b9cc`](https://github.com/primer/eslint-plugin-primer-react/commit/522b9ccbcfb26d18f2ea8b2514a6a7975480aaa7) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Removes `Link`, `Spinner` and `TabNav.Link` from component mapping
+
+* [#73](https://github.com/primer/eslint-plugin-primer-react/pull/73) [`974d9e8`](https://github.com/primer/eslint-plugin-primer-react/commit/974d9e85c7460a05eb0345086b340b650700d24d) Thanks [@TylerJDev](https://github.com/TylerJDev)! - \* 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
+
 ## 3.0.0
 
 ### Major Changes

package/README.md

@@ -33,3 +33,4 @@ ESLint rules for Primer React
 - [no-deprecated-colors](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-colors.md)
 - [no-system-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-system-props.md)
 - [a11y-tooltip-interactive-trigger](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-tooltip-interactive-trigger.md)
+- [a11y-explicit-heading](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-explicit-heading.md)

package/docs/rules/a11y-explicit-heading.md

@@ -0,0 +1,37 @@
+## Require explicit heading level on `<Heading>` component
+
+The `Heading` component does not require you to use `as` to specify the heading level, as it will default to an `h2` if one isn't specified. This may lead to inaccessible usage if the default is out of order in the existing heading hierarchy. 
+
+## Rule Details
+
+This rule enforces using `as` on the `<Heading>` component to specify a heading level (`h1`-`h6`). In addition, it enforces `as` usage to only be used for headings.
+
+👎 Examples of **incorrect** code for this rule
+
+```jsx
+import {Heading} from '@primer/react'
+
+<Heading>Heading without explicit heading level</Heading>
+```
+
+`as` must only be for headings (`h1`-`h6`)
+
+```jsx
+import {Heading} from '@primer/react'
+
+<Heading as="span">Heading component used as "span"</Heading>
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+import {Heading} from '@primer/react';
+
+<Heading as="h2">Heading level 2</Heading>
+```
+
+## Options
+
+- `skipImportCheck` (default: `false`)
+
+  By default, the `a11y-explicit-heading` rule will only check for `<Heading>` components imported directly from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "4.0.0-rc.b9f7dc6",
+  "version": "4.0.0",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {
@@ -24,7 +24,7 @@
     "@changesets/changelog-github": "^0.4.0",
     "@changesets/cli": "^2.16.0",
     "@github/prettier-config": "0.0.4",
-    "@primer/primitives": "^5.1.0",
+    "@primer/primitives": "^7.11.14",
     "eslint": "^8.0.1",
     "jest": "^27.0.6"
   },
@@ -35,8 +35,8 @@
   "prettier": "@github/prettier-config",
   "dependencies": {
     "@styled-system/props": "^5.1.5",
-    "eslint-plugin-github": "^4.3.7",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-github": "^4.9.2",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-traverse": "^1.0.0",
     "lodash": "^4.17.21",
     "styled-system": "^5.1.5"

package/src/configs/components.js

@@ -0,0 +1,23 @@
+const { flattenComponents } = require('../utils/flatten-components');
+
+const components = flattenComponents({
+    Button: 'button',
+    IconButton: 'button',
+    ToggleSwitch: 'button',
+    Radio: 'input',
+    Checkbox: 'input',
+    Text: 'span',
+    TextInput: {
+        Action: 'button',
+        self: 'input',
+    }, 
+    Select: {
+        Option: 'option', 
+        self: 'select',
+     },
+    TabNav: {
+        self: 'nav',
+    },
+})
+
+module.exports = components;

package/src/configs/recommended.js

@@ -1,3 +1,5 @@
+const components = require('./components');
+
 module.exports = {
   parserOptions: {
     sourceType: 'module',
@@ -11,20 +13,15 @@ module.exports = {
     'primer-react/direct-slot-children': 'error',
     'primer-react/no-deprecated-colors': 'warn',
     'primer-react/no-system-props': 'warn',
-    'primer-react/a11y-tooltip-interactive-trigger': 'error'
+    'primer-react/a11y-tooltip-interactive-trigger': 'error',
+    'primer-react/a11y-explicit-heading': 'error'
   },
   settings: {
     github: {
-      components: {
-        Link: {props: {as: {undefined: 'a', a: 'a', button: 'button'}}},
-        Button: {default: 'button'}
-      }
+      components: components
     },
     'jsx-a11y': {
-      components: {
-        Button: 'button',
-        IconButton: 'button'
-      }
+      components: components
     }
   }
 }

package/src/index.js

@@ -3,7 +3,8 @@ module.exports = {
     'direct-slot-children': require('./rules/direct-slot-children'),
     'no-deprecated-colors': require('./rules/no-deprecated-colors'),
     'no-system-props': require('./rules/no-system-props'),
-    'a11y-tooltip-interactive-trigger': require('./rules/a11y-tooltip-interactive-trigger')
+    'a11y-tooltip-interactive-trigger': require('./rules/a11y-tooltip-interactive-trigger'),
+    'a11y-explicit-heading': require('./rules/a11y-explicit-heading')
   },
   configs: {
     recommended: require('./configs/recommended')

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

@@ -0,0 +1,63 @@
+const rule = require('../a11y-explicit-heading')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  }
+})
+
+ruleTester.run('a11y-explicit-heading', rule, {
+  valid: [
+  `import {Heading} from '@primer/react';
+  <Heading as="h1">Heading level 1</Heading>
+  `,
+  `import {Heading} from '@primer/react';
+  <Heading as="h2">Heading level 2</Heading>
+  `,
+  `import {Heading} from '@primer/react';
+  <Heading as="H3">Heading level 3</Heading>
+  `,
+  `import {Heading} from '@primer/react';
+  const args = {};
+  <Heading {...args}>A heading with spread props</Heading>
+  `,
+  `import {Heading} from '@primer/react';
+  const as = 'h3';
+  <Heading as={as}>Heading as passed prop</Heading>
+  `,
+  `import {Heading} from '@primer/react';
+  const args = {};
+  <Heading as="h2" {...args}>Heading level 2</Heading>
+  `,
+  `
+  import {Heading} from '@primer/react';
+  <Heading
+    {...someProps}
+    as="h3"
+  >
+    Passed spread props
+  </Heading>
+  `
+  
+],
+invalid: [    
+  {
+    code: 
+    `import {Heading} from '@primer/react';
+    <Heading>Heading without "as"</Heading>`,
+    errors: [{ messageId: 'nonExplicitHeadingLevel' }]
+  },
+  {
+    code: 
+    `import {Heading} from '@primer/react';
+    <Heading as="span">Heading component used as "span"</Heading>
+    `,
+    errors: [{ messageId: 'invalidAsValue' }]
+  },
+]
+})

package/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: [
     {
@@ -96,7 +111,7 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'anchorTagWithoutHref'
+          messageId: 'nonInteractiveLink'
         }
       ]
     },
@@ -108,7 +123,7 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'anchorTagWithoutHref'
+          messageId: 'nonInteractiveLink'
         }
       ]
     },
@@ -120,7 +135,7 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'hiddenInput'
+          messageId: 'nonInteractiveInput'
         }
       ]
     },
@@ -132,7 +147,43 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'hiddenInput'
+          messageId: 'nonInteractiveInput'
+        }
+      ]
+    },
+    {
+      code: `
+      import {Tooltip, Button} from '@primer/react';
+      <Tooltip aria-label="Supplementary text" direction="e">
+        <Button disabled>Save</Button>
+      </Tooltip>`,
+      errors: [
+        {
+          messageId: 'nonInteractiveTrigger'
+        }
+      ]
+    },
+    {
+      code: `
+      import {Tooltip, Button} from '@primer/react';
+      <Tooltip aria-label="Supplementary text" direction="e">
+        <IconButton disabled>Save</IconButton>
+      </Tooltip>`,
+      errors: [
+        {
+          messageId: 'nonInteractiveTrigger'
+        }
+      ]
+    },
+    {
+      code: `
+      import {Tooltip, Button} from '@primer/react';
+      <Tooltip aria-label="Supplementary text" direction="e">
+        <input disabled>Save</input>
+      </Tooltip>`,
+      errors: [
+        {
+          messageId: 'nonInteractiveInput'
         }
       ]
     },
@@ -159,7 +210,7 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'anchorTagWithoutHref'
+          messageId: 'nonInteractiveLink'
         }
       ]
     }

package/src/rules/a11y-explicit-heading.js

@@ -0,0 +1,66 @@
+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 validHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+
+const isHeadingComponent = elem => getJSXOpeningElementName(elem) === 'Heading'
+const isUsingAsProp = elem => {
+  const componentAs = getJSXOpeningElementAttribute(elem, 'as')
+
+  if (!componentAs) return
+
+  return componentAs.value
+}
+
+const isValidAsUsage = value => validHeadings.includes(value.toLowerCase())
+const isInvalid = elem => {
+  if (elem.attributes.length === 1 && elem.attributes[0].type === 'JSXSpreadAttribute') return;
+
+  const elemAs = isUsingAsProp(elem)
+
+  if (!elemAs) return 'nonExplicitHeadingLevel'
+  if (elemAs.value && !isValidAsUsage(elemAs.value)) return 'invalidAsValue'
+
+  return false
+}
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Heading component must have explicit heading level, and specific `as` usage.',
+      url: require('../url')(module),
+    },
+    schema: [
+      {
+        properties: {
+          skipImportCheck: {
+            type: 'boolean'
+          }
+        }
+      }
+    ],
+    messages: {
+      nonExplicitHeadingLevel: 'Heading must have an explicit heading level applied through the `as` prop.',
+      invalidAsValue: 'Usage of `as` must only be used for heading elements (h1-h6).'
+    }
+  },
+  create: function(context) {
+    return {
+      JSXOpeningElement(jsxNode) {
+        const skipImportCheck = context.options[0] ? context.options[0].skipImportCheck : false
+
+        if ((skipImportCheck || isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) && isHeadingComponent(jsxNode)) {
+          const error = isInvalid(jsxNode)
+
+          if (error) {
+            context.report({
+              node: jsxNode,
+              messageId: error
+            })
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,41 +1,55 @@
+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')
 
 const isInteractive = child => {
   const childName = getJSXOpeningElementName(child.openingElement)
-  return ['button', 'summary', 'select', 'textarea', 'a', 'input', 'link', 'iconbutton', 'textinput'].includes(
-    childName.toLowerCase()
+  return (
+    ['button', 'summary', 'select', 'textarea', 'a', 'input', 'link', 'iconbutton', 'textinput'].includes(
+      childName.toLowerCase()
+    ) && !hasDisabledAttr(child)
   )
 }
 
+const hasDisabledAttr = child => {
+  const hasDisabledAttr = getJSXOpeningElementAttribute(child.openingElement, 'disabled')
+  return hasDisabledAttr
+}
+
 const isAnchorTag = el => {
-  return (
-    getJSXOpeningElementName(el.openingElement) === 'a' ||
-    getJSXOpeningElementName(el.openingElement).toLowerCase() === 'link'
-  )
+  const openingEl = getJSXOpeningElementName(el.openingElement)
+  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
 }
 
 const isInputTag = el => {
-  return (
-    getJSXOpeningElementName(el.openingElement) === 'input' ||
-    getJSXOpeningElementName(el.openingElement).toLowerCase() === 'textinput'
-  )
+  const openingEl = getJSXOpeningElementName(el.openingElement)
+  return openingEl === 'input' || openingEl.toLowerCase() === 'textinput'
 }
 
 const isInteractiveInput = child => {
   const hasHiddenType =
     getJSXOpeningElementAttribute(child.openingElement, 'type') &&
     getJSXOpeningElementAttribute(child.openingElement, 'type').value.value === 'hidden'
-  return !hasHiddenType
+  return !hasHiddenType && !hasDisabledAttr(child)
 }
 
 const isOtherThanAnchorOrInput = el => {
@@ -57,12 +71,12 @@ const getAllChildren = node => {
 
 const checks = [
   {
-    id: 'anchorTagWithoutHref',
+    id: 'nonInteractiveLink',
     filter: jsxElement => isAnchorTag(jsxElement),
     check: isInteractiveAnchor
   },
   {
-    id: 'hiddenInput',
+    id: 'nonInteractiveInput',
     filter: jsxElement => isInputTag(jsxElement),
     check: isInteractiveInput
   },
@@ -76,16 +90,11 @@ const checks = [
 const checkTriggerElement = jsxNode => {
   const elements = [...getAllChildren(jsxNode)]
   const hasInteractiveElement = elements.find(element => {
-    if (
-      getJSXOpeningElementName(element.openingElement) === 'a' ||
-      getJSXOpeningElementName(element.openingElement) === 'Link'
-    ) {
+    const openingEl = getJSXOpeningElementName(element.openingElement)
+    if (openingEl === 'a' || openingEl === 'Link') {
       return isInteractiveAnchor(element)
     }
-    if (
-      getJSXOpeningElementName(element.openingElement) === 'input' ||
-      getJSXOpeningElementName(element.openingElement) === 'TextInput'
-    ) {
+    if (openingEl === 'input' || openingEl === 'TextInput') {
       return isInteractiveInput(element)
     } else {
       return isInteractive(element)
@@ -110,10 +119,10 @@ const checkTriggerElement = jsxNode => {
   }
   // check the specificity of the errors. If there are multiple errors, only return the most specific one.
   if (errors.size > 1) {
-    if (errors.has('anchorTagWithoutHref')) {
+    if (errors.has('nonInteractiveLink')) {
       errors.delete('nonInteractiveTrigger')
     }
-    if (errors.has('hiddenInput')) {
+    if (errors.has('nonInteractiveInput')) {
       errors.delete('nonInteractiveTrigger')
     }
   }
@@ -135,11 +144,11 @@ module.exports = {
     ],
     messages: {
       nonInteractiveTrigger:
-        'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',
-      anchorTagWithoutHref:
+        'Tooltips should only be applied to interactive elements that are not disabled. Consider using a `<button>` or equivalent interactive element instead.',
+      nonInteractiveLink:
         'Anchor tags without an href attribute are not interactive, therefore they cannot be used as a trigger for a tooltip. Please add an href attribute or use an alternative interactive element instead',
-      hiddenInput:
-        'Hidden inputs are not interactive and cannot be used as a trigger for a tooltip. Please use an alternate input type or use a different interactive element instead',
+      nonInteractiveInput:
+        'Hidden or disabled inputs are not interactive and cannot be used as a trigger for a tooltip. Please use an alternate input type or use a different interactive element instead',
       singleChild: 'The `Tooltip` component expects a single React element as a child.'
     }
   },

package/src/url.js

@@ -0,0 +1,10 @@
+const {homepage, version} = require('../package.json')
+const path = require('path')
+
+module.exports = ({id}) => {
+  const url = new URL(homepage)
+  const rule = path.basename(id, '.js')
+  url.hash = ''
+  url.pathname += `/blob/v${version}/docs/rules/${rule}.md`
+  return url.toString()
+}

package/src/utils/__tests__/flatten-components.test.js

@@ -0,0 +1,62 @@
+const {flattenComponents} = require('../flatten-components')
+
+const mockComponents = function(passedObj) {
+  return {
+    Button: 'button',
+    Link: 'a',
+    Spinner: 'svg',
+    Radio: 'input',
+    TextInput: {
+      Action: 'button',
+      self: 'input'
+    },
+    ...passedObj
+  }
+}
+
+describe('getElementType', function() {
+  it('flattens passed object 1-level deep', function() {
+    const result = flattenComponents(mockComponents())
+
+    const expectedResult = {
+      Button: 'button',
+      Link: 'a',
+      Spinner: 'svg',
+      Radio: 'input',
+      TextInput: 'input',
+      'TextInput.Action': 'button'
+    }
+
+    expect(result).toEqual(expectedResult)
+  })
+
+  it('ignores objects nested deeper than 1-level', function() {
+    const result = flattenComponents(
+      mockComponents({
+        Select: {
+          Items: {
+            self: 'div'
+          },
+          Option: 'option',
+          self: 'select'
+        }
+      })
+    )
+
+    const expectedResult = {
+      Button: 'button',
+      Link: 'a',
+      Spinner: 'svg',
+      Radio: 'input',
+      TextInput: 'input',
+      'TextInput.Action': 'button',
+      'Select.Items': {
+        self: 'div'
+      },
+      Select: 'select',
+      'Select.Option': 'option'
+    }
+
+    expect(result).toEqual(expectedResult)
+  })
+})

package/src/utils/flatten-components.js

@@ -0,0 +1,17 @@
+function flattenComponents(componentObj) {
+    let result = {};
+
+    Object.keys(componentObj).forEach((key) => {
+        if (typeof componentObj[key] === 'object') {
+            const test = Object.keys(componentObj[key]).forEach((item) => {
+                result = { ...result, [`${key}${item !== 'self' ? `.${item}` : ''}`]: componentObj[key][item] };        
+            });
+        } else {
+            result = {...result, [key]: componentObj[key]}
+        }
+    });
+
+    return result;
+}
+
+exports.flattenComponents = flattenComponents

package/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