click-events-have-key-events

Author: kddnewton

README.md

@@ -55,7 +55,7 @@ I'm currently working on getting parity between this project and `eslint-plugin-
 - [x] aria-props
 - [x] aria-role
 - [x] aria-unsupported-elements
-- [ ] click-events-have-key-events
+- [x] click-events-have-key-events
 - [ ] form-has-label
 - [x] heading-has-content
 - [x] iframe-has-title

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

@@ -0,0 +1,21 @@
+# click-events-have-key-events
+
+Enforce `@click` is accompanied by at least one of the following: `@keyup`, `@keydown`, `@keypress`. 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
+
+```vue
+<div @click="foo" @keydown="bar" />
+<div @click="foo" @keyup="bar" />
+<div @click="foo" @keypress="bar" />
+```
+
+### Fail
+
+```vue
+<div @click="foo" />
+```

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

@@ -0,0 +1,41 @@
+const rule = require("../click-events-have-key-events");
+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' />"
+  ],
+  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' />"
+  ]
+});

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

@@ -0,0 +1,57 @@
+const vueEslintParser = require("vue-eslint-parser");
+
+const {
+  defineTemplateBodyVisitor,
+  getElementAttribute,
+  getElementAttributeValue,
+  hasOnDirective,
+  isHiddenFromScreenReader,
+  isInteractiveElement,
+  makeDocsURL
+} = require("../utils");
+const htmlElements = require("../utils/htmlElements.json");
+
+const message = `Visible, non-interactive elements with click handlers must \
+have at least one keyboard listener.`;
+
+const isHtmlElementNode = (node) =>
+  node.namespace === vueEslintParser.AST.NS.HTML;
+
+const isCustomComponent = (node) =>
+  (isHtmlElementNode(node) && !htmlElements.includes(node.rawName)) ||
+  getElementAttribute(node, "is");
+
+const isPresentationRole = (node) => {
+  const role = getElementAttributeValue(node, "role");
+  return role && ["presentation", "none"].includes(role);
+};
+
+const hasKeyEvent = (node) =>
+  hasOnDirective(node, "keydown") ||
+  hasOnDirective(node, "keyup") ||
+  hasOnDirective(node, "keypress");
+
+module.exports = {
+  meta: {
+    docs: {
+      url: makeDocsURL("click-events-have-key-events")
+    }
+  },
+  create(context) {
+    return defineTemplateBodyVisitor(context, {
+      VElement(node) {
+        if (
+          !isCustomComponent(node) &&
+          hasOnDirective(node, "click") &&
+          !isHiddenFromScreenReader(node) &&
+          !isPresentationRole(node) &&
+          !isInteractiveElement(node) &&
+          !hasKeyEvent(node)
+        ) {
+          context.report({ node, message });
+        }
+      }
+    });
+  },
+  message
+};

src/rules/no-onchange.js

@@ -1,21 +1,14 @@
 const {
   defineTemplateBodyVisitor,
-  makeDocsURL,
-  getElementType
+  getElementType,
+  hasOnDirective,
+  makeDocsURL
 } = require("../utils");
 
 const message = `@blur must be used instead of @change, unless absolutely \
 necessary and it causes no negative consequences for keyboard only or screen \
 reader users.`;
 
