Added isNonInteractiveElement util

Author: jessebeach

__mocks__/genInteractives.js

@@ -1,3 +1,7 @@
+/**
+ * @flow
+ */
+
 import {
   dom,
   roles,
@@ -6,6 +10,7 @@ import JSXAttributeMock from './JSXAttributeMock';
 import JSXElementMock from './JSXElementMock';
 
 const domElements = [...dom.keys()];
+const roleNames = [...roles.keys()];
 
 const pureInteractiveElements = domElements
   .filter(name => dom.get(name).interactive === true)
@@ -27,12 +32,36 @@ const interactiveElementsMap = {
   ],
 };
 
-const pureNonInteractiveElementsMap = domElements
-  .filter(name => !dom.get(name).interactive)
-  .reduce((nonInteractiveElements, name) => {
-    nonInteractiveElements[name] = [];
-    return nonInteractiveElements;
-  }, {});
+const pureNonInteractiveElementsMap = {
+  a: [],
+  area: [],
+  article: [],
+  dd: [],
+  dfn: [],
+  dt: [],
+  fieldset: [],
+  figure: [],
+  form: [],
+  frame: [],
+  h1: [],
+  h2: [],
+  h3: [],
+  h4: [],
+  h5: [],
+  h6: [],
+  hr: [],
+  img: [],
+  input: [],
+  li: [],
+  nav: [],
+  ol: [],
+  table: [],
+  tbody: [],
+  tfoot: [],
+  thead: [],
+  tr: [],
+  ul: [],
+};
 
 const nonInteractiveElementsMap = {
   ...pureNonInteractiveElementsMap,
@@ -41,10 +70,26 @@ const nonInteractiveElementsMap = {
   ],
 };
 
-const roleNames = [...roles.keys()];
+const indeterminantInteractiveElementsMap = domElements
+  .reduce(
+    (
+      accumulator: {[key: string]: Array<any>},
+      name: string
+    ): {[key: string]: Array<any>} => {
+      accumulator[name] = [];
+      return accumulator;
+    },
+    {},
+  );
+
+Object.keys(interactiveElementsMap)
+  .concat(Object.keys(nonInteractiveElementsMap))
+  .forEach(
+    (name: string) => delete indeterminantInteractiveElementsMap[name]
+  );
 
 const interactiveRoles = roleNames.filter(
-  role => roles.get(role).interactive === true
+  role => roles[role].interactive === true
 );
 
 const nonInteractiveRoles = roleNames.filter(
@@ -86,3 +131,13 @@ export function genNonInteractiveRoleElements () {
     ])
   );
 }
+
+export function genIndeterminantInteractiveElements () {
+  return Object.keys(indeterminantInteractiveElementsMap)
+    .map(name => {
+      const attributes = indeterminantInteractiveElementsMap[name].map(
+        ({prop, value}) => JSXAttributeMock(prop, value)
+      );
+      return JSXElementMock(name, attributes);
+    });
+}

__tests__/src/util/isNonInteractiveElement-test.js

@@ -0,0 +1,54 @@
+/* eslint-env mocha */
+import expect from 'expect';
+import { elementType } from 'jsx-ast-utils';
+import isNonInteractiveElement from '../../../src/util/isNonInteractiveElement';
+import {
+  genIndeterminantInteractiveElements,
+  genInteractiveElements,
+  genNonInteractiveElements,
+} from '../../../__mocks__/genInteractives';
+
+describe('isNonInteractiveElement', () => {
+  describe('JSX Components (no tagName)', () => {
+    it('should identify them as interactive elements', () => {
+      expect(isNonInteractiveElement(undefined, []))
+        .toBe(false);
+    });
+  });
+  describe('non-interactive elements', () => {
+    genNonInteractiveElements().forEach(
+      ({ openingElement }) => {
+        it(`should identify \`${openingElement.name.name}\` as a non-interactive element`, () => {
+          expect(isNonInteractiveElement(
+            elementType(openingElement),
+            openingElement.attributes,
+          )).toBe(true);
+        });
+      },
+    );
+  });
+  describe('interactive elements', () => {
+    genInteractiveElements().forEach(
+      ({ openingElement }) => {
+        it(`should not identify \`${openingElement.name.name}\` as a non-interactive element`, () => {
+          expect(isNonInteractiveElement(
+            elementType(openingElement),
+            openingElement.attributes,
+          )).toBe(false);
+        });
+      },
+    );
+  });
+  describe('indeterminate elements', () => {
+    genIndeterminantInteractiveElements().forEach(
+      ({ openingElement }) => {
+        it(`should not identify \`${openingElement.name.name}\` as a non-interactive element`, () => {
+          expect(isNonInteractiveElement(
+            elementType(openingElement),
+            openingElement.attributes,
+          )).toBe(false);
+        });
+      },
+    );
+  });
+});

