mouse-events-have-key-events

Author: kddnewton

README.md

@@ -62,7 +62,7 @@ I'm currently working on getting parity between this project and `eslint-plugin-
 - [ ] interactive-supports-focus
 - [ ] label-has-for
 - [ ] media-has-caption
-- [ ] mouse-events-have-key-events
+- [x] mouse-events-have-key-events
 - [x] no-access-key
 - [x] no-autofocus
 - [x] no-distracting-elements

docs/rules/mouse-events-have-key-events.md

@@ -0,0 +1,20 @@
+# mouse-events-have-key-events
+
+Enforce `@mouseenter`/`@mouseover`/`@mouseout`/`@mouseleave`/`@hover` are accompanied by `@focus`/`@blur`. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+
+```
+<div @mouseover="foo" @focus="bar" />
+<div @mouseout="foo" @blur="bar" />
+```
+
+### Fail
+
+```vue
+<div @mouseover="foo" />
+```

src/index.js

@@ -8,6 +8,7 @@ module.exports = {
     "click-events-have-key-events": require("./rules/click-events-have-key-events"),
     "heading-has-content": require("./rules/heading-has-content"),
     "iframe-has-title": require("./rules/iframe-has-title"),
+    "mouse-events-have-key-events": require("./rules/mouse-events-have-key-events"),
     "no-access-key": require("./rules/no-access-key"),
     "no-autofocus": require("./rules/no-autofocus"),
     "no-distracting-elements": require("./rules/no-distracting-elements"),
@@ -34,6 +35,7 @@ module.exports = {
         "vue-accessibility/click-events-have-key-events": "error",
         "vue-accessibility/heading-has-content": "error",
         "vue-accessibility/iframe-has-title": "error",
+        "vue-accessibility/mouse-events-have-key-events": "error",
         "vue-accessibility/no-access-key": "error",
         "vue-accessibility/no-autofocus": "error",
         "vue-accessibility/no-distracting-elements": "error",

src/rules/__tests__/click-events-have-key-events.test.js

@@ -3,39 +3,39 @@ const makeRuleTester = require("./makeRuleTester");
 
 makeRuleTester("click-events-have-key-events", rule, {
   valid: [
-    "<div @click='foo' @keydown='bar' />",
-    "<div @click='foo' @keyup='bar' />",
-    "<div @click='foo' @keypress='bar' />",
-    "<div @click='foo' @keydown='bar' @keydown='baz' />",
-    "<div class='foo' />",
-    "<div @click='foo' aria-hidden />",
-    "<div @click='foo' aria-hidden='true' />",
-    "<div @click='foo' aria-hidden='false' @keydown='bar' />",
-    "<div @click='foo' @keydown='bar' aria-hidden='undefined' />",
-    "<input type='text' @click='foo' />",
-    "<input @click='foo' />",
-    "<button @click='foo' class='foo' />",
-    "<option @click='foo' class='foo' />",
-    "<select @click='foo' class='foo' />",
-    "<textarea @click='foo' class='foo' />",
-    "<a @click='foo' href='http://x.y.z' />",
-    "<a @click='foo' href='http://x.y.z' tabIndex='0' />",
-    "<input @click='foo' type='hidden' />",
-    "<div @click='foo' role='presentation' />",
-    "<div @click='foo' role='none' />",
-    "<TestComponent @click='foo' />",
-    "<Button @click='foo' />"
+    "<div @click='void 0' @keydown='void 0' />",
+    "<div @click='void 0' @keyup='void 0' />",
+    "<div @click='void 0' @keypress='void 0' />",
+    "<div @click='void 0' @keydown='void 0' @keydown='baz' />",
+    "<div class='void 0' />",
+    "<div @click='void 0' aria-hidden />",
+    "<div @click='void 0' aria-hidden='true' />",
+    "<div @click='void 0' aria-hidden='false' @keydown='void 0' />",
+    "<div @click='void 0' @keydown='void 0' aria-hidden='undefined' />",
+    "<input type='text' @click='void 0' />",
+    "<input @click='void 0' />",
+    "<button @click='void 0' class='void 0' />",
+    "<option @click='void 0' class='void 0' />",
+    "<select @click='void 0' class='void 0' />",
+    "<textarea @click='void 0' class='void 0' />",
+    "<a @click='void 0' href='http://x.y.z' />",
+    "<a @click='void 0' href='http://x.y.z' tabIndex='0' />",
+    "<input @click='void 0' type='hidden' />",
+    "<div @click='void 0' role='presentation' />",
+    "<div @click='void 0' role='none' />",
+    "<TestComponent @click='void 0' />",
+    "<Button @click='void 0' />"
   ],
   invalid: [
-    "<div @click='foo' />",
-    "<div @click='foo' role='undefined' />",
-    "<section @click='foo' />",
-    "<main @click='foo' />",
-    "<article @click='foo' />",
-    "<header @click='foo' />",
-    "<footer @click='foo' />",
-    "<div @click='foo' aria-hidden='false' />",
-    "<a @click='foo' />",
-    "<a tabIndex='0' @click='foo' />"
+    "<div @click='void 0' />",
+    "<div @click='void 0' role='undefined' />",
+    "<section @click='void 0' />",
+    "<main @click='void 0' />",
+    "<article @click='void 0' />",
+    "<header @click='void 0' />",
+    "<footer @click='void 0' />",
+    "<div @click='void 0' aria-hidden='false' />",
+    "<a @click='void 0' />",
+    "<a tabIndex='0' @click='void 0' />"
   ]
 });

src/rules/__tests__/mouse-events-have-key-events.test.js

@@ -0,0 +1,28 @@
+const rule = require("../mouse-events-have-key-events");
+const makeRuleTester = require("./makeRuleTester");
+
+makeRuleTester("mouse-events-have-key-events", rule, {
+  valid: [
+    "<div />",
+    "<div @mouseover='void 0' @focus='void 0' />",
+    "<div @mouseout='void 0' @blur='void 0' />"
+  ],
+  invalid: [
+    {
+      code: "<template><div @mouseover='void 0' /></template>",
+      errors: [{ message: rule.mouseOverErrorMessage }]
+    },
+    {
+      code: "<template><div @mouseout='void 0' /></template>",
+      errors: [{ message: rule.mouseOutErrorMessage }]
+    },
+    {
+      code: "<template><div @mouseover='void 0' @focus='null' /></template>",
+      errors: [{ message: rule.mouseOverErrorMessage }]
+    },
+    {
+      code: "<template><div @mouseout='void 0' @blur='null' /></template>",
+      errors: [{ message: rule.mouseOutErrorMessage }]
+    }
+  ]
+});

src/rules/__tests__/no-onchange.test.js

@@ -2,8 +2,6 @@ const rule = require("../no-onchange");
 const makeRuleTester = require("./makeRuleTester");
 
 makeRuleTester("no-onchange", rule, {
-  valid: [
-    "<select><option @blur='handleOnBlur' @change='handleOnChange' /></select>"
-  ],
-  invalid: ["<select @change='updateModel'><option /></select>"]
+  valid: ["<select><option @blur='void 0' @change='void 0' /></select>"],
+  invalid: ["<select @change='void 0'><option /></select>"]
 });

src/rules/click-events-have-key-events.js

@@ -5,6 +5,7 @@ const {
   getElementAttribute,
   getElementAttributeValue,
   hasOnDirective,
+  hasOnDirectives,
   isHiddenFromScreenReader,
   isInteractiveElement,
   makeDocsURL
@@ -26,11 +27,6 @@ const isPresentationRole = (node) => {
   return role && ["presentation", "none"].includes(role);
 };
 
-const hasKeyEvent = (node) =>
-  hasOnDirective(node, "keydown") ||
-  hasOnDirective(node, "keyup") ||
-  hasOnDirective(node, "keypress");
-
 module.exports = {
   meta: {
     docs: {
@@ -46,7 +42,7 @@ module.exports = {
           !isHiddenFromScreenReader(node) &&
           !isPresentationRole(node) &&
           !isInteractiveElement(node) &&
-          !hasKeyEvent(node)
+          !hasOnDirectives(node, ["keydown", "keyup", "keypress"])
         ) {
           context.report({ node, message });
         }

src/rules/mouse-events-have-key-events.js

@@ -0,0 +1,40 @@
+const {
+  defineTemplateBodyVisitor,
+  hasOnDirectives,
+  makeDocsURL
+} = require("../utils");
+
+const mouseOverErrorMessage = `@mouseover, @mouseenter, or @hover must be \
+accompanied by @focusin or @focus for accessibility.`;
+
+const mouseOutErrorMessage = `@mouseout or @mouseleave must be accompanied by \
+@focusout or @blur for accessibility.`;
+
+module.exports = {
+  meta: {
+    docs: {
+      url: makeDocsURL("mouse-events-have-key-events")
+    }
+  },
+  create(context) {
+    return defineTemplateBodyVisitor(context, {
+      VElement(node) {
+        if (
+          hasOnDirectives(node, ["mouseover", "mouseenter", "hover"]) &&
+          !hasOnDirectives(node, ["focus", "focusin"])
+        ) {
+          context.report({ node, message: mouseOverErrorMessage });
+        }
+
+        if (
+          hasOnDirectives(node, ["mouseout", "mouseleave"]) &&
+          !hasOnDirectives(node, ["blur", "focusout"])
+        ) {
+          context.report({ node, message: mouseOutErrorMessage });
+        }
+      }
+    });
+  },
+  mouseOverErrorMessage,
+  mouseOutErrorMessage
+};

src/utils.js

@@ -6,6 +6,7 @@ const getElementAttributeValue = require("./utils/getElementAttributeValue");
 const getElementType = require("./utils/getElementType");
 const hasContent = require("./utils/hasContent");
 const hasOnDirective = require("./utils/hasOnDirective");
+const hasOnDirectives = require("./utils/hasOnDirectives");
 const isAttribute = require("./utils/isAttribute");
 const isHiddenFromScreenReader = require("./utils/isHiddenFromScreenReader");
 const isInteractiveElement = require("./utils/isInteractiveElement");
@@ -58,6 +59,7 @@ module.exports = {
   getLiteralAttributeValue,
   hasContent,
   hasOnDirective,
+  hasOnDirectives,
   isAttribute,
   isAttributeWithValue,
   isHiddenFromScreenReader,

src/utils/hasOnDirective.js

@@ -1,9 +1,13 @@
 const hasOnDirective = (node, name) =>
-  node.startTag.attributes.some(
-    (attribute) =>
+  node.startTag.attributes.some((attribute) => {
+    const { key, value } = attribute;
+
+    return (
       attribute.directive &&
-      attribute.key.name.name === "on" &&
-      attribute.key.argument.name === name
-  );
+      key.name.name === "on" &&
+      key.argument.name === name &&
+      !!value.expression.body
+    );
+  });
 
 module.exports = hasOnDirective;

src/utils/hasOnDirectives.js

@@ -0,0 +1,6 @@
+const hasOnDirective = require("./hasOnDirective");
+
+const hasOnDirectives = (node, names) =>
+  names.some((name) => hasOnDirective(node, name));
+
+module.exports = hasOnDirectives;