Merge branch 'master' into another-attempt-at-eslint-v6

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

__tests__/src/rules/no-static-element-interactions-test.js

@@ -97,6 +97,7 @@ const alwaysValid = [
   { code: '<div role="treeitem" onClick={() => {}} />;' },
   /* Presentation is a special case role that indicates intentional static semantics */
   { code: '<div role="presentation" onClick={() => {}} />;' },
+  { code: '<div role="presentation" onKeyDown={() => {}} />;' },
   /* HTML elements with an inherent, non-interactive role */
   { code: '<main onClick={() => void 0} />;' },
   { code: '<article onClick={() => {}} />;' },
@@ -257,7 +258,6 @@ const alwaysValid = [
   { code: '<div onAnimationEnd={() => {}} />;' },
   { code: '<div onAnimationIteration={() => {}} />;' },
   { code: '<div onTransitionEnd={() => {}} />;' },
-  { code: '<div  {...this.props} role={this.props.role} onKeyPress={e => this.handleKeyPress(e)}>{this.props.children}</div>' },
 ];
 
 const neverValid = [
@@ -412,6 +412,9 @@ ruleTester.run(`${ruleName}:recommended`, rule, {
     { code: '<div onAnimationEnd={() => {}} />;' },
     { code: '<div onAnimationIteration={() => {}} />;' },
     { code: '<div onTransitionEnd={() => {}} />;' },
+    // Expressions should pass in recommended mode
+    { code: '<div role={ROLE_BUTTON} onClick={() => {}} />;' },
+    { code: '<div  {...this.props} role={this.props.role} onKeyPress={e => this.handleKeyPress(e)}>{this.props.children}</div>' },
   ]
     .map(ruleOptionsMapperFactory(recommendedOptions))
     .map(parserOptionsMapper),
@@ -445,5 +448,8 @@ ruleTester.run(`${ruleName}:strict`, rule, {
     { code: '<div onMouseMove={() => {}} />;', errors: [expectedError] },
     { code: '<div onMouseOut={() => {}} />;', errors: [expectedError] },
     { code: '<div onMouseOver={() => {}} />;', errors: [expectedError] },
+    // Expressions should fail in strict mode
+    { code: '<div role={ROLE_BUTTON} onClick={() => {}} />;', errors: [expectedError] },
+    { code: '<div  {...this.props} role={this.props.role} onKeyPress={e => this.handleKeyPress(e)}>{this.props.children}</div>', errors: [expectedError] },
   ].map(parserOptionsMapper),
 });

package.json

@@ -43,7 +43,7 @@
     "eslint-plugin-import": "^2.18.0",
     "estraverse": "^4.2.0",
     "expect": "^24.3.1",
-    "flow-bin": "^0.100.0",
+    "flow-bin": "^0.101.0",
     "in-publish": "^2.0.0",
     "jest": "^24.0.0",
     "jscodeshift": "^0.6.0",
@@ -65,7 +65,7 @@
     "damerau-levenshtein": "^1.0.4",
     "emoji-regex": "^7.0.2",
     "has": "^1.0.3",
-    "jsx-ast-utils": "^2.0.1"
+    "jsx-ast-utils": "^2.2.0"
   },
   "peerDependencies": {
     "eslint": "^3 || ^4 || ^5 || ^6"

src/index.js

@@ -170,13 +170,15 @@ module.exports = {
           {
             tags: [],
             roles: ['tabpanel'],
+            allowExpressionValues: true,
           },
         ],
         'jsx-a11y/no-onchange': 'error',
         'jsx-a11y/no-redundant-roles': 'error',
         'jsx-a11y/no-static-element-interactions': [
           'error',
           {
+            allowExpressionValues: true,
             handlers: [
               'onClick',
               'onMouseDown',

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;
         }

src/rules/no-static-element-interactions.js

@@ -26,8 +26,8 @@ import isInteractiveElement from '../util/isInteractiveElement';
 import isInteractiveRole from '../util/isInteractiveRole';
 import isNonInteractiveElement from '../util/isNonInteractiveElement';
 import isNonInteractiveRole from '../util/isNonInteractiveRole';
-import isPresentationRole from '../util/isPresentationRole';
 import isNonLiteralProperty from '../util/isNonLiteralProperty';
+import isPresentationRole from '../util/isPresentationRole';
 
 const errorMessage = 'Static HTML elements with event handlers require a role.';
 
@@ -55,11 +55,12 @@ module.exports = {
       JSXOpeningElement: (node: JSXOpeningElement) => {
         const { attributes } = node;
         const type = elementType(node);
-        const interactiveProps = options[0]
-          ? options[0].handlers
-          : defaultInteractiveProps;
+        const {
+          allowExpressionValues,
+          handlers = defaultInteractiveProps,
+        } = (options[0] || {});
 
-        const hasInteractiveProps = interactiveProps
+        const hasInteractiveProps = handlers
           .some(prop => (
             hasProp(attributes, prop)
             && getPropValue(getProp(attributes, prop)) != null
@@ -91,7 +92,10 @@ module.exports = {
           return;
         }
 
-        if (isNonLiteralProperty(attributes, 'role')) {
+        if (
+          allowExpressionValues === true
+          && isNonLiteralProperty(attributes, 'role')
+        ) {
           // This rule has no opinion about non-literal roles.
           return;
         }