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: ''},
{