Treat <a /> as a static element

Author: jessebeach

__mocks__/genInteractives.js

@@ -49,7 +49,6 @@ const interactiveElementsMap = {
 };
 
 const nonInteractiveElementsMap = {
-  a: [],
   area: [],
   article: [],
   dd: [],

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

@@ -68,6 +68,8 @@ ruleTester.run('no-interactive-element-to-noninteractive-role', rule, {
     { code: '<textarea className="foo" role="button" />' },
     { code: '<tr role="button" />;' },
     /* HTML elements with neither an interactive or non-interactive valence (static) */
+    { code: '<a role="button" />' },
+    { code: '<a role="button" />;' },
     { code: '<acronym role="button" />;' },
     { code: '<address role="button" />;' },
     { code: '<applet role="button" />;' },
@@ -217,8 +219,6 @@ ruleTester.run('no-interactive-element-to-noninteractive-role', rule, {
     /* HTML elements with an inherent, non-interactive role, assigned an
      * interactive role. */
     { code: '<main role="button" />;' },
-    { code: '<a role="button" />' },
-    { code: '<a role="button" />;' },
     { code: '<area role="button" />;' },
     { code: '<article role="button" />;' },
     { code: '<article role="button" />;' },

__tests__/src/rules/no-noninteractive-element-interactions-test.js

@@ -56,6 +56,8 @@ ruleTester.run('no-noninteractive-element-handlers', rule, {
     { code: '<input type="week" onClick={() => void 0} />' },
     { code: '<input type="hidden" onClick={() => void 0} />' },
     /* End all flavors of input */
+    { code: '<a onClick={() => void 0} />' },
+    { code: '<a onClick={() => {}} />;' },
     { code: '<a tabIndex="0" onClick={() => void 0} />' },
     { code: '<a onClick={() => void 0} href="http://x.y.z" />' },
     { code: '<a onClick={() => void 0} href="http://x.y.z" tabIndex="0" />' },
@@ -216,8 +218,6 @@ ruleTester.run('no-noninteractive-element-handlers', rule, {
   invalid: [
     /* HTML elements with an inherent, non-interactive role */
     { code: '<main onClick={() => void 0} />;', errors: [expectedError] },
-    { code: '<a onClick={() => void 0} />', errors: [expectedError] },
-    { code: '<a onClick={() => {}} />;', errors: [expectedError] },
     { code: '<area onClick={() => {}} />;', errors: [expectedError] },
     { code: '<article onClick={() => {}} />;', errors: [expectedError] },
     { code: '<article onDblClick={() => void 0} />;', errors: [expectedError] },

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

@@ -288,6 +288,10 @@ ruleTester.run('no-noninteractive-element-to-interactive-role', rule, {
     { code: '<main role="listitem" />;' },
     { code: '<a role="listitem" />' },
     { code: '<a role="listitem" />;' },
+    { code: '<a role="button" />' },
+    { code: '<a role="button" />;' },
+    { code: '<a role="menuitem" />' },
+    { code: '<a role="menuitem" />;' },
     { code: '<area role="listitem" />;' },
     { code: '<article role="listitem" />;' },
     { code: '<article role="listitem" />;' },
@@ -358,8 +362,6 @@ ruleTester.run('no-noninteractive-element-to-interactive-role', rule, {
     /* HTML elements with an inherent non-interactive role, assigned an
      * interactive role. */
     { code: '<main role="button" />;', errors: [expectedError] },
-    { code: '<a role="button" />', errors: [expectedError] },
-    { code: '<a role="button" />;', errors: [expectedError] },
     { code: '<area role="button" />;', errors: [expectedError] },
     { code: '<article role="button" />;', errors: [expectedError] },
     { code: '<article role="button" />;', errors: [expectedError] },
@@ -391,8 +393,6 @@ ruleTester.run('no-noninteractive-element-to-interactive-role', rule, {
     /* HTML elements with an inherent non-interactive role, assigned an
      * interactive role. */
     { code: '<main role="menuitem" />;', errors: [expectedError] },
-    { code: '<a role="menuitem" />', errors: [expectedError] },
-    { code: '<a role="menuitem" />;', errors: [expectedError] },
     { code: '<area role="menuitem" />;', errors: [expectedError] },
     { code: '<article role="menuitem" />;', errors: [expectedError] },
     { code: '<article role="menuitem" />;', errors: [expectedError] },

__tests__/src/rules/no-static-element-interactions-test.js

@@ -96,8 +96,6 @@ ruleTester.run('no-static-element-interactions', rule, {
     { code: '<div role="presentation" onClick={() => {}} />;' },
     /* HTML elements with an inherent, non-interactive role */
     { code: '<main onClick={() => void 0} />;' },
-    { code: '<a onClick={() => void 0} />' },
-    { code: '<a onClick={() => {}} />;' },
     { code: '<area onClick={() => {}} />;' },
     { code: '<article onClick={() => {}} />;' },
     { code: '<article onDblClick={() => void 0} />;' },
@@ -193,6 +191,8 @@ ruleTester.run('no-static-element-interactions', rule, {
     { code: '<div onClick={() => void 0} {...props} />;', errors: [expectedError] },
     { code: '<div onKeyUp={() => void 0} aria-hidden={false} />;', errors: [expectedError] },
     /* Static elements; no inherent role */
+    { code: '<a onClick={() => void 0} />', errors: [expectedError] },
+    { code: '<a onClick={() => {}} />;', errors: [expectedError] },
     { code: '<acronym onClick={() => {}} />;', errors: [expectedError] },
     { code: '<address onClick={() => {}} />;', errors: [expectedError] },
     { code: '<applet onClick={() => {}} />;', errors: [expectedError] },

src/rules/interactive-supports-focus.js

@@ -16,6 +16,8 @@ import { generateObjSchema } from '../util/schemas';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 import isInteractiveElement from '../util/isInteractiveElement';
 import isInteractiveRole from '../util/isInteractiveRole';
+import isNonInteractiveElement from '../util/isNonInteractiveElement';
+import isNonInteractiveRole from '../util/isNonInteractiveRole';
 import isPresentationRole from '../util/isPresentationRole';
 import getTabIndex from '../util/getTabIndex';
 
@@ -47,7 +49,7 @@ module.exports = {
     JSXOpeningElement: (
       node: JSXOpeningElement,
     ) => {
-      const attributes = node.attributes
+      const attributes = node.attributes;
       const type = elementType(node);
       const hasInteractiveProps = hasAnyProp(attributes, interactiveProps);
       const hasTabindex = getTabIndex(
@@ -71,8 +73,10 @@ module.exports = {
 
       if (
         hasInteractiveProps
-        && !isInteractiveElement(type, attributes)
         && isInteractiveRole(type, attributes)
+        && !isInteractiveElement(type, attributes)
+        && !isNonInteractiveElement(type, attributes)
+        && !isNonInteractiveRole(type, attributes)
         && !hasTabindex
       ) {
         context.report({

src/util/isNonInteractiveElement.js

@@ -68,7 +68,6 @@ const isNotLink = function isNotLink(attributes) {
 
 export const nonInteractiveElementsMap = {
   ...pureNonInteractiveElements,
-  a: isNotLink,
   area: isNotLink,
   input: (attributes) => {
     const typeAttr = getLiteralPropValue(getProp(attributes, 'type'));