Remove DOM.json. Use aria-query::dom

Author: jessebeach

__mocks__/genInteractives.js

@@ -1,10 +1,14 @@
-import { roles } from 'aria-query';
+import {
+  dom,
+  roles,
+} from 'aria-query';
 import JSXAttributeMock from './JSXAttributeMock';
 import JSXElementMock from './JSXElementMock';
-import DOMElements from '../src/util/attributes/DOM.json';
 
-const pureInteractiveElements = Object.keys(DOMElements)
-  .filter(name => DOMElements[name].interactive === true)
+const domElements = [...dom.keys()];
+
+const pureInteractiveElements = domElements
+  .filter(name => dom.get(name).interactive === true)
   .reduce((interactiveElements, name) => {
     interactiveElements[name] = [];
     return interactiveElements;
@@ -23,8 +27,8 @@ const interactiveElementsMap = {
   ],
 };
 
-const pureNonInteractiveElementsMap = Object.keys(DOMElements)
-  .filter(name => !DOMElements[name].interactive)
+const pureNonInteractiveElementsMap = domElements
+  .filter(name => !dom.get(name).interactive)
   .reduce((nonInteractiveElements, name) => {
     nonInteractiveElements[name] = [];
     return nonInteractiveElements;

__tests__/src/rules/aria-unsupported-elements-test.js

@@ -9,9 +9,9 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
+import { dom } from 'aria-query';
 import { RuleTester } from 'eslint';
 import parserOptionsMapper from '../../__util__/parserOptionsMapper';
-import DOM from '../../../src/util/attributes/DOM.json';
 import rule from '../../../src/rules/aria-unsupported-elements';
 
 // -----------------------------------------------------------------------------
@@ -26,18 +26,19 @@ Try removing the prop '${invalidProp}'.`,
   type: 'JSXOpeningElement',
 });
 
+const domElements = [...dom.keys()];
 // Generate valid test cases
-const roleValidityTests = Object.keys(DOM).map((element) => {
-  const isReserved = DOM[element].reserved || false;
+const roleValidityTests = domElements.map((element) => {
+  const isReserved = dom.get(element).reserved || false;
   const role = isReserved ? '' : 'role';
 
   return {
     code: `<${element} ${role} />`,
   };
 });
 
-const ariaValidityTests = Object.keys(DOM).map((element) => {
-  const isReserved = DOM[element].reserved || false;
+const ariaValidityTests = domElements.map((element) => {
+  const isReserved = dom.get(element).reserved || false;
   const aria = isReserved ? '' : 'aria-hidden';
 
   return {
@@ -46,15 +47,15 @@ const ariaValidityTests = Object.keys(DOM).map((element) => {
 });
 
 // Generate invalid test cases.
-const invalidRoleValidityTests = Object.keys(DOM)
-  .filter(element => Boolean(DOM[element].reserved))
+const invalidRoleValidityTests = domElements
+  .filter(element => Boolean(dom.get(element).reserved))
   .map(reservedElem => ({
     code: `<${reservedElem} role {...props} />`,
     errors: [errorMessage('role')],
   }));
 
-const invalidAriaValidityTests = Object.keys(DOM)
-  .filter(element => Boolean(DOM[element].reserved))
+const invalidAriaValidityTests = domElements
+  .filter(element => Boolean(dom.get(element).reserved))
   .map(reservedElem => ({
     code: `<${reservedElem} aria-hidden {...props} />`,
     errors: [errorMessage('aria-hidden')],

src/rules/aria-activedescendant-has-tabindex.js

@@ -3,9 +3,9 @@
  * @author Jesse Beach <@jessebeach>
  */
 
+import { dom } from 'aria-query';
 import { getProp, elementType } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
-import DOMElements from '../util/attributes/DOM.json';
 import getTabIndex from '../util/getTabIndex';
 import isInteractiveElement from '../util/isInteractiveElement';
 
@@ -18,7 +18,7 @@ const errorMessage =
 
 const schema = generateObjSchema();
 
-const DOMElementKeys = Object.keys(DOMElements);
+const domElements = [...dom.keys()];
 
 module.exports = {
   meta: {
@@ -37,7 +37,7 @@ module.exports = {
       const type = elementType(node);
       // Do not test higher level JSX components, as we do not know what
       // low-level DOM element this maps to.
-      if (DOMElementKeys.indexOf(type) === -1) {
+      if (domElements.indexOf(type) === -1) {
         return;
       }
       const tabIndex = getTabIndex(getProp(attributes, 'tabIndex'));

src/rules/aria-unsupported-elements.js

@@ -8,10 +8,12 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { aria } from 'aria-query';
+import {
+  aria,
+  dom,
+} from 'aria-query';
 import { elementType, propName } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
-import DOM from '../util/attributes/DOM.json';
 
 const errorMessage = invalidProp =>
   `This element does not support ARIA roles, states and properties. \
@@ -28,7 +30,7 @@ module.exports = {
   create: context => ({
     JSXOpeningElement: (node) => {
       const nodeType = elementType(node);
-      const nodeAttrs = DOM[nodeType] || {};
+      const nodeAttrs = dom.get(nodeType) || {};
       const {
         reserved: isReservedNodeType = false,
       } = nodeAttrs;

src/rules/scope.js

@@ -7,9 +7,9 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
+import { dom } from 'aria-query';
 import { propName, elementType } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
-import DOMElements from '../util/attributes/DOM.json';
 
 const errorMessage = 'The scope prop can only be used on <th> elements.';
 
@@ -33,7 +33,7 @@ module.exports = {
 
       // 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) {
+      if ([...dom.keys()].indexOf(tagName) === -1) {
         return;
       } else if (tagName && tagName.toUpperCase() === 'TH') {
         return;

src/util/attributes/DOM.json

@@ -1,11 +1,11 @@
+import { dom } from 'aria-query';
 import { getProp, getPropValue, getLiteralPropValue } from 'jsx-ast-utils';
 import getTabIndex from './getTabIndex';
-import DOMElements from './attributes/DOM.json';
 
 // Map of tagNames to functions that return whether that element is interactive or not.
-
-const pureInteractiveElements = Object.keys(DOMElements)
-  .filter(name => DOMElements[name].interactive === true)
+const DOMElements = [...dom.keys()];
+const pureInteractiveElements = DOMElements
+  .filter(name => dom.get(name).interactive === true)
   .reduce((accumulator, name) => {
     const interactiveElements = accumulator;
     interactiveElements[name] = () => true;
@@ -37,7 +37,7 @@ export const interactiveElementsMap = {
 const isInteractiveElement = (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) {
+  if (DOMElements.indexOf(tagName) === -1) {
     return true;
   }
 

src/util/isInteractiveElement.js

@@ -1,6 +1,8 @@
-import { roles } from 'aria-query';
+import {
+  dom,
+  roles,
+} from 'aria-query';
 import { getProp, getLiteralPropValue } from 'jsx-ast-utils';
-import DOMElements from './attributes/DOM.json';
 
 const VALID_ROLES = [...roles.keys()]
   .filter(role => roles.get(role).interactive === true);
@@ -18,7 +20,7 @@ const VALID_ROLES = [...roles.keys()]
 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) {
+  if ([...dom.keys()].indexOf(tagName) === -1) {
     return true;
   }