Add an eslint rule for checking interactivity of tooltip trigger

Author: broccolinisoup

src/rules/__tests__/non-interactive-tooltip-trigger.test.js

@@ -0,0 +1,81 @@
+const rule = require('../non-interactive-tooltip-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>`
+  ],
+  invalid: [
+    {
+      code: `import {Tooltip} from '@primer/react';<Tooltip type="description" text="supportive text" direction="e"><button>save</button><button>cancel</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} from '@primer/react';<Tooltip aria-label="Supplementary text" direction="e"><input type="hidden" /></Tooltip>`,
+      errors: [
+        {
+          messageId: 'hiddenInput'
+        }
+      ]
+    },
+    {
+      code: `import {Tooltip, Button} from '@primer/react';<Tooltip aria-label="Supplementary text" direction="e"><heading><span>Save</span></heading></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: 'nonInteractiveTrigger'
+        }
+      ]
+    }
+  ]
+})

src/rules/non-interactive-tooltip-trigger.js

@@ -0,0 +1,126 @@
+const {isPrimerComponent} = require('../utils/is-primer-component')
+const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
+const {getJSXOpeningElementAttribute} = require('../utils/get-attribute')
+
+isInteractive = child => {
+  const childName = getJSXOpeningElementName(child.openingElement)
+  return ['button', 'summary', 'select', 'textarea', 'a', 'input', 'iconbutton'].includes(childName.toLowerCase())
+}
+
+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
+}
+
+isInteractiveInput = child => {
+  const hasHiddenType =
+    getJSXOpeningElementAttribute(child.openingElement, 'type') &&
+    getJSXOpeningElementAttribute(child.openingElement, 'type').value.value === 'hidden'
+  return !hasHiddenType
+}
+
+const checkTriggerElement = jsxNode => {
+  let messageId = ''
+  const child = jsxNode.children
+  const childName = getJSXOpeningElementName(child.openingElement)
+
+  // First check specific requirements for anchor
+  if (childName === 'a' && !isInteractiveAnchor(child)) {
+    messageId = 'anchorTagWithoutHref'
+    return {messageId, node: jsxNode}
+  }
+  // Then check specific requirements input
+  if (childName === 'input' && !isInteractiveInput(child)) {
+    messageId = 'hiddenInput'
+    return {messageId, node: jsxNode}
+  }
+  // Then check if the child is interactive
+  if (!isInteractive(child)) {
+    // If child is not interactive, check if there are any grandchildren that is interactive
+    const hasJsxGrands =
+      child.children.length > 0 && child.children.filter(gChild => gChild.type === 'JSXElement').length > 0 //.some(gChild => isInteractive(gChild))
+
+    if (!hasJsxGrands) {
+      messageId = 'nonInteractiveTrigger'
+    } else {
+      const hasInteractiveGrands = child.children // is there any way I can access all child nodes? :/
+        .filter(gChild => gChild.type === 'JSXElement')
+        .some(gChild => {
+          const gChildName = getJSXOpeningElementName(gChild.openingElement)
+          // TODO: How can I check all child nodes?
+          return checkTriggerElement(gChild).messageId === ''
+        })
+      if (!hasInteractiveGrands) messageId = 'nonInteractiveTrigger'
+    }
+
+    return {messageId, node: jsxNode}
+  }
+
+  // All good the element is interactive
+  return {messageId, node: jsxNode}
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      url:
+        'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-noninteractive-element-interactions.md',
+      description: 'Non-interactive elements should not be assigned mouse or keyboard event listeners.'
+    },
+    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 be considered interactive, therefore can not be used as a trigger for a tooltip.',
+      hiddenInput:
+        'Hidden inputs are not be considered interactive, therefore can not be used as a trigger for a tooltip.',
+      singleChild: 'The `Tooltip` component expects a single React element as a child.'
+    }
+  },
+  create(context) {
+    const stack = []
+    const {options} = context
+    return {
+      JSXElement(jsxNode) {
+        // If `skipImportCheck` is true, this rule will check for direct slot children
+        // 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 (name === 'Tooltip' && jsxNode.children) {
+          // Check if there is a single child
+          if (jsxNode.children.length > 1) {
+            context.report({
+              node: jsxNode,
+              messageId: 'singleChild'
+            })
+          } else {
+            // Check if the child is interactive
+            const {node, messageId} = checkTriggerElement(jsxNode)
+
+            if (messageId !== '') {
+              context.report({
+                node,
+                messageId
+              })
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/utils/get-attribute.js

@@ -0,0 +1,11 @@
+function getJSXOpeningElementAttribute(openingEl, name) {
+  const attributes = openingEl.attributes
+  const attribute = attributes.find(attribute => {
+    // console.log('hey attribute', attribute)
+    return attribute.name.name === name
+  })
+
+  return attribute
+}
+
+exports.getJSXOpeningElementAttribute = getJSXOpeningElementAttribute