aria-label-misuse

Author: balesniy

rules/aria-label-misuse/README.md

@@ -0,0 +1,25 @@
+# htmlacademy/aria-label-misuse
+
+Запрещает неправильное использование `aria-label`. Атрибут может быть использован только для следующих элементов:
+
+- Interactive elements
+- Labelable elements
+- Landmark elements
+- `<area>`
+- `<form>` and `<fieldset>`
+- `<iframe>`
+- `<img>` and `<figure>`
+- `<summary>`
+- `<table>`, `<td>` and `<th>`
+
+## true
+
+Проблемными считаются следующие шаблоны:
+```html
+<img src="" aria-label="foobar">
+```
+
+Следующие шаблоны **не** считаются проблемами:
+```html
+<input type="text" aria-label="foobar">
+```

rules/aria-label-misuse/index.js

@@ -0,0 +1,36 @@
+const {
+  is_tag_node,
+  has_non_empty_attribute,
+} = require("@linthtml/dom-utils");
+
+const whitelisted = [
+  "main", "nav", "table", "td", "th", "aside", "header", "footer", "section", "article", "form", "fieldset", "summary", "figure",
+];
+
+const interactive = ["a", "audio", "button", "details", "iframe", "input", "progress", "select", "textarea", "video"]
+
+function isValidUsage(node) {
+  /* landmark and other whitelisted elements are valid */
+  if (whitelisted.includes(node.name.chars.toLowerCase())) {
+    return true;
+  }
+
+  if (interactive.includes(node.name.chars.toLowerCase())) {
+    return true;
+  }
+
+  /* elements with tabindex (implicit interactive) are valid */
+  return has_non_empty_attribute(node, "tabindex");
+}
+
+module.exports = {
+  name: "htmlacademy/aria-label-misuse",
+  lint(node, rule_config, { report }) {
+    if (is_tag_node(node) && !isValidUsage(node)) {
+      report({
+        position: node.loc,
+        message: "\"aria-label\" cannot be used on this element",
+      });
+    }
+  },
+};