[new] - Add no-redundant-roles rule (#150)

beefancohen · web-flow · commit 9ee1242ccd03 · 2017-01-04T20:29:22.000-05:00
* [new] - Add no-redundant-roles rule Fixes #149
diff --git a/README.md b/README.md
@@ -111,6 +111,7 @@ You can also enable all the recommended rules at once. Add `plugin:jsx-a11y/reco
 - [no-autofocus](docs/rules/no-autofocus.md): Enforce autoFocus prop is not used.
 - [no-distracting-elements](docs/rules/no-distracting-elements.md): Enforce distracting elements are not used.
 - [no-onchange](docs/rules/no-onchange.md): Enforce usage of `onBlur` over `onChange` on select menus for accessibility.
+- [no-redundant-roles](docs/rules/no-redundant-roles.md): Enforce explicit role property is not the same as implicit/default role property on element.
 - [no-static-element-interactions](docs/rules/no-static-element-interactions.md): Enforce non-interactive elements have no interactive handlers.
 - [onclick-has-focus](docs/rules/onclick-has-focus.md): Enforce that elements with `onClick` handlers must be focusable.
 - [onclick-has-role](docs/rules/onclick-has-role.md): Enforce that non-interactive, visible elements (such as `<div>`) that have click handlers use the role attribute.
diff --git a/__tests__/src/rules/no-redundant-roles-test.js b/__tests__/src/rules/no-redundant-roles-test.js
@@ -0,0 +1,45 @@
+/* eslint-env jest */
+/**
+ * @fileoverview Enforce explicit role property is not the
+ * same as implicit default role property on element.
+ * @author Ethan Cohen <@evcohen>
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import rule from '../../../src/rules/no-redundant-roles';
+
+const parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = (element, implicitRole) => ({
+  message: `The element ${element} has an implicit role of ${implicitRole}. Defining this explicitly is redundant and should be avoided.`,
+  type: 'JSXOpeningElement',
+});
+
+ruleTester.run('no-redundant-roles', rule, {
+  valid: [
+    { code: '<div />;', parserOptions },
+    { code: '<button role="main" />', parserOptions },
+    { code: '<MyComponent role="button" />', parserOptions },
+    { code: '<button role={`${foo}button`} />', parserOptions },
+  ],
+  invalid: [
+    { code: '<button role="button" />', errors: [expectedError('button', 'button')], parserOptions },
+    { code: '<body role="DOCUMENT" />', errors: [expectedError('body', 'document')], parserOptions },
+    { code: '<button role={`${undefined}button`} />', errors: [expectedError('button', 'button')], parserOptions },
+  ],
+});
diff --git a/docs/rules/no-redundant-roles.md b/docs/rules/no-redundant-roles.md
@@ -0,0 +1,23 @@
+# no-redundant-roles
+
+Some HTML elements have native semantics that are implemented by the browser. This includes default/implicit ARIA roles. Setting an ARIA role that matches its default/implicit role is redundant since it is already set by the browser.
+
+#### References
+1. [w3](https://www.w3.org/TR/html5/dom.html#aria-role-attribute)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<div />
+<button role="presentation" />
+<MyComponent role="main" />
+```
+
+### Fail
+```jsx
+<button role="button" />
+<img role="img" src="foo.jpg" />
+```
diff --git a/src/index.js b/src/index.js
@@ -23,6 +23,7 @@ module.exports = {
     'no-autofocus': require('./rules/no-autofocus'),
     'no-distracting-elements': require('./rules/no-distracting-elements'),
     'no-onchange': require('./rules/no-onchange'),
+    'no-redundant-roles': require('./rules/no-redundant-roles'),
     'no-static-element-interactions': require('./rules/no-static-element-interactions'),
     'onclick-has-focus': require('./rules/onclick-has-focus'),
     'onclick-has-role': require('./rules/onclick-has-role'),
@@ -59,6 +60,7 @@ module.exports = {
         'jsx-a11y/no-autofocus': 'error',
         'jsx-a11y/no-distracting-elements': 'error',
         'jsx-a11y/no-onchange': 'error',
+        'jsx-a11y/no-redundant-roles': 'error',
         'jsx-a11y/no-static-element-interactions': 'warn',
         'jsx-a11y/onclick-has-focus': 'error',
         'jsx-a11y/onclick-has-role': 'error',
diff --git a/src/rules/no-redundant-roles.js b/src/rules/no-redundant-roles.js
@@ -0,0 +1,46 @@
+/**
+ * @fileoverview Enforce explicit role property is not the
+ * same as implicit/default role property on element.
+ * @author Ethan Cohen <@evcohen>
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import { elementType, getProp, getLiteralPropValue } from 'jsx-ast-utils';
+import { generateObjSchema } from '../util/schemas';
+import getImplicitRole from '../util/getImplicitRole';
+
+const errorMessage = (element, implicitRole) =>
+  `The element ${element} has an implicit role of ${implicitRole}. Defining this explicitly is redundant and should be avoided.`;
+
+const schema = generateObjSchema();
+
+module.exports = {
+  meta: {
+    docs: {},
+    schema: [schema],
+  },
+
+  create: context => ({
+    JSXOpeningElement: (node) => {
+      const type = elementType(node);
+      const implicitRole = getImplicitRole(type, node.attributes);
+
+      if (implicitRole === '') {
+        return;
+      }
+
+      const role = getProp(node.attributes, 'role');
+      const roleValue = getLiteralPropValue(role);
+
+      if (typeof roleValue === 'string' && roleValue.toUpperCase() === implicitRole.toUpperCase()) {
+        context.report({
+          node,
+          message: errorMessage(type, implicitRole.toLowerCase()),
+        });
+      }
+    },
+  }),
+};
