Introduce utils to get roles from elements

Author: jessebeach

__tests__/src/util/getComputedRole-test.js

@@ -0,0 +1,71 @@
+/* eslint-env jest */
+import getComputedRole from '../../../src/util/getComputedRole';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+
+describe('getComputedRole', () => {
+  describe('explicit role', () => {
+    describe('valid role', () => {
+      it('should return the role', () => {
+        expect(getComputedRole(
+          'div',
+          [JSXAttributeMock('role', 'button')],
+        )).toBe('button');
+      });
+    });
+    describe('invalid role', () => {
+      describe('has implicit', () => {
+        it('should return the implicit role', () => {
+          expect(getComputedRole(
+            'li',
+            [JSXAttributeMock('role', 'beeswax')],
+          )).toBe('listitem');
+        });
+      });
+      describe('lacks implicit', () => {
+        it('should return null', () => {
+          expect(getComputedRole(
+            'div',
+            [JSXAttributeMock('role', 'beeswax')],
+          )).toBeNull();
+        });
+      });
+    });
+
+    describe('no role', () => {
+      describe('has implicit', () => {
+        it('should return the implicit role', () => {
+          expect(getComputedRole(
+            'li',
+            [],
+          )).toBe('listitem');
+        });
+      });
+      describe('lacks implicit', () => {
+        it('should return null', () => {
+          expect(getComputedRole(
+            'div',
+            [],
+          )).toBeNull();
+        });
+      });
+    });
+  });
+  describe('implicit role', () => {
+    describe('has implicit', () => {
+      it('should return the implicit role', () => {
+        expect(getComputedRole(
+          'li',
+          [JSXAttributeMock('role', 'beeswax')],
+        )).toBe('listitem');
+      });
+    });
+    describe('lacks implicit', () => {
+      it('should return null', () => {
+        expect(getComputedRole(
+          'div',
+          [],
+        )).toBeNull();
+      });
+    });
+  });
+});

__tests__/src/util/getExplicitRole-test.js

@@ -0,0 +1,30 @@
+/* eslint-env jest */
+import getExplicitRole from '../../../src/util/getExplicitRole';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+
+describe('getExplicitRole', () => {
+  describe('valid role', () => {
+    it('should return the role', () => {
+      expect(getExplicitRole(
+        'div',
+        [JSXAttributeMock('role', 'button')],
+      )).toBe('button');
+    });
+  });
+  describe('invalid role', () => {
+    it('should return null', () => {
+      expect(getExplicitRole(
+        'div',
+        [JSXAttributeMock('role', 'beeswax')],
+      )).toBeNull();
+    });
+  });
+  describe('no role', () => {
+    it('should return null', () => {
+      expect(getExplicitRole(
+        'div',
+        [],
+      )).toBeNull();
+    });
+  });
+});

__tests__/src/util/getImplicitRole-test.js

@@ -0,0 +1,21 @@
+/* eslint-env jest */
+import getImplicitRole from '../../../src/util/getImplicitRole';
+
+describe('getImplicitRole', () => {
+  describe('has implicit', () => {
+    it('should return the implicit role', () => {
+      expect(getImplicitRole(
+        'li',
+        [],
+      )).toBe('listitem');
+    });
+  });
+  describe('lacks implicit', () => {
+    it('should return null', () => {
+      expect(getImplicitRole(
+        'div',
+        [],
+      )).toBeNull();
+    });
+  });
+});

src/rules/no-noninteractive-element-to-interactive-role.js

