[Fix] no-interactive-tabindex: allow role assignments using a terna…

…ry with literals on both sides
jsx-eslint · Jul 7, 2022 · 38405ad · 38405ad
1 parent f0e04ce
commit 38405ad
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/__tests__/src/rules/no-noninteractive-tabindex-test.js b/__tests__/src/rules/no-noninteractive-tabindex-test.js
@@ -65,8 +65,28 @@ ruleTester.run(`${ruleName}:recommended`, rule, {
   valid: [
     ...alwaysValid,
     { code: '<div role="tabpanel" tabIndex="0" />' },
-    // Expressions should fail in strict mode
+    // Expressions should pass in recommended mode
     { code: '<div role={ROLE_BUTTON} onClick={() => {}} tabIndex="0" />;' },
+    // Cases for allowExpressionValues set to true
+    {
+      code: '<div role={BUTTON} onClick={() => {}} tabIndex="0" />;',
+      options: [{ allowExpressionValues: true }],
+    },
+    // Specific case for ternary operator with literals on both side
+    {
+      code: '<div role={isButton ? "button" : "link"} onClick={() => {}} tabIndex="0" />;',
+      options: [{ allowExpressionValues: true }],
+    },
+    {
+      code: '<div role={isButton ? "button" : LINK} onClick={() => {}} tabIndex="0" />;',
+      options: [{ allowExpressionValues: true }],
+      errors: [expectedError],
+    },
+    {
+      code: '<div role={isButton ? BUTTON : LINK} onClick={() => {}} tabIndex="0"/>;',
+      options: [{ allowExpressionValues: true }],
+      errors: [expectedError],
+    },
   ]
     .map(ruleOptionsMapperFactory(recommendedOptions))
     .map(parserOptionsMapper),
@@ -86,5 +106,17 @@ ruleTester.run(`${ruleName}:strict`, rule, {
     { code: '<div role="tabpanel" tabIndex="0" />', errors: [expectedError] },
     // Expressions should fail in strict mode
     { code: '<div role={ROLE_BUTTON} onClick={() => {}} tabIndex="0" />;', errors: [expectedError] },
+    // Cases for allowExpressionValues set to false
+    {
+      code: '<div role={BUTTON} onClick={() => {}} tabIndex="0" />;',
+      options: [{ allowExpressionValues: false }],
+      errors: [expectedError],
+    },
+    // Specific case for ternary operator with literals on both side
+    {
+      code: '<div role={isButton ? "button" : "link"} onClick={() => {}} tabIndex="0" />;',
+      options: [{ allowExpressionValues: false }],
+      errors: [expectedError],
+    },
   ].map(parserOptionsMapper),
 });
diff --git a/src/rules/no-noninteractive-tabindex.js b/src/rules/no-noninteractive-tabindex.js
@@ -82,6 +82,18 @@ export default ({
           allowExpressionValues === true
           && isNonLiteralProperty(attributes, 'role')
         ) {
+          // Special case if role is assigned using ternary with literals on both side
+          const roleProp = getProp(attributes, 'role');
+          if (roleProp && roleProp.type === 'JSXAttribute' && roleProp.value.type === 'JSXExpressionContainer') {
+            if (roleProp.value.expression.type === 'ConditionalExpression') {
+              if (
+                roleProp.value.expression.consequent.type === 'Literal'
+                && roleProp.value.expression.alternate.type === 'Literal'
+              ) {
+                return;
+              }
+            }
+          }
           return;
         }
         if (