Merge pull request #70 from primer/bs/disabled-check

Disabled elements are not interactive and add this to the rule (Tooltip)

Author: broccolinisoup

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

@@ -96,7 +96,7 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'anchorTagWithoutHref'
+          messageId: 'nonInteractiveLink'
         }
       ]
     },
@@ -108,7 +108,7 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'anchorTagWithoutHref'
+          messageId: 'nonInteractiveLink'
         }
       ]
     },
@@ -120,7 +120,7 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'hiddenInput'
+          messageId: 'nonInteractiveInput'
         }
       ]
     },
@@ -132,7 +132,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 +195,7 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'anchorTagWithoutHref'
+          messageId: 'nonInteractiveLink'
         }
       ]
     }

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

@@ -4,16 +4,21 @@ const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-elemen
 
 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 isInteractiveAnchor = child => {
@@ -25,17 +30,15 @@ const isInteractiveAnchor = child => {
 }
 
 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 +60,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 +79,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 +108,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 +133,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.'
     }
   },