Use the existing role and DOM json files.

Author: jessebeach

.babelrc

@@ -1,3 +1,6 @@
 {
-  "presets": ["es2015"]
+  "presets": ["es2015"],
+  "plugins": [
+    "transform-object-rest-spread"
+  ]
 }

__mocks__/genInteractives.js

@@ -1,212 +1,45 @@
 import JSXAttributeMock from 'JSXAttributeMock';
 import JSXElementMock from 'JSXElementMock';
+import DOMElements from '../src/util/attributes/DOM.json';
+import roles from '../src/util/attributes/role.json';
+
+const pureInteractiveElements = {};
+Object.keys(DOMElements)
+  .filter(name => DOMElements[name].interactive === true)
+  .forEach(name => pureInteractiveElements[name] = []);
 
 const interactiveElementsMap = {
+  ...pureInteractiveElements,
   a: [
     {prop: 'href', value: '#'}
   ],
   area: [
     {prop: 'href', value: '#'}
   ],
-  button: [],
   input: [
     {prop: 'type', value: 'text'}
   ],
-  option: [],
-  select: [],
-  textarea: [],
 };
 
+const pureNonInteractiveElementsMap = {};
+Object.keys(DOMElements)
+  .filter(name => !DOMElements[name].interactive)
+  .forEach(name => pureNonInteractiveElementsMap[name] = []);
+
 const nonInteractiveElementsMap = {
-  html: [],
-  base: [],
-  head: [],
-  link: [],
-  meta: [],
-  style: [],
-  title: [],
-  address: [],
-  article: [],
-  aside: [],
-  footer: [],
-  header: [],
-  h1: [],
-  h2: [],
-  h3: [],
-  h4: [],
-  h5: [],
-  h6: [],
-  hgroup: [],
-  nav: [],
-  section: [],
-  dd: [],
-  dl: [],
-  dt: [],
-  figcaption: [],
-  figure: [],
-  hr: [],
-  li: [],
-  main: [],
-  ol: [],
-  p: [],
-  pre: [],
-  ul: [],
-  a: [],
-  abbr: [],
-  b: [],
-  bdi: [],
-  bdo: [],
-  br: [],
-  cite: [],
-  code: [],
-  data: [],
-  dfn: [],
-  em: [],
-  i: [],
-  kbd: [],
-  mark: [],
-  q: [],
-  rp: [],
-  rt: [],
-  rtc: [],
-  ruby: [],
-  s: [],
-  samp: [],
-  small: [],
-  strong: [],
-  sub: [],
-  sup: [],
-  time: [],
-  u: [],
-  var: [],
-  wbr: [],
-  area: [],
-  audio: [],
-  img: [],
-  map: [],
-  track: [],
-  video: [],
-  embed: [],
-  object: [],
-  param: [],
-  source: [],
-  canvas: [],
-  noscript: [],
-  script: [],
-  del: [],
-  ins: [],
-  caption: [],
-  col: [],
-  colgroup: [],
-  table: [],
-  tbody: [],
-  td: [],
-  tfoot: [],
-  th: [],
-  thead: [],
-  tr: [],
-  datalist: [],
-  fieldset: [],
-  form: [],
+  ...pureNonInteractiveElementsMap,
   input: [
     {prop: 'type', value: 'hidden'}
   ],
-  label: [],
-  legend: [],
-  meter: [],
-  optgroup: [],
-  output: [],
-  progress: [],
-  details: [],
-  dialog: [],
-  menu: [],
-  menuitem: [],
-  summary: [],
-  content: [],
-  acronym: [],
-  applet: [],
-  big: [],
-  blink: [],
-  center: [],
-  dir: [],
-  font: [],
-  frame: [],
-  frameset: [],
-  keygen: [],
-  marquee: [],
-  noembed: [],
-  spacer: [],
-  strike: [],
-  tt: [],
-  xmp: [],
 };
 
-const interactiveRoles = [
-  'button',
-  'checkbox',
-  'link',
-  'menuitem',
-  'menuitemcheckbox',
-  'menuitemradio',
-  'option',
-  'radio',
-  'spinbutton',
-  'tab',
-  'textbox',
-];
+const interactiveRoles = Object.keys(roles).filter(
+  role => roles[role].interactive === true
+);
 
