Merge branch 'master' into more-flow-configuration

Author: jessebeach

__mocks__/genInteractives.js

@@ -1,10 +1,14 @@
+import {
+  dom,
+  roles,
+} from 'aria-query';
 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)
+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;
@@ -37,12 +41,14 @@ const nonInteractiveElementsMap = {
   ],
 };
 
-const interactiveRoles = Object.keys(roles).filter(
-  role => roles[role].interactive === true
+const roleNames = [...roles.keys()];
+
+const interactiveRoles = roleNames.filter(
+  role => roles.get(role).interactive === true
 );
 
-const nonInteractiveRoles = Object.keys(roles).filter(
-  role => roles[role].interactive === false
+const nonInteractiveRoles = roleNames.filter(
+  role => roles.get(role).interactive === false
 );
 
 export function genInteractiveElements () {

__tests__/src/rules/aria-props-test.js

@@ -8,21 +8,21 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
+import { aria } from 'aria-query';
 import { RuleTester } from 'eslint';
 import parserOptionsMapper from '../../__util__/parserOptionsMapper';
 import rule from '../../../src/rules/aria-props';
-import ariaAttributes from '../../../src/util/attributes/ARIA.json';
 import getSuggestion from '../../../src/util/getSuggestion';
 
 // -----------------------------------------------------------------------------
 // Tests
 // -----------------------------------------------------------------------------
 
 const ruleTester = new RuleTester();
+const ariaAttributes = [...aria.keys()];
 
 const errorMessage = (name) => {
-  const dictionary = Object.keys(ariaAttributes).map(aria => aria.toLowerCase());
-  const suggestions = getSuggestion(name, dictionary);
+  const suggestions = getSuggestion(name, ariaAttributes);
   const message = `${name}: This attribute is an invalid ARIA attribute.`;
 
   if (suggestions.length > 0) {
@@ -39,7 +39,7 @@ const errorMessage = (name) => {
 };
 
 // Create basic test cases using all valid role types.
-const basicValidityTests = Object.keys(ariaAttributes).map(prop => ({
+const basicValidityTests = ariaAttributes.map(prop => ({
   code: `<div ${prop.toLowerCase()}="foobar" />`,
 }));
 

__tests__/src/rules/aria-proptypes-test.js

@@ -8,8 +8,8 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
+import { aria } from 'aria-query';
 import { RuleTester } from 'eslint';
-import ariaAttributes from '../../../src/util/attributes/ARIA.json';
 import parserOptionsMapper from '../../__util__/parserOptionsMapper';
 import rule, { validityCheck } from '../../../src/rules/aria-proptypes';
 
@@ -20,7 +20,10 @@ import rule, { validityCheck } from '../../../src/rules/aria-proptypes';
 const ruleTester = new RuleTester();
 
 const errorMessage = (name) => {
-  const { type, values: permittedValues } = ariaAttributes[name.toUpperCase()];
+  const {
+    type,
+    values: permittedValues,
+  } = aria.get(name.toLowerCase());
 
   switch (type) {
     case 'tristate':

__tests__/src/rules/aria-role-test.js

@@ -8,11 +8,11 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
+import { roles } from 'aria-query';
 import { RuleTester } from 'eslint';
 import assign from 'object-assign';
 import parserOptionsMapper from '../../__util__/parserOptionsMapper';
 import rule from '../../../src/rules/aria-role';
-import ROLES from '../../../src/util/attributes/role.json';
 
 // -----------------------------------------------------------------------------
 // Tests
@@ -25,10 +25,14 @@ const errorMessage = {
   type: 'JSXAttribute',
 };
 
-const validRoles = Object.keys(ROLES).filter(role => ROLES[role].abstract === false);
-const invalidRoles = Object.keys(ROLES).filter(role => ROLES[role].abstract === true);
+const validRoles = [...roles.keys()].filter(
+  role => roles.get(role).abstract === false,
+);
+const invalidRoles = [...roles.keys()].filter(
+  role => roles.get(role).abstract === true,
+);
 
-const createTests = roles => roles.map(role => ({
+const createTests = roleNames => roleNames.map(role => ({
   code: `<div role="${role.toLowerCase()}" />`,
 }));
 
@@ -39,6 +43,10 @@ const invalidTests = createTests(invalidRoles).map((test) => {
   return invalidTest;
 });
 
+const ignoreNonDOMSchema = [{
+  ignoreNonDOM: true,
+}];
+
 ruleTester.run('aria-role', rule, {
   valid: [
     // Variables should pass, as we are only testing literals.
@@ -52,6 +60,7 @@ ruleTester.run('aria-role', rule, {
     { code: '<div role="doc-abstract" />' },
     { code: '<div role="doc-appendix doc-bibliography" />' },
     { code: '<Bar baz />' },
+    { code: '<Foo role="bar" />', options: ignoreNonDOMSchema },
   ].concat(validTests).map(parserOptionsMapper),
 
   invalid: [
@@ -64,5 +73,6 @@ ruleTester.run('aria-role', rule, {
     { code: '<div role="doc-endnotes range"></div>', errors: [errorMessage] },
     { code: '<div role />', errors: [errorMessage] },
     { code: '<div role={null}></div>', errors: [errorMessage] },
+    { code: '<Foo role="datepicker" />', errors: [errorMessage] },
   ].concat(invalidTests).map(parserOptionsMapper),
 });

__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')],

__tests__/src/rules/role-has-required-aria-props-test.js

@@ -9,9 +9,9 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
+import { roles } from 'aria-query';
 import { RuleTester } from 'eslint';
 import parserOptionsMapper from '../../__util__/parserOptionsMapper';
-import validRoleTypes from '../../../src/util/attributes/role.json';
 import rule from '../../../src/rules/role-has-required-aria-props';
 
 // -----------------------------------------------------------------------------
@@ -21,7 +21,7 @@ import rule from '../../../src/rules/role-has-required-aria-props';
 const ruleTester = new RuleTester();
 
 const errorMessage = (role) => {
-  const requiredProps = validRoleTypes[role.toUpperCase()].requiredProps.toString().toLowerCase();
+  const requiredProps = roles.get(role).requiredProps.toString().toLowerCase();
 
   return {
     message: `Elements with the ARIA role "${role}" must have the following ` +
@@ -32,8 +32,8 @@ const errorMessage = (role) => {
 
 
 // Create basic test cases using all valid role types.
-const basicValidityTests = Object.keys(validRoleTypes).map((role) => {
-  const { requiredProps } = validRoleTypes[role];
+const basicValidityTests = [...roles.keys()].map((role) => {
+  const { requiredProps } = roles.get(role);
   const propChain = requiredProps.join(' ').toLowerCase();
 
   return {

__tests__/src/rules/role-supports-aria-props-test.js

@@ -8,11 +8,13 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
+import {
+  aria,
+  roles,
+} from 'aria-query';
 import { RuleTester } from 'eslint';
 import parserOptionsMapper from '../../__util__/parserOptionsMapper';
 import rule from '../../../src/rules/role-supports-aria-props';
-import ROLES from '../../../src/util/attributes/role.json';
-import ARIA from '../../../src/util/attributes/ARIA.json';
 
 // -----------------------------------------------------------------------------
 // Tests
@@ -34,11 +36,12 @@ const errorMessage = (attr, role, tag, isImplicit) => ({
   type: 'JSXOpeningElement',
 });
 
-const nonAbstractRoles = Object.keys(ROLES).filter(role => ROLES[role].abstract === false);
+const nonAbstractRoles = [...roles.keys()].filter(role => roles.get(role).abstract === false);
 
-const createTests = roles => roles.reduce((tests, role) => {
-  const validPropsForRole = ROLES[role.toUpperCase()].props;
-  const invalidPropsForRole = Object.keys(ARIA)
+const createTests = rolesNames => rolesNames.reduce((tests, role) => {
+  const validPropsForRole = roles.get(role.toLowerCase()).props;
+  const invalidPropsForRole = [...aria.keys()]
+    .map(attribute => attribute.toLowerCase())
     .filter(attribute => validPropsForRole.indexOf(attribute) === -1);
   const normalRole = role.toLowerCase();
 

package.json

@@ -24,7 +24,7 @@
     "lint": "eslint  --config .eslintrc src __tests__",
     "lint:fix": "npm run lint -- --fix",
     "pretest": "npm run lint:fix && npm run flow",
-    "test": "jest --coverage",
+    "test": "jest --bail --coverage",
     "create": "node ./scripts/create-rule"
   },
   "devDependencies": {
@@ -54,6 +54,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "aria-query": "^0.3.0",
     "ast-types-flow": "0.0.7",
     "damerau-levenshtein": "^1.0.0",
     "emoji-regex": "^6.1.0",

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-props.js

@@ -7,14 +7,15 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
+import { aria } from 'aria-query';
 import { propName } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
-import ariaAttributes from '../util/attributes/ARIA.json';
 import getSuggestion from '../util/getSuggestion';
 
+const ariaAttributes = [...aria.keys()];
+
 const errorMessage = (name) => {
-  const dictionary = Object.keys(ariaAttributes).map(aria => aria.toLowerCase());
-  const suggestions = getSuggestion(name, dictionary);
+  const suggestions = getSuggestion(name, ariaAttributes);
   const message = `${name}: This attribute is an invalid ARIA attribute.`;
 
   if (suggestions.length > 0) {
@@ -35,14 +36,14 @@ module.exports = {
   create: context => ({
     JSXAttribute: (attribute) => {
       const name = propName(attribute);
-      const normalizedName = name ? name.toUpperCase() : '';
+      const normalizedName = name ? name.toLowerCase() : '';
 
       // `aria` needs to be prefix of property.
-      if (normalizedName.indexOf('ARIA-') !== 0) {
+      if (normalizedName.indexOf('aria-') !== 0) {
         return;
       }
 
-      const isValid = Object.keys(ariaAttributes).indexOf(normalizedName) > -1;
+      const isValid = ariaAttributes.indexOf(normalizedName) > -1;
 
       if (isValid === false) {
         context.report({