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

package/package.json

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

package/src/configs/recommended.js

@@ -10,7 +10,8 @@ module.exports = {
   rules: {
     'primer-react/direct-slot-children': 'error',
     'primer-react/no-deprecated-colors': 'warn',
-    'primer-react/no-system-props': 'warn'
+    'primer-react/no-system-props': 'warn',
+    'primer-react/a11y-tooltip-interactive-trigger': 'error'
   },
   settings: {
     github: {

package/src/index.js

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

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

@@ -0,0 +1,167 @@
+const rule = require('../a11y-tooltip-interactive-trigger')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  }
+})
+
+ruleTester.run('non-interactive-tooltip-trigger', rule, {
+  valid: [
+    `import {Tooltip, Button} from '@primer/react';
+    <Tooltip aria-label="Filter vegetarian options" direction="e">
+      <Button>🥦</Button>
+    </Tooltip>`,
+
+    `import {Tooltip, Button} from '@primer/react';
+    <Tooltip aria-label="Supplementary text" direction="e">
+      <Button>Save</Button>
+    </Tooltip>`,
+
+    `import {Tooltip, IconButton} from '@primer/react';
+    import {SearchIcon} from '@primer/octicons-react';
+    <Tooltip aria-label="Supplementary text" direction="e">
+      <IconButton icon={SearchIcon} aria-label="Search" />
+    </Tooltip>`,
+
+    `import {Tooltip, Button} from '@primer/react';
+    <Tooltip aria-label="Supplementary text" direction="e">
+      <div>
+        <Button>Save</Button>
+      </div>
+    </Tooltip>`,
+
+    `import {Tooltip, Button} from '@primer/react';
+    <Tooltip aria-label="Supplementary text" direction="e">
+      <div>
+        <a href="https://gthub.com">Save</a>
+      </div>
+    </Tooltip>`,
+
+    `import {Tooltip} from '@primer/react';
+    <Tooltip aria-label="Supplementary text" direction="e">
+      <a href="https://github.com">see commit message</a>
+    </Tooltip>`,
+
+    `import {Tooltip, Link} from '@primer/react';
+    <Tooltip aria-label="Supplementary text" direction="e">
+      <Link href="https://github.com">Link</Link>
+    </Tooltip>`
+  ],
+  invalid: [
+    {
+      code: `import {Tooltip} from '@primer/react';<Tooltip type="description" text="supportive text" direction="e"><button>button1</button><button>button2</button></Tooltip>
+      `,
+      errors: [
+        {
+          messageId: 'singleChild'
+        }
+      ]
+    },
+    {
+      code: `
+      import {Tooltip} from '@primer/react';
+      <Tooltip aria-label="Filter vegetarian options" direction="e">
+        <span>non interactive element</span>
+      </Tooltip>
+      `,
+      errors: [
+        {
+          messageId: 'nonInteractiveTrigger'
+        }
+      ]
+    },
+    {
+      code: `
+      import {Tooltip, Button} from '@primer/react';
+      <Tooltip aria-label="Supplementary text" direction="e">
+        <h1>Save</h1>
+      </Tooltip>`,
+      errors: [
+        {
+          messageId: 'nonInteractiveTrigger'
+        }
+      ]
+    },
+    {
+      code: `
+      import {Tooltip} from '@primer/react';
+      <Tooltip aria-label="Supplementary text" direction="e">
+        <a>see commit message</a>
+      </Tooltip>`,
+      errors: [
+        {
+          messageId: 'anchorTagWithoutHref'
+        }
+      ]
+    },
+    {
+      code: `
+      import {Tooltip, Link} from '@primer/react';
+      <Tooltip aria-label="Supplementary text" direction="e">
+        <Link>see commit message</Link>
+      </Tooltip>`,
+      errors: [
+        {
+          messageId: 'anchorTagWithoutHref'
+        }
+      ]
+    },
+    {
+      code: `
+      import {Tooltip} from '@primer/react';
+      <Tooltip aria-label="Supplementary text" direction="e">
+        <input type="hidden" />
+      </Tooltip>`,
+      errors: [
+        {
+          messageId: 'hiddenInput'
+        }
+      ]
+    },
+    {
+      code: `
+      import {Tooltip, TextInput} from '@primer/react';
+      <Tooltip aria-label="Supplementary text" direction="e">
+        <TextInput type="hidden" aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
+      </Tooltip>`,
+      errors: [
+        {
+          messageId: 'hiddenInput'
+        }
+      ]
+    },
+    {
+      code: `
+      import {Tooltip, Button} from '@primer/react';
+      <Tooltip aria-label="Supplementary text" direction="e">
+        <header>
+          <span>Save</span>
+        </header>
+      </Tooltip>`,
+      errors: [
+        {
+          messageId: 'nonInteractiveTrigger'
+        }
+      ]
+    },
+    {
+      code: `import {Tooltip, Button} from '@primer/react';
+      <Tooltip aria-label="Supplementary text" direction="e">
+        <h1>
+          <a>Save</a>
+        </h1>
+      </Tooltip>`,
+      errors: [
+        {
+          messageId: 'anchorTagWithoutHref'
+        }
+      ]
+    }
+  ]
+})

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

