diff --git a/lib/rules/a11y-no-visually-hidden-interactive-element.js b/lib/rules/a11y-no-visually-hidden-interactive-element.js index 3c12812d..ac3e7142 100644 --- a/lib/rules/a11y-no-visually-hidden-interactive-element.js +++ b/lib/rules/a11y-no-visually-hidden-interactive-element.js @@ -1,4 +1,4 @@ -const {getProp, getPropValue} = require('jsx-ast-utils') +const {getProp, getLiteralPropValue} = require('jsx-ast-utils') const {getElementType} = require('../utils/get-element-type') const {generateObjSchema} = require('eslint-plugin-jsx-a11y/lib/util/schemas') @@ -32,9 +32,12 @@ const checkIfInteractiveElement = (context, node) => { const checkIfVisuallyHiddenAndInteractive = (context, options, node, isParentVisuallyHidden) => { const {className, componentName} = options if (node.type === 'JSXElement') { - const classes = getPropValue(getProp(node.openingElement.attributes, 'className')) + const classes = getLiteralPropValue(getProp(node.openingElement.attributes, 'className')) const isVisuallyHiddenElement = node.openingElement.name.name === componentName - const hasSROnlyClass = typeof classes !== 'undefined' && classes.includes(className) + let hasSROnlyClass = false + if (classes != null) { + hasSROnlyClass = classes.includes(className) + } let isHidden = false if (hasSROnlyClass || isVisuallyHiddenElement || !!isParentVisuallyHidden) { if (checkIfInteractiveElement(context, node)) { diff --git a/tests/a11y-no-visually-hidden-interactive-element.js b/tests/a11y-no-visually-hidden-interactive-element.js index 7db8bb4a..5879cf3e 100644 --- a/tests/a11y-no-visually-hidden-interactive-element.js +++ b/tests/a11y-no-visually-hidden-interactive-element.js @@ -23,6 +23,9 @@ ruleTester.run('a11y-no-visually-hidden-interactive-element', rule, { {code: "Text;"}, {code: ""}, {code: ""}, + { + code: " { return isOn || isOnProps ? `${className} selected`.trim() : className ?? ''}}/>", + }, {code: "skip to main content"}, {code: ''}, {