src/util/isNonInteractiveElement.js

@@ -0,0 +1,90 @@
+/**
+ * @flow
+ */
+
+import {
+  roles,
+  elementRoles,
+  roleElements,
+} from 'aria-query';
+import { getProp, getPropValue, getLiteralPropValue } from 'jsx-ast-utils';
+import getTabIndex from './getTabIndex';
+import DOMElements from './attributes/DOM.json';
+
+const nonInteractiveRoles = new Set(
+  [...roles.keys()].filter(name => !roles.get(name).interactive),
+);
+
+const pureNonInteractiveElements = [...elementRoles.entries()]
+  .reduce((accumulator, [elementSchemaJSON, roleSet]): {
+    [elementName: string]: (attributes: Array<Object>) => boolean,
+  } => {
+    const nonInteractiveElements = accumulator;
+    const elementSchema = JSON.parse(elementSchemaJSON);
+    const elementName = elementSchema.name;
+    const elementAttributes = elementSchema.attributes || [];
+    nonInteractiveElements[elementName] = (attributes: Array<Object>): boolean => {
+      const passedAttrCheck =
+        elementAttributes.length === 0 ||
+        elementAttributes.every(
+          (controlAttr): boolean => attributes.some(
+            (attr): boolean => (
+              controlAttr.name === propName(attr).toLowerCase()
+              && controlAttr.value === getLiteralPropValue(attr)
+            ),
+          ),
+        );
+      return passedAttrCheck && [...roleSet.keys()].every(
+        (roleName): boolean => nonInteractiveRoles.has(roleName),
+      );
+    };
+    return nonInteractiveElements;
+  }, {});
+
+const isNotLink = function isNotLink(attributes) {
+  const href = getPropValue(getProp(attributes, 'href'));
+  const tabIndex = getTabIndex(getProp(attributes, 'tabIndex'));
+  return href === undefined && tabIndex === undefined;
+};
+
+export const nonInteractiveElementsMap = {
+  ...pureNonInteractiveElements,
+  a: isNotLink,
+  area: isNotLink,
+  input: (attributes) => {
+    const typeAttr = getLiteralPropValue(getProp(attributes, 'type'));
+    return typeAttr ? typeAttr.toUpperCase() === 'HIDDEN' : false;
+  },
+};
+
+/**
+ * Returns boolean indicating whether the given element is a non-interactive
+ * element. If the element has either a non-interactive role assigned or it
+ * is an element with an inherently non-interactive role, then this utility
+ * returns true. Elements that lack either an explicitly assigned role or
+ * an inherent role are not considered. For those, this utility returns false
+ * because a positive determination of interactiveness cannot be determined.
+ */
+const isNonInteractiveElement = (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 false;
+  }
+
+  // The element has a role.
+  const role = getLiteralPropValue(getProp(attributes, 'role'));
+  if (role) {
+    return nonInteractiveRoles.has(role);
+  }
+
+  // The element does not have an explicit role, determine if it has an
+  // inherently non-interactive role.
+  if ({}.hasOwnProperty.call(nonInteractiveElementsMap, tagName) === false) {
+    return false;
+  }
+
+  return nonInteractiveElementsMap[tagName](attributes);
+};
+
+export default isNonInteractiveElement;