Merge pull request #280 from jessebeach/t270--onclick-has-key-events-presentation-role

Do not fail presentation roles in click-events-have-key-events

Author: jessebeach

__tests__/src/rules/click-events-have-key-events-test.js

@@ -49,6 +49,8 @@ ruleTester.run('click-events-have-key-events', rule, {
     { code: '<a onClick={() => void 0} href="http://x.y.z" />' },
     { code: '<a onClick={() => void 0} href="http://x.y.z" tabIndex="0" />' },
     { code: '<input onClick={() => void 0} type="hidden" />;' },
+    { code: '<div onClick={() => void 0} role="presentation" />;' },
+    { code: '<div onClick={() => void 0} role="none" />;' },
     { code: '<TestComponent onClick={doFoo} />' },
     { code: '<Button onClick={doFoo} />' },
   ].map(parserOptionsMapper),

src/rules/click-events-have-key-events.js

@@ -15,6 +15,7 @@ import includes from 'array-includes';
 import { generateObjSchema } from '../util/schemas';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 import isInteractiveElement from '../util/isInteractiveElement';
+import isPresentationRole from '../util/isPresentationRole';
 
 const errorMessage = 'Visible, non-interactive elements with click handlers' +
 ' must have at least one keyboard listener.';
@@ -42,7 +43,10 @@ module.exports = {
         // Do not test higher level JSX components, as we do not know what
         // low-level DOM element this maps to.
         return;
-      } else if (isHiddenFromScreenReader(type, props)) {
+      } else if (
+        isHiddenFromScreenReader(type, props)
+        || isPresentationRole(type, props)
+      ) {
         return;
       } else if (isInteractiveElement(type, props)) {
         return;