From dd3cba1dece64ea3695c3b493ebf83b25f368164 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 18 Jul 2023 10:52:20 -0400 Subject: [PATCH 1/2] Add failing test case --- tests/a11y-no-visually-hidden-interactive-element.js | 3 +++ 1 file changed, 3 insertions(+) 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: ''}, { From c2ea115877398c9d27e63fc10a04f2b8c24ab1fc Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 18 Jul 2023 11:04:56 -0400 Subject: [PATCH 2/2] Use literal prop --- lib/rules/a11y-no-visually-hidden-interactive-element.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) 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)) {