@@ -14,8 +14,6 @@ import {
 } from 'aria-query';
 import {
   elementType,
-  getProp,
-  getLiteralPropValue,
   propName,
 } from 'jsx-ast-utils';
 import type {
@@ -24,6 +22,7 @@ import type {
 import includes from 'array-includes';
 import type { ESLintContext } from '../../flow/eslint';
 import type { ESLintJSXAttribute } from '../../flow/eslint-jsx';
+import getExplicitRole from '../util/getExplicitRole';
 import isNonInteractiveElement from '../util/isNonInteractiveElement';
 import isInteractiveRole from '../util/isInteractiveRole';
 
@@ -58,7 +57,7 @@ module.exports = {
         const node = attribute.parent;
         const { attributes } = node;
         const type = elementType(node);
-        const role = getLiteralPropValue(getProp(node.attributes, 'role'));
+        const role = getExplicitRole(type, node.attributes);
 
         if (!includes(domElements, type)) {
           // Do not test higher level JSX components, as we do not know what

src/rules/no-redundant-roles.js

@@ -8,8 +8,9 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { elementType, getProp, getLiteralPropValue } from 'jsx-ast-utils';
+import { elementType } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
+import getExplicitRole from '../util/getExplicitRole';
 import getImplicitRole from '../util/getImplicitRole';
 
 const errorMessage = (element, implicitRole) =>
@@ -27,15 +28,13 @@ module.exports = {
     JSXOpeningElement: (node) => {
       const type = elementType(node);
       const implicitRole = getImplicitRole(type, node.attributes);
+      const explicitRole = getExplicitRole(type, node.attributes);
 
-      if (implicitRole === '') {
+      if (!implicitRole || !explicitRole) {
         return;
       }
 
-      const role = getProp(node.attributes, 'role');
-      const roleValue = getLiteralPropValue(role);
-
-      if (typeof roleValue === 'string' && roleValue.toUpperCase() === implicitRole.toUpperCase()) {
+      if (implicitRole === explicitRole) {
         context.report({
           node,
           message: errorMessage(type, implicitRole.toLowerCase()),

src/util/getComputedRole.js

@@ -0,0 +1,16 @@
+// @flow
+import type { Node } from 'ast-types-flow';
+import getExplicitRole from './getExplicitRole';
+import getImplicitRole from './getImplicitRole';
+/**
+ * Returns an element's computed role, which is
+ *
+ *  1. The valid value of its explicit role attribute; or
+ *  2. The implicit value of its tag.
+ */
+export default function getComputedRole(
+  tag: string,
+  attributes: Array<Node>,
+): ?string {
+  return getExplicitRole(tag, attributes) || getImplicitRole(tag, attributes);
+}

src/util/getExplicitRole.js

@@ -0,0 +1,31 @@
+// @flow
+import {
+  roles as rolesMap,
+} from 'aria-query';
+import {
+  getProp,
+  getLiteralPropValue,
+} from 'jsx-ast-utils';
+import type { Node } from 'ast-types-flow';
+/**
+ * Returns an element's computed role, which is
+ *
+ *  1. The valid value of its explicit role attribute; or
+ *  2. The implicit value of its tag.
+ */
+export default function getExplicitRole(
+  tag: string,
+  attributes: Array<Node>,
+): ?string {
+  const explicitRole = (function toLowerCase(role) {
+    if (typeof role === 'string') {
+      return role.toLowerCase();
+    }
+    return null;
+  }(getLiteralPropValue(getProp(attributes, 'role'))));
+
+  if (rolesMap.has(explicitRole)) {
+    return explicitRole;
+  }
+  return null;
+}

src/util/getImplicitRole.js

@@ -1,17 +1,24 @@
+// @flow
+import {
+  roles as rolesMap,
+} from 'aria-query';
+import type { Node } from 'ast-types-flow';
 import implicitRoles from './implicitRoles';
 
 /**
  * Returns an element's implicit role given its attributes and type.
  * Some elements only have an implicit role when certain props are defined.
- *
- * @param type - The node's tagName.
- * @param attributes - The collection of attributes on the node.
- * @returns {String} - String representing the node's implicit role or '' if it doesn't exist.
  */
-export default function getImplicitRole(type, attributes) {
+export default function getImplicitRole(
+  type: string,
+  attributes: Array<Node>,
+): ?string {
+  let implicitRole;
   if (implicitRoles[type]) {
-    return implicitRoles[type](attributes);
+    implicitRole = implicitRoles[type](attributes);
   }
-
-  return '';
+  if (rolesMap.has(implicitRole)) {
+    return implicitRole;
+  }
+  return null;
 }