[Fix] no-interactive-tabindex: allow role assignments using a ternary with literals on both sides

Author: V2dha

__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),
 });

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 (