-const hasOnDirective = (node, name) =>
-  node.startTag.attributes.some(
-    (attribute) =>
-      attribute.directive &&
-      attribute.key.name.name === "on" &&
-      attribute.key.argument.name === name
-  );
-
 module.exports = {
   meta: {
     docs: {

src/rules/no-redundant-roles.js

@@ -3,51 +3,26 @@ const {
   defineTemplateBodyVisitor,
   getElementAttributeValue,
   getElementType,
-  makeDocsURL
+  makeDocsURL,
+  matchesElementRole
 } = require("../utils");
 
 const exceptions = { nav: ["navigation"] };
 const makeMessage = (type, role) => `\
 The element ${type} has an implicit role of ${role}. Defining this \
 explicitly is redundant and should be avoided.`;
 
-const hasRoleAttributes = (node, attributes) =>
-  attributes.every((attribute) => {
-    const value = getElementAttributeValue(node, attribute.name);
-
-    if (attribute.value) {
-      return value === attribute.value;
-    }
-
-    if (attribute.constraints) {
-      switch (attribute.constraints[0]) {
-        case "set":
-          return value;
-        case "undefined":
-          return !value;
-        default:
-          return null;
-      }
-    }
-
-    return value;
-  });
-
 const getImplicitRoleSet = (node) => {
-  const elementType = getElementType(node);
-
-  for (const [key, value] of elementRoles) {
-    if (key.name === elementType) {
-      if (!key.attributes || hasRoleAttributes(node, key.attributes)) {
-        return value;
-      }
+  for (const [elementRole, roleSet] of elementRoles) {
+    if (matchesElementRole(node, elementRole)) {
+      return roleSet;
     }
   }
+
   return null;
 };
 
 module.exports = {
-  getImplicitRoleSet,
   meta: {
     docs: {
       url: makeDocsURL("no-redundant-roles")

src/utils.js

@@ -3,9 +3,14 @@ const getAttributeName = require("./utils/getAttributeName");
 const getAttributeValue = require("./utils/getAttributeValue");
 const getElementAttribute = require("./utils/getElementAttribute");
 const getElementAttributeValue = require("./utils/getElementAttributeValue");
+const getElementType = require("./utils/getElementType");
 const hasContent = require("./utils/hasContent");
+const hasOnDirective = require("./utils/hasOnDirective");
 const isAttribute = require("./utils/isAttribute");
+const isHiddenFromScreenReader = require("./utils/isHiddenFromScreenReader");
+const isInteractiveElement = require("./utils/isInteractiveElement");
 const makeDocsURL = require("./utils/makeDocsURL");
+const matchesElementRole = require("./utils/matchesElementRole");
 
 const isPlainValue = (attribute) => !attribute.directive && attribute.value;
 const isBoundValue = (attribute) =>
@@ -34,9 +39,6 @@ const getLiteralAttributeValue = (node, name) => {
   return null;
 };
 
-const getElementType = (node) =>
-  getLiteralAttributeValue(node, "is") || node.rawName;
-
 const isAttributeWithValue = (node, name) => {
   const { key } = node;
 
@@ -55,7 +57,11 @@ module.exports = {
   getElementType,
   getLiteralAttributeValue,
   hasContent,
+  hasOnDirective,
   isAttribute,
   isAttributeWithValue,
-  makeDocsURL
+  isHiddenFromScreenReader,
+  isInteractiveElement,
+  makeDocsURL,
+  matchesElementRole
 };

src/utils/getElementType.js

@@ -0,0 +1,6 @@
+const getElementAttributeValue = require("./getElementAttributeValue");
+
+const getElementType = (node) =>
+  getElementAttributeValue(node, "is") || node.rawName;
+
+module.exports = getElementType;

src/utils/hasContent.js

@@ -1,9 +1,4 @@
-const getElementAttributeValue = require("./getElementAttributeValue");
-
-const isHiddenFromScreenReader = (node) => {
-  const ariaHidden = getElementAttributeValue(node, "aria-hidden");
-  return ariaHidden && ariaHidden.toString() === "true";
-};
+const isHiddenFromScreenReader = require("./isHiddenFromScreenReader");
 
 const hasAccessibleChild = (node) =>
   node.children.some((child) => {

src/utils/hasOnDirective.js

@@ -0,0 +1,9 @@
+const hasOnDirective = (node, name) =>
+  node.startTag.attributes.some(
+    (attribute) =>
+      attribute.directive &&
+      attribute.key.name.name === "on" &&
+      attribute.key.argument.name === name
+  );
+
+module.exports = hasOnDirective;