Merge pull request #606 from evcohen/589--make-expressions-pass-in-recommended-mode

[589] Allow expression statements for attribute values in no-noninteractive-tabindex

Author: jessebeach

__tests__/src/rules/no-noninteractive-tabindex-test.js

@@ -54,6 +54,8 @@ ruleTester.run(`${ruleName}:recommended`, rule, {
   valid: [
     ...alwaysValid,
     { code: '<div role="tabpanel" tabIndex="0" />' },
+    // Expressions should fail in strict mode
+    { code: '<div role={ROLE_BUTTON} onClick={() => {}} tabIndex="0" />;' },
   ]
     .map(ruleOptionsMapperFactory(recommendedOptions))
     .map(parserOptionsMapper),
@@ -71,5 +73,7 @@ ruleTester.run(`${ruleName}:strict`, rule, {
   invalid: [
     ...neverValid,
     { code: '<div role="tabpanel" tabIndex="0" />', errors: [expectedError] },
+    // Expressions should fail in strict mode
+    { code: '<div role={ROLE_BUTTON} onClick={() => {}} tabIndex="0" />;', errors: [expectedError] },
   ].map(parserOptionsMapper),
 });

package.json

@@ -32,6 +32,7 @@
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/plugin-transform-flow-strip-types": "^7.2.3",
+    "@babel/runtime": "^7.4.5",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.0.0",
     "babel-preset-airbnb": "^3.2.0",

src/index.js

@@ -170,6 +170,7 @@ module.exports = {
           {
             tags: [],
             roles: ['tabpanel'],
+            allowExpressionValues: true,
           },
         ],
         'jsx-a11y/no-onchange': 'error',

src/rules/no-noninteractive-tabindex.js

@@ -19,6 +19,7 @@ import includes from 'array-includes';
 import type { ESLintContext } from '../../flow/eslint';
 import isInteractiveElement from '../util/isInteractiveElement';
 import isInteractiveRole from '../util/isInteractiveRole';
+import isNonLiteralProperty from '../util/isNonLiteralProperty';
 import { generateObjSchema, arraySchema } from '../util/schemas';
 import getTabIndex from '../util/getTabIndex';
 
@@ -67,10 +68,17 @@ module.exports = {
         const {
           tags,
           roles,
+          allowExpressionValues,
         } = (options[0] || {});
+        if (tags && includes(tags, type)) {
+          return;
+        }
+        if (roles && includes(roles, role)) {
+          return;
+        }
         if (
-          (tags && includes(tags, type))
-          || (roles && includes(roles, role))
+          allowExpressionValues === true
+          && isNonLiteralProperty(attributes, 'role')
         ) {
           return;
         }