Allow configuration override on no-noninteractive-element-interactions

jessebeach · ljharb · commit 3750a8da1bf2 · 2018-01-01T20:02:09.000-08:00
diff --git a/__tests__/src/rules/no-noninteractive-element-interactions-test.js b/__tests__/src/rules/no-noninteractive-element-interactions-test.js
@@ -117,6 +117,7 @@ const alwaysValid = [
   { code: '<html onClick={() => {}} />;' },
   { code: '<i onClick={() => {}} />;' },
   { code: '<iframe onLoad={() => {}} />;' },
+  { code: '<img onError={() => {}} />;' },
   { code: '<img onLoad={() => {}} />;' },
   { code: '<ins onClick={() => {}} />;' },
   { code: '<kbd onClick={() => {}} />;' },
@@ -229,7 +230,6 @@ const alwaysValid = [
   { code: '<div role="article" onEmptied={() => {}} />;' },
   { code: '<div role="article" onEncrypted={() => {}} />;' },
   { code: '<div role="article" onEnded={() => {}} />;' },
-  { code: '<div role="article" onError={() => {}} />;' },
   { code: '<div role="article" onLoadedData={() => {}} />;' },
   { code: '<div role="article" onLoadedMetadata={() => {}} />;' },
   { code: '<div role="article" onLoadStart={() => {}} />;' },
@@ -245,8 +245,6 @@ const alwaysValid = [
   { code: '<div role="article" onTimeUpdate={() => {}} />;' },
   { code: '<div role="article" onVolumeChange={() => {}} />;' },
   { code: '<div role="article" onWaiting={() => {}} />;' },
-  { code: '<div role="article" onLoad={() => {}} />;' },
-  { code: '<div role="article" onError={() => {}} />;' },
   { code: '<div role="article" onAnimationStart={() => {}} />;' },
   { code: '<div role="article" onAnimationEnd={() => {}} />;' },
   { code: '<div role="article" onAnimationIteration={() => {}} />;' },
@@ -344,6 +342,8 @@ const neverValid = [
   { code: '<div role="article" onKeyPress={() => {}} />;', errors: [expectedError] },
   { code: '<div role="article" onKeyUp={() => {}} />;', errors: [expectedError] },
   { code: '<div role="article" onClick={() => {}} />;', errors: [expectedError] },
+  { code: '<div role="article" onLoad={() => {}} />;', errors: [expectedError] },
+  { code: '<div role="article" onError={() => {}} />;', errors: [expectedError] },
   { code: '<div role="article" onMouseDown={() => {}} />;', errors: [expectedError] },
   { code: '<div role="article" onMouseUp={() => {}} />;', errors: [expectedError] },
 ];
@@ -395,7 +395,6 @@ ruleTester.run(`${ruleName}:recommended`, rule, {
     { code: '<div role="article" onEmptied={() => {}} />;' },
     { code: '<div role="article" onEncrypted={() => {}} />;' },
     { code: '<div role="article" onEnded={() => {}} />;' },
-    { code: '<div role="article" onError={() => {}} />;' },
     { code: '<div role="article" onLoadedData={() => {}} />;' },
     { code: '<div role="article" onLoadedMetadata={() => {}} />;' },
     { code: '<div role="article" onLoadStart={() => {}} />;' },
@@ -411,8 +410,6 @@ ruleTester.run(`${ruleName}:recommended`, rule, {
     { code: '<div role="article" onTimeUpdate={() => {}} />;' },
     { code: '<div role="article" onVolumeChange={() => {}} />;' },
     { code: '<div role="article" onWaiting={() => {}} />;' },
-    { code: '<div role="article" onLoad={() => {}} />;' },
-    { code: '<div role="article" onError={() => {}} />;' },
     { code: '<div role="article" onAnimationStart={() => {}} />;' },
     { code: '<div role="article" onAnimationEnd={() => {}} />;' },
     { code: '<div role="article" onAnimationIteration={() => {}} />;' },
@@ -427,10 +424,14 @@ ruleTester.run(`${ruleName}:recommended`, rule, {
     .map(parserOptionsMapper),
 });
 
+const strictOptions =
+  (configs.strict.rules[`jsx-a11y/${ruleName}`][1] || {});
 ruleTester.run(`${ruleName}:strict`, rule, {
   valid: [
     ...alwaysValid,
-  ].map(parserOptionsMapper),
+  ]
+    .map(ruleOptionsMapperFactory(strictOptions))
+    .map(parserOptionsMapper),
   invalid: [
     ...neverValid,
     // All the possible handlers
@@ -452,5 +453,7 @@ ruleTester.run(`${ruleName}:strict`, rule, {
     { code: '<div role="article" onMouseMove={() => {}} />;', errors: [expectedError] },
     { code: '<div role="article" onMouseOut={() => {}} />;', errors: [expectedError] },
     { code: '<div role="article" onMouseOver={() => {}} />;', errors: [expectedError] },
-  ].map(parserOptionsMapper),
+  ]
+    .map(ruleOptionsMapperFactory(strictOptions))
+    .map(parserOptionsMapper),
 });
diff --git a/src/index.js b/src/index.js
@@ -90,12 +90,17 @@ module.exports = {
           {
             handlers: [
               'onClick',
+              'onError',
+              'onLoad',
               'onMouseDown',
               'onMouseUp',
               'onKeyPress',
               'onKeyDown',
               'onKeyUp',
             ],
+            body: ['onError', 'onLoad'],
+            iframe: ['onError', 'onLoad'],
+            img: ['onError', 'onLoad'],
           },
         ],
         'jsx-a11y/no-noninteractive-element-to-interactive-role': [
@@ -196,7 +201,14 @@ module.exports = {
         'jsx-a11y/no-autofocus': 'error',
         'jsx-a11y/no-distracting-elements': 'error',
         'jsx-a11y/no-interactive-element-to-noninteractive-role': 'error',
-        'jsx-a11y/no-noninteractive-element-interactions': 'error',
+        'jsx-a11y/no-noninteractive-element-interactions': [
+          'error',
+          {
+            body: ['onError', 'onLoad'],
+            iframe: ['onError', 'onLoad'],
+            img: ['onError', 'onLoad'],
+          },
+        ],
         'jsx-a11y/no-noninteractive-element-to-interactive-role': 'error',
         'jsx-a11y/no-noninteractive-tabindex': 'error',
         'jsx-a11y/no-onchange': 'error',
diff --git a/src/rules/no-noninteractive-element-interactions.js b/src/rules/no-noninteractive-element-interactions.js
@@ -16,6 +16,7 @@ import {
   getPropValue,
   getProp,
   hasProp,
+  propName,
 } from 'jsx-ast-utils';
 import type { JSXOpeningElement } from 'ast-types-flow';
 import includes from 'array-includes';
@@ -35,6 +36,7 @@ const errorMessage =
 const domElements = [...dom.keys()];
 const defaultInteractiveProps = [
   ...eventHandlersByType.focus,
+  ...eventHandlersByType.image,
   ...eventHandlersByType.keyboard,
   ...eventHandlersByType.mouse,
 ];
@@ -52,11 +54,14 @@ module.exports = {
     const { options } = context;
     return {
       JSXOpeningElement: (node: JSXOpeningElement) => {
-        const { attributes } = node;
+        let { attributes } = node;
         const type = elementType(node);
-        const interactiveProps = options[0]
-          ? options[0].handlers
-          : defaultInteractiveProps;
+        const config = (options[0] || {});
+        const interactiveProps = config.handlers || defaultInteractiveProps;
+        // Allow overrides from rule configuration for specific elements and roles.
+        if (Object.prototype.hasOwnProperty.call(config, type)) {
+          attributes = attributes.filter(attr => !includes(config[type], propName(attr)));
+        }
 
         const hasInteractiveProps = interactiveProps
           .some(prop => (