-const nonInteractiveRoles = [
-  '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',
-];
+const nonInteractiveRoles = Object.keys(roles).filter(
+  role => roles[role].interactive === false
+);
 
 export function genInteractiveElements () {
   const elements = [];

__tests__/src/rules/onclick-has-focus-test.js

@@ -25,7 +25,7 @@ const parserOptions = {
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: 'Elements with onClick handlers must be focusable. ' +
+  message: 'Interactive elements with onClick handlers must be focusable. ' +
     'Either set the tabIndex property to a valid value (usually 0), ' +
     'or use an element type which is inherently focusable such as `button`.',
   type: 'JSXOpeningElement',
@@ -47,6 +47,7 @@ ruleTester.run('onclick-has-focus', rule, {
     { code: '<div onClick={() => void 0} tabIndex={undefined} />;', parserOptions },
     { code: '<div onClick={() => void 0} tabIndex="bad" />;', parserOptions },
     { code: '<div onClick={() => void 0} role={undefined} />;', parserOptions },
+    { code: '<div role="section" onClick={() => void 0} />', parserOptions },
     { code: '<div onClick={() => void 0} aria-hidden={false} />;', parserOptions },
     { code: '<div onClick={() => void 0} {...props} />;', parserOptions },
     { code: '<input type="text" onClick={() => void 0} />', parserOptions },
@@ -96,6 +97,7 @@ ruleTester.run('onclick-has-focus', rule, {
     { code: '<div role="option" tabIndex="0" onClick={() => void 0} />', parserOptions },
     { code: '<div role="radio" tabIndex="0" onClick={() => void 0} />', parserOptions },
     { code: '<div role="spinbutton" tabIndex="0" onClick={() => void 0} />', parserOptions },
+    { code: '<div role="switch" tabIndex="0" onClick={() => void 0} />', parserOptions },
     { code: '<div role="tab" tabIndex="0" onClick={() => void 0} />', parserOptions },
     { code: '<div role="textbox" tabIndex="0" onClick={() => void 0} />', parserOptions },
     { code: '<Foo.Bar onClick={() => void 0} aria-hidden={false} />;', parserOptions },
@@ -158,6 +160,11 @@ ruleTester.run('onclick-has-focus', rule, {
       errors: [expectedError],
       parserOptions,
     },
+    {
+      code: '<div role="switch" onClick={() => void 0} />',
+      errors: [expectedError],
+      parserOptions,
+    },
     {
       code: '<div role="tab" onClick={() => void 0} />',
       errors: [expectedError],

__tests__/src/util/isInteractiveElement-test.js

@@ -15,29 +15,28 @@ describe('isInteractiveElement', () => {
     });
   });
   describe('non-interactive elements', () => {
-    it('should not identify them as interactive elements', () => {
-      genNonInteractiveElements().forEach(
-        ({
-          type,
-          openingElement,
-        }) => expect(isInteractiveElement(
-          elementType(openingElement),
-          openingElement.attributes,
-        )).toBe(false)
-      );
-    });
+
+    genNonInteractiveElements().forEach(
+      ({ openingElement }) => {
+        it(`should not identify \`${openingElement.name.name}\` as an interactive element`, () => {
+          expect(isInteractiveElement(
+            elementType(openingElement),
+            openingElement.attributes,
+          )).toBe(false);
+        });
+      }
+    );
   });
   describe('interactive elements', () => {
-    it('should identify them as interactive elements', () => {
-      genInteractiveElements().forEach(
-        ({
-          type,
-          openingElement,
-        }) => expect(isInteractiveElement(
-          elementType(openingElement),
-          openingElement.attributes,
-        )).toBe(true)
-      );
-    });
+    genInteractiveElements().forEach(
+      ({ openingElement }) => {
+        it(`should identify \`${openingElement.name.name}\` as an interactive element`, () => {
+          expect(isInteractiveElement(
+            elementType(openingElement),
+            openingElement.attributes,
+          )).toBe(true);
+        });
+      }
+    );
   });
 });

__tests__/src/util/isInteractiveRole-test.js

@@ -1,6 +1,6 @@
 /* eslint-env mocha */
 import assert from 'assert';
-import { elementType } from 'jsx-ast-utils';
+import { elementType, getProp, getLiteralPropValue } from 'jsx-ast-utils';
 import isInteractiveRole from '../../../src/util/isInteractiveRole';
 import {
   genInteractiveRoleElements,
@@ -15,34 +15,36 @@ describe('isInteractiveRole', () => {
     });
   });
   describe('elements with a non-interactive role', () => {
-    it('should not identify them as interactive role elements', () => {
-      genNonInteractiveRoleElements().forEach(
-        ({
-          type,
-          openingElement,
-        }) => expect(isInteractiveRole(
-          elementType(openingElement),
-          openingElement.attributes,
-        )).toBe(false)
-      );
-    });
+    genNonInteractiveRoleElements().forEach(
+      ({ openingElement }) => {
+        const attributes = openingElement.attributes;
+        const role = getLiteralPropValue(getProp(attributes, 'role')).toLowerCase();
+        it(`should not identify \`${role}\` as an interactive role element`, () => {
+          expect(isInteractiveRole(
+            elementType(openingElement),
+            attributes,
+          )).toBe(false)
+        });
+      }
+    );
   });
   describe('elements without a role', () => {
     it('should not identify them as interactive role elements', () => {
       expect(isInteractiveRole('div', [])).toBe(false);
     });
   });
   describe('elements with an interactive role', () => {
-    it('should identify them as interactive role elements', () => {
-      genInteractiveRoleElements().forEach(
-        ({
-          type,
-          openingElement,
-        }) => expect(isInteractiveRole(
-          elementType(openingElement),
-          openingElement.attributes,
-        )).toBe(true)
-      );
-    });
+    genInteractiveRoleElements().forEach(
+      ({ openingElement }) => {
+        const attributes = openingElement.attributes;
+        const role = getLiteralPropValue(getProp(attributes, 'role')).toLowerCase();
+        it(`should identify \`${role}\` as an interactive role element`, () => {
+          expect(isInteractiveRole(
+            elementType(openingElement),
+            attributes,
+          )).toBe(true)
+        });
+      }
+    );
   });
 });