Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 27, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
060fbea
Disabled elements are not interactive and add this to the rule
broccolinisoup Jul 26, 2023
49abff7
update the rule message
broccolinisoup Jul 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 41 additions & 5 deletions src/rules/__tests__/a11y-tooltip-interactive-trigger.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
</Tooltip>`,
errors: [
{
messageId: 'anchorTagWithoutHref'
messageId: 'nonInteractiveLink'
}
]
},
Expand All @@ -108,7 +108,7 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
</Tooltip>`,
errors: [
{
messageId: 'anchorTagWithoutHref'
messageId: 'nonInteractiveLink'
}
]
},
Expand All @@ -120,7 +120,7 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
</Tooltip>`,
errors: [
{
messageId: 'hiddenInput'
messageId: 'nonInteractiveInput'
}
]
},
Expand All @@ -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'
}
]
},
Expand All @@ -159,7 +195,7 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
</Tooltip>`,
errors: [
{
messageId: 'anchorTagWithoutHref'
messageId: 'nonInteractiveLink'
}
]
}
Expand Down
52 changes: 25 additions & 27 deletions src/rules/a11y-tooltip-interactive-trigger.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand All @@ -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 => {
Expand All @@ -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
},
Expand All @@ -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)
Expand All @@ -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')
}
}
Expand All @@ -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.'
}
},
Expand Down