Add rule no-static-element-interactions

.gitignore

@@ -1,4 +1,5 @@
 /.eslintcache
 /.husky/
+/.idea/
 /dist/
 /node_modules/

docs/no-static-element-interactions.md

@@ -0,0 +1,68 @@
+# no-static-element-interactions
+
+Static HTML elements do not have semantic meaning. This is clear in the case of `<div>` and `<span>`. It is less so clear in the case of elements that _seem_ semantic, but that do not have a semantic mapping in the accessibility layer. For example `<a>`, `<big>`, `<blockquote>`, `<footer>`, `<picture>`, `<strike>` and `<time>` -- to name a few -- have no semantic layer mapping. They are as void of meaning as `<div>`.
+
+The [WAI-ARIA `role` attribute](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) confers a semantic mapping to an element. The semantic value can then be expressed to a user via assistive technology.
+
+In order to add interactivity such as a mouse or key event listener to a static element, that element must be given a role value as well.
+
+## How do I resolve this error?
+
+### Case: This element acts like a button, link, menuitem, etc
+
+Indicate the element's role with the `role` attribute:
+
+```vue
+<div
+  @click="onClickHandler"
+  @keypress="onKeyPressHandler"
+  role="button"
+  tabIndex="0">
+  Save
+</div>
+```
+
+Common interactive roles include:
+
+1. `button`
+1. `link`
+1. `checkbox`
+1. `menuitem`
+1. `menuitemcheckbox`
+1. `menuitemradio`
+1. `option`
+1. `radio`
+1. `searchbox`
+1. `switch`
+1. `textbox`
+
+Note: Adding a role to your element does **not** add behavior. When a semantic HTML element like `<button>` is used, then it will also respond to Enter key presses when it has focus. The developer is responsible for providing the expected behavior of an element that the role suggests it would have: focusability and key press support.
+
+Do not use the role `presentation` on the element: it removes the element's semantics, and may also remove its children's semantics, creating big issues with assistive technology.
+
+Adjust the list of handler prop names in the handlers array to increase or decrease the coverage surface of this rule in your codebase.
+
+### Succeed
+
+```vue
+<button @click="() => {}" class="foo" />
+<div class="foo" @click="() => {}" role="button" />
+<input type="text" @click="() => {}" />
+```
+
+### Fail
+
+```vue
+<div @click="() => {}" />
+```
+
+## Accessibility guidelines
+
+- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+
+### Resources
+
+- [WAI-ARIA `role` attribute](https://www.w3.org/TR/wai-aria-1.1/#usage_intro)
+- [WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex)
+- [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav)
+- [Mozilla Developer Network - ARIA Techniques](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)

src/configs/recommended.ts

@@ -30,6 +30,7 @@ const recommended: Linter.BaseConfig = {
     "vuejs-accessibility/no-distracting-elements": "error",
     "vuejs-accessibility/no-onchange": "error",
     "vuejs-accessibility/no-redundant-roles": "error",
+    "vuejs-accessibility/no-static-element-interactions": "error",
     "vuejs-accessibility/role-has-required-aria-props": "error",
     "vuejs-accessibility/tabindex-no-positive": "error"
   }

src/index.ts

@@ -18,6 +18,7 @@ import noAutofocus from "./rules/no-autofocus";
 import noDistractingElements from "./rules/no-distracting-elements";
 import noOnchange from "./rules/no-onchange";
 import noRedundantRoles from "./rules/no-redundant-roles";
+import noStaticElementInteractions from "./rules/no-static-element-interactions";
 import roleHasRequiredAriaProps from "./rules/role-has-required-aria-props";
 import tabindexNoPositive from "./rules/tabindex-no-positive";
 
@@ -44,6 +45,7 @@ const plugin = {
     "no-distracting-elements": noDistractingElements,
     "no-onchange": noOnchange,
     "no-redundant-roles": noRedundantRoles,
+    "no-static-element-interactions": noStaticElementInteractions,
     "role-has-required-aria-props": roleHasRequiredAriaProps,
     "tabindex-no-positive": tabindexNoPositive
   }

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

@@ -0,0 +1,84 @@
+import rule from "../no-static-element-interactions";
+import makeRuleTester from "./makeRuleTester";
+
+makeRuleTester("no-static-element-interactions", rule, {
+  valid: [
+    // Doesn't contain relevant directives
+    "<div />",
+    "<div id='foo' />",
+    "<CoolComponent />",
+    "<div class='foo' />",
+    "<form @submit='void 0' />",
+
+    // Custom components
+    "<Button @click='void 0' />",
+    "<v2-button @click='void 0' />",
+
+    // Contains relevant directives
+    "<div @click='void 0' role='button' />",
+    "<div @contextmenu='void 0' role='button' />",
+    "<div @dblclick='void 0' role='button' />",
+    "<div @doubleclick='void 0' role='button' />",
+    "<div @drag='void 0' role='button' />",
+    "<div @dragend='void 0' role='button' />",
+    "<div @dragenter='void 0' role='button' />",
+    "<div @dragexit='void 0' role='button' />",
+    "<div @dragleave='void 0' role='button' />",
+    "<div @dragover='void 0' role='button' />",
+    "<div @dragstart='void 0' role='button' />",
+    "<div @drop='void 0' role='button' />",
+    "<div @keydown='void 0' role='button' />",
+    "<div @keypress='void 0' role='button' />",
+    "<div @keyup='void 0' role='button' />",
+    "<div @mousedown='void 0' role='button' />",
+    "<div @mouseenter='void 0' role='button' />",
+    "<div @mouseleave='void 0' role='button' />",
+    "<div @mousemove='void 0' role='button' />",
+    "<div @mouseout='void 0' role='button' />",
+    "<div @mouseover='void 0' role='button' />",
+    "<div @mouseup='void 0' role='button' />",
+
+    // Elements which don't require `role='button'`
+    "<button @click='void 0' />",
+    "<input @click='void 0'} />",
+
+    // Exception: Elements hidden for screenreaders
+    "<div @click='void 0' aria-hidden='true'/>",
+
+    // Exception: `role='presentation'`
+    "<div @click='void 0' role='presentation'/>",
+  ],
+  invalid: [
+    // Contains relevant directives but no `role='button'`
+    "<div @click='void 0' />",
+    "<div @contextmenu='void 0' />",
+    "<div @dblclick='void 0' />",
+    "<div @doubleclick='void 0' />",
+    "<div @drag='void 0' />",
+    "<div @dragend='void 0' />",
+    "<div @dragenter='void 0' />",
+    "<div @dragexit='void 0' />",
+    "<div @dragleave='void 0' />",
+    "<div @dragover='void 0' />",
+    "<div @dragstart='void 0' />",
+    "<div @drop='void 0' />",
+    "<div @keydown='void 0' />",
+    "<div @keypress='void 0' />",
+    "<div @keyup='void 0' />",
+    "<div @mousedown='void 0' />",
+    "<div @mouseenter='void 0' />",
+    "<div @mouseleave='void 0' />",
+    "<div @mousemove='void 0' />",
+    "<div @mouseout='void 0' />",
+    "<div @mouseover='void 0' />",
+    "<div @mouseup='void 0' />",
+
+    // Check other element types
+    "<a @click='void 0' />",
+    "<a @mousedown='void 0' />",
+    "<span @click='void 0' />",
+    "<span @mousedown='void 0' />",
+    "<section @click='void 0' />",
+    "<section @mousedown='void 0' />",
+  ]
+});

src/rules/interactive-supports-focus.ts

@@ -9,6 +9,7 @@ import {
   getElementAttributeValue,
   getElementType,
   hasOnDirectives,
+  interactiveHandlers,
   isHiddenFromScreenReader,
   isInteractiveElement,
   isPresentationRole,
@@ -26,36 +27,11 @@ for (const [role, definition] of roles.entries()) {
   }
 }
 
-const interactiveHandlers = [
-  "click",
-  "contextmenu",
-  "dblclick",
-  "doubleclick",
-  "drag",
-  "dragend",
-  "dragenter",
-  "dragexit",
-  "dragleave",
-  "dragover",
-  "dragstart",
-  "drop",
-  "keydown",
-  "keypress",
-  "keyup",
-  "mousedown",
-  "mouseenter",
-  "mouseleave",
-  "mousemove",
-  "mouseout",
-  "mouseover",
-  "mouseup"
-];
-
 function isDisabledElement(node: AST.VElement) {
   return (
     getElementAttributeValue(node, "disabled") ||
     (getElementAttributeValue(node, "aria-disabled") || "").toString() ===
-      "true"
+    "true"
   );
 }
 

src/rules/no-static-element-interactions.ts

@@ -0,0 +1,54 @@
+import { Rule } from "eslint";
+import {
+  defineTemplateBodyVisitor,
+  getElementAttributeValue,
+  hasOnDirectives,
+  interactiveHandlers,
+  isHiddenFromScreenReader,
+  isInteractiveElement,
+  isInteractiveRole,
+  isPresentationRole, makeDocsURL
+} from "../utils";
+import { dom } from "aria-query";
+
+const rule: Rule.RuleModule = {
+  meta: {
+    type: "problem",
+    docs: {
+      url: makeDocsURL("no-static-element-interactions")
+    },
+    messages: {
+      default: "Visible, non-interactive elements should not have an interactive handler."
+    },
+    schema: []
+
+  },
+  create (context: Rule.RuleContext): Rule.RuleListener {
+    return defineTemplateBodyVisitor(context, {
+      VElement (node) {
+        const role = getElementAttributeValue(node, "role");
+
+        const domElements = [...dom.keys()];
+
+        if(!domElements.includes(node.name)) {
+          return;
+        }
+
+        if(isHiddenFromScreenReader(node) || isPresentationRole(node)) {
+          return;
+        }
+
+        if(
+          hasOnDirectives(node, interactiveHandlers) &&
+          !isInteractiveElement(node) &&
+          !isInteractiveRole(role)
+        ) {
+          context.report({ node: node as any, messageId: "default" });
+        }
+
+      }
+    });
+  },
+};
+
+export default rule;

src/utils.ts

@@ -5,15 +5,18 @@ export { default as getElementAttribute } from "./utils/getElementAttribute";
 export { default as getElementAttributeValue } from "./utils/getElementAttributeValue";
 export { default as getElementType } from "./utils/getElementType";
 export { default as getLiteralAttributeValue } from "./utils/getLiteralAttributeValue";
+export { default as getInteractiveRoles } from "./utils/getInteractiveRoles";
 export { default as hasAccessibleChild } from "./utils/hasAccessibleChild";
 export { default as hasAriaLabel } from "./utils/hasAriaLabel";
 export { default as hasContent } from "./utils/hasContent";
 export { default as hasOnDirective } from "./utils/hasOnDirective";
 export { default as hasOnDirectives } from "./utils/hasOnDirectives";
+export { default as interactiveHandlers } from "./utils/interactiveHandlers";
 export { default as isAriaHidden } from "./utils/isAriaHidden";
 export { default as isAttribute } from "./utils/isAttribute";
 export { default as isHiddenFromScreenReader } from "./utils/isHiddenFromScreenReader";
 export { default as isInteractiveElement } from "./utils/isInteractiveElement";
+export { default as isInteractiveRole } from "./utils/isInteractiveRole";
 export { default as isMatchingElement } from "./utils/isMatchingElement";
 export { default as isPresentationRole } from "./utils/isPresentationRole";
 export { default as makeDocsURL } from "./utils/makeDocsURL";

src/utils/getInteractiveRoles.ts

@@ -0,0 +1,18 @@
+import { ARIARoleDefinitionKey, roles } from "aria-query";
+
+const interactiveRoles: ARIARoleDefinitionKey[] = [];
+
+function getInteractiveRoles() {
+  for (const [role, definition] of roles.entries()) {
+    if (
+      !definition.abstract &&
+      definition.superClass.some((classes) => classes.includes("widget"))
+    ) {
+      interactiveRoles.push(role);
+    }
+  }
+
+  return interactiveRoles
+}
+
+export default getInteractiveRoles

src/utils/interactiveHandlers.ts

@@ -0,0 +1,24 @@
+export default [
+  "click",
+  "contextmenu",
+  "dblclick",
+  "doubleclick",
+  "drag",
+  "dragend",
+  "dragenter",
+  "dragexit",
+  "dragleave",
+  "dragover",
+  "dragstart",
+  "drop",
+  "keydown",
+  "keypress",
+  "keyup",
+  "mousedown",
+  "mouseenter",
+  "mouseleave",
+  "mousemove",
+  "mouseout",
+  "mouseover",
+  "mouseup"
+]

src/utils/isInteractiveRole.ts

@@ -0,0 +1,17 @@
+import { roles } from "aria-query";
+import { getInteractiveRoles } from "../utils";
+
+function isInteractiveRole(value: any): value is string {
+  if (typeof value !== "string") {
+    return false;
+  }
+
+  return value
+    .toLowerCase()
+    .split(" ")
+    .some(
+      (role) => roles.has(role as any) && getInteractiveRoles().includes(role as any)
+    );
+}
+
+export default isInteractiveRole