Add isInteractiveRole util module

Author: jessebeach

__tests__/__mocks__/attrMock.js

@@ -0,0 +1,13 @@
+export default function attrMock (prop, value) {
+  return {
+    type: 'JSXAttribute',
+    name: {
+      type: 'JSXIdentifier',
+      name: prop,
+    },
+    value: {
+      type: 'Literal',
+      value: value,
+    }
+  };
+}

__tests__/src/util/isInteractiveRole-test.js

@@ -0,0 +1,89 @@
+/* eslint-env mocha */
+import assert from 'assert';
+import isInteractiveRole from '../../../src/util/isInteractiveRole';
+import attrMock from '../../__mocks__/attrMock';
+
+describe('isInteractiveRole', () => {
+  describe('JSX Components (no tagName)', () => {
+    it('should identify them as interactive elements', () => {
+      expect(isInteractiveRole(undefined, [])).toBe(true);
+    });
+  });
+  describe('elements with an interactive role', () => {
+    it('should identify them as interactive elements', () => {
+      [
+        'button',
+        'checkbox',
+        'link',
+        'menuitem',
+        'menuitemcheckbox',
+        'menuitemradio',
+        'option',
+        'radio',
+        'spinbutton',
+        'tab',
+        'textbox',
+      ].forEach(role => expect(isInteractiveRole('div', [
+        attrMock('role', role)
+      ])).toBe(true));
+    });
+  });
+  describe('elements with a non-interactive role', () => {
+    it('should not identify them as interactive elements', () => {
+      [
+        'alert',
+        'alertdialog',
+        'dialog',
+        'gridcell',
+        'log',
+        'marquee',
+        'progressbar',
+        'scrollbar',
+        'slider',
+        'status',
+        'tabpanel',
+        'timer',
+        'tooltip',
+        'treeitem',
+        'combobox',
+        'grid',
+        'listbox',
+        'menu',
+        'menubar',
+        'radiogroup',
+        'tablist',
+        'tree',
+        'treegrid',
+        'article',
+        'columnheader',
+        'definition',
+        'directory',
+        'document',
+        'group',
+        'heading',
+        'img',
+        'list',
+        'listitem',
+        'math',
+        'note',
+        'presentation',
+        'region',
+        'row',
+        'rowgroup',
+        'rowheader',
+        'separator',
+        'toolbar',
+        'application',
+        'banner',
+        'complementary',
+        'contentinfo',
+        'form',
+        'main',
+        'navigation',
+        'search',
+      ].forEach(role => expect(isInteractiveRole('div', [
+        attrMock('role', role)
+      ])).toBe(false));
+    });
+  });
+});

src/rules/onclick-has-focus.js

@@ -7,6 +7,7 @@ import { getProp, elementType } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 import isInteractiveElement from '../util/isInteractiveElement';
+import isInteractiveRole from '../util/isInteractiveRole';
 import getTabIndex from '../util/getTabIndex';
 
 // ----------------------------------------------------------------------------
@@ -38,6 +39,8 @@ module.exports = {
         return;
       } else if (isInteractiveElement(type, attributes)) {
         return;
+      } else if (isInteractiveRole(type, attributes)) {
+        return;
       } else if (getTabIndex(getProp(attributes, 'tabIndex')) !== undefined) {
         return;
       }

src/util/isInteractiveRole.js

@@ -0,0 +1,36 @@
+import { getProp, getLiteralPropValue } from 'jsx-ast-utils';
+import DOMElements from './attributes/DOM.json';
+
+// Map of tagNames to functions that return whether that element is interactive or not.
+const interactiveSet = [
+  'button',
+  'checkbox',
+  'link',
+  'menuitem',
+  'menuitemcheckbox',
+  'menuitemradio',
+  'option',
+  'radio',
+  'spinbutton',
+  'tab',
+  'textbox',
+];
+
+/**
+ * Returns boolean indicating whether the given element has a role
+ * that is associated with an interactive component. Used when an element
+ * has a dynamic handler on it and we need to discern whether or not
+ * it's intention is to be interacted with in the DOM.
+ */
+const isInteractiveRole = (tagName, attributes) => {
+  // Do not test higher level JSX components, as we do not know what
+  // low-level DOM element this maps to.
+  if (Object.keys(DOMElements).indexOf(tagName) === -1) {
+    return true;
+  }
+  return (interactiveSet.indexOf(
+    (getLiteralPropValue(getProp(attributes, 'role')) || '').toLowerCase(),
+  ) > -1);
+};
+
+export default isInteractiveRole;