[new] - Add option to ignore non-DOM elements for rule aria-role. (#171)

Author: beefancohen

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

@@ -39,6 +39,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 +56,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 +69,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),
 });

src/rules/aria-role.js

@@ -7,13 +7,19 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { getLiteralPropValue, propName } from 'jsx-ast-utils';
+import { getLiteralPropValue, propName, elementType } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
 import roles from '../util/attributes/role.json';
+import DOMElements from '../util/attributes/DOM.json';
 
 const errorMessage = 'Elements with ARIA roles must use a valid, non-abstract ARIA role.';
 
-const schema = generateObjSchema();
+const schema = generateObjSchema({
+  ignoreNonDOM: {
+    type: 'boolean',
+    default: false,
+  },
+});
 
 module.exports = {
   meta: {
@@ -23,29 +29,34 @@ module.exports = {
 
   create: context => ({
     JSXAttribute: (attribute) => {
+      // Determine if ignoreNonDOM is set to true
+      // If true, then do not run rule.
+      const options = context.options[0] || {};
+      const ignoreNonDOM = !!options.ignoreNonDOM;
+
+      if (ignoreNonDOM) {
+        const type = elementType(attribute.parent);
+        if (!DOMElements[type]) { return; }
+      }
+
+      // Get prop name
       const name = propName(attribute);
       const normalizedName = name ? name.toUpperCase() : '';
 
-      if (normalizedName !== 'ROLE') {
-        return;
-      }
+      if (normalizedName !== 'ROLE') { return; }
 
       const value = getLiteralPropValue(attribute);
 
       // If value is undefined, then the role attribute will be dropped in the DOM.
       // If value is null, then getLiteralAttributeValue is telling us that the
       // value isn't in the form of a literal.
-      if (value === undefined || value === null) {
-        return;
-      }
+      if (value === undefined || value === null) { return; }
 
       const normalizedValues = String(value).toUpperCase().split(' ');
       const validRoles = Object.keys(roles).filter(role => roles[role].abstract === false);
       const isValid = normalizedValues.every(val => validRoles.indexOf(val) > -1);
 
-      if (isValid === true) {
-        return;
-      }
+      if (isValid === true) { return; }
 
       context.report({
         node: attribute,