@@ -0,0 +1,179 @@
+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()
+  )
+}
+
+const isAnchorTag = el => {
+  return (
+    getJSXOpeningElementName(el.openingElement) === 'a' ||
+    getJSXOpeningElementName(el.openingElement).toLowerCase() === 'link'
+  )
+}
+
+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 !== ''
+  return isAnchorInteractive
+}
+
+const isInputTag = el => {
+  return (
+    getJSXOpeningElementName(el.openingElement) === 'input' ||
+    getJSXOpeningElementName(el.openingElement).toLowerCase() === 'textinput'
+  )
+}
+
+const isInteractiveInput = child => {
+  const hasHiddenType =
+    getJSXOpeningElementAttribute(child.openingElement, 'type') &&
+    getJSXOpeningElementAttribute(child.openingElement, 'type').value.value === 'hidden'
+  return !hasHiddenType
+}
+
+const isOtherThanAnchorOrInput = el => {
+  return !isAnchorTag(el) && !isInputTag(el)
+}
+
+const getAllChildren = node => {
+  if (Array.isArray(node.children)) {
+    return node.children
+      .filter(child => {
+        return child.type === 'JSXElement'
+      })
+      .flatMap(child => {
+        return [child, ...getAllChildren(child)]
+      })
+  }
+  return []
+}
+
+const checks = [
+  {
+    id: 'anchorTagWithoutHref',
+    filter: jsxElement => isAnchorTag(jsxElement),
+    check: isInteractiveAnchor
+  },
+  {
+    id: 'hiddenInput',
+    filter: jsxElement => isInputTag(jsxElement),
+    check: isInteractiveInput
+  },
+  {
+    id: 'nonInteractiveTrigger',
+    filter: jsxElement => isOtherThanAnchorOrInput(jsxElement),
+    check: isInteractive
+  }
+]
+
+const checkTriggerElement = jsxNode => {
+  const elements = [...getAllChildren(jsxNode)]
+  const hasInteractiveElement = elements.find(element => {
+    if (
+      getJSXOpeningElementName(element.openingElement) === 'a' ||
+      getJSXOpeningElementName(element.openingElement) === 'Link'
+    ) {
+      return isInteractiveAnchor(element)
+    }
+    if (
+      getJSXOpeningElementName(element.openingElement) === 'input' ||
+      getJSXOpeningElementName(element.openingElement) === 'TextInput'
+    ) {
+      return isInteractiveInput(element)
+    } else {
+      return isInteractive(element)
+    }
+  })
+
+  // If the tooltip has interactive elements, return.
+  if (hasInteractiveElement) return
+
+  const errors = new Set()
+
+  for (const element of elements) {
+    for (const check of checks) {
+      if (!check.filter(element)) {
+        continue
+      }
+
+      if (!check.check(element)) {
+        errors.add(check.id)
+      }
+    }
+  }
+  // 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')) {
+      errors.delete('nonInteractiveTrigger')
+    }
+    if (errors.has('hiddenInput')) {
+      errors.delete('nonInteractiveTrigger')
+    }
+  }
+
+  return errors
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: [
+      {
+        properties: {
+          skipImportCheck: {
+            type: 'boolean'
+          }
+        }
+      }
+    ],
+    messages: {
+      nonInteractiveTrigger:
+        'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',
+      anchorTagWithoutHref:
+        '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',
+      singleChild: 'The `Tooltip` component expects a single React element as a child.'
+    }
+  },
+  create(context) {
+    return {
+      JSXElement(jsxNode) {
+        // If `skipImportCheck` is true, this rule will check for non-interactive element in any components (not just ones that are imported from `@primer/react`).
+        const skipImportCheck = context.options[0] ? context.options[0].skipImportCheck : false
+        const name = getJSXOpeningElementName(jsxNode.openingElement)
+        if (
+          (skipImportCheck || isPrimerComponent(jsxNode.openingElement.name, context.getScope(jsxNode))) &&
+          name === 'Tooltip' &&
+          jsxNode.children
+        ) {
+          if (jsxNode.children.filter(child => child.type === 'JSXElement').length > 1) {
+            context.report({
+              node: jsxNode,
+              messageId: 'singleChild'
+            })
+          } else {
+            // Check if the child is interactive
+            const errors = checkTriggerElement(jsxNode)
+
+            if (errors) {
+              for (const [key, value] of errors.entries()) {
+                context.report({
+                  node: jsxNode,
+                  messageId: value
+                })
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/utils/get-jsx-opening-element-attribute.js

@@ -0,0 +1,10 @@
+function getJSXOpeningElementAttribute(openingEl, name) {
+  const attributes = openingEl.attributes
+  const attribute = attributes.find(attribute => {
+    return attribute.name.name === name
+  })
+
+  return attribute
+}
+
+exports.getJSXOpeningElementAttribute = getJSXOpeningElementAttribute