@html-eslint/eslint-plugin 0.31.1 → 0.33.0

package/lib/rules/no-extra-spacing-attrs.js

@@ -1,15 +1,15 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").AttributeNode } AttributeNode
- * @typedef { import("../types").OpenTagEndNode } OpenTagEndNode
- * @typedef { import("../types").OpenScriptTagEndNode } OpenScriptTagEndNode
- * @typedef { import("../types").OpenStyleTagEndNode } OpenStyleTagEndNode
- * @typedef { import("../types").OpenScriptTagStartNode } OpenScriptTagStartNode
- * @typedef { import("../types").OpenTagStartNode } OpenTagStartNode
- * @typedef { import("../types").OpenStyleTagStartNode } OpenStyleTagStartNode
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").StyleTagNode } StyleTagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
+ * @typedef { import("../types").Attribute } Attribute
+ * @typedef { import("../types").OpenTagEnd } OpenTagEnd
+ * @typedef { import("../types").OpenScriptTagEnd } OpenScriptTagEnd
+ * @typedef { import("../types").OpenStyleTagEnd } OpenStyleTagEnd
+ * @typedef { import("../types").OpenScriptTagStart } OpenScriptTagStart
+ * @typedef { import("../types").OpenTagStart } OpenTagStart
+ * @typedef { import("../types").OpenStyleTagStart } OpenStyleTagStart
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").StyleTag } StyleTag
+ * @typedef { import("../types").ScriptTag } ScriptTag
  * @typedef { import("../types").AnyNode } AnyNode
  */
 
@@ -95,7 +95,7 @@ module.exports = {
     const sourceCode = context.getSourceCode().text;
 
     /**
-     * @param {AttributeNode[]} attrs
+     * @param {Attribute[]} attrs
      */
     function checkExtraSpacesBetweenAttrs(attrs) {
       attrs.forEach((current, index, attrs) => {
@@ -145,8 +145,8 @@ module.exports = {
     }
 
     /**
-     * @param {OpenScriptTagStartNode | OpenTagStartNode | OpenStyleTagStartNode} node
-     * @param {AttributeNode} firstAttr
+     * @param {OpenScriptTagStart | OpenTagStart | OpenStyleTagStart} node
+     * @param {Attribute} firstAttr
      * @returns
      */
     function checkExtraSpaceBefore(node, firstAttr) {
@@ -184,7 +184,7 @@ module.exports = {
       }
     }
     /**
-     * @param {TagNode | StyleTagNode | ScriptTagNode} node
+     * @param {Tag | StyleTag | ScriptTag} node
      * @returns
      */
     function check(node) {

package/lib/rules/no-extra-spacing-text.js

@@ -1,12 +1,11 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("es-html-parser").CommentContentNode } CommentContentNode
- * @typedef { import("es-html-parser").TagNode } TagNode
- * @typedef { import("es-html-parser").CommentNode } CommentNode
- * @typedef { import("../types").ContentNode } ContentNode
- * @typedef { import("es-html-parser").TextNode } TextNode
- * @typedef { import("../types").LineNode } LineNode
- * @typedef { import("../types").Range } Range
+ * @typedef { import("../types").CommentContent } CommentContent
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").Comment } Comment
+ * @typedef { import("../types").Text } Text
+ * @typedef { import("../types").Line } Line
+ * @typedef { import("eslint").AST.Range } Range
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -60,12 +59,12 @@ module.exports = {
     const skipTags = options.skip || [];
     const sourceCode = getSourceCode(context);
     /**
-     * @type {TagNode[]}
+     * @type {Tag[]}
      */
     const tagStack = [];
 
     /**
-     * @param {CommentNode | TextNode} node
+     * @param {Comment | Text} node
      * @returns {boolean}
      */
     function hasSkipTagOnParent(node) {
@@ -83,7 +82,7 @@ module.exports = {
     }
 
     /**
-     * @param {CommentContentNode | TextNode} node
+     * @param {CommentContent | Text} node
      */
     function stripConsecutiveSpaces(node) {
       const text = node.value;

package/lib/rules/no-heading-inside-button.js

@@ -0,0 +1,54 @@
+/**
+ * @typedef { import("../types").RuleModule } RuleModule
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { findParent, isTag } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
+const MESSAGE_IDS = {
+  UNEXPECTED: "unexpected",
+};
+
+const HEADING_NAMES = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Disallows the use of heading elements inside <button>.",
+      category: RULE_CATEGORY.ACCESSIBILITY,
+      recommended: false,
+    },
+
+    fixable: null,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.UNEXPECTED]: "Unexpected heading inside button",
+    },
+  },
+
+  create(context) {
+    return createVisitors(context, {
+      Tag(node) {
+        if (!HEADING_NAMES.has(node.name.toLowerCase())) {
+          return;
+        }
+        const button = findParent(
+          node,
+          (parent) => isTag(parent) && parent.name.toLowerCase() === "button"
+        );
+
+        if (button) {
+          context.report({
+            node,
+            messageId: MESSAGE_IDS.UNEXPECTED,
+          });
+        }
+      },
+    });
+  },
+};

package/lib/rules/no-inline-styles.js

@@ -1,6 +1,5 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").RuleListener } RuleListener
  */
 
 const { RULE_CATEGORY } = require("../constants");

package/lib/rules/no-invalid-role.js

@@ -0,0 +1,287 @@
+/**
+ * @typedef { import("../types").RuleModule } RuleModule
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
+const MESSAGE_IDS = {
+  INVALID: "invalid",
+  INVALID_PRESENTATION: "invalidPresentation",
+};
+
+/**
+ * Elements and role attribute constants are taken from ember-template-lint.
+ * https://github.com/ember-template-lint/ember-template-lint/blob/master/lib/rules/no-invalid-role.js
+ */
+
+// https://www.w3.org/TR/wai-aria/#document_structure_roles
+const DOCUMENT_STRUCTURE_ROLES = new Set([
+  "application",
+  "article",
+  "associationlist",
+  "associationlistitemkey",
+  "associationlistitemvalue",
+  "blockquote",
+  "caption",
+  "cell",
+  "code",
+  "columnheader",
+  "comment",
+  "definition",
+  "deletion",
+  "directory",
+  "document",
+  "emphasis",
+  "feed",
+  "figure",
+  "generic",
+  "group",
+  "heading",
+  "img",
+  "insertion",
+  "list",
+  "listitem",
+  "mark",
+  "math",
+  "meter",
+  "none",
+  "note",
+  "paragraph",
+  "presentation",
+  "row",
+  "rowgroup",
+  "rowheader",
+  "separator", // When not focusable
+  "strong",
+  "subscript",
+  "suggestion",
+  "superscript",
+  "table",
+  "term",
+  "time",
+  "toolbar",
+  "tooltip",
+]);
+
+// https://www.w3.org/TR/wai-aria/#widget_roles
+const WIDGET_ROLES = new Set([
+  "button",
+  "checkbox",
+  "gridcell",
+  "link",
+  "menuitem",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "option",
+  "progressbar",
+  "radio",
+  "scrollbar",
+  "searchbox",
+  "separator", // When focusable
+  "slider",
+  "spinbutton",
+  "switch",
+  "tab",
+  "tabpanel",
+  "textbox",
+  "treeitem",
+]);
+
+const COMPOSITE_WIDGET_ROLES = new Set([
+  "combobox",
+  "grid",
+  "listbox",
+  "menu",
+  "menubar",
+  "radiogroup",
+  "tablist",
+  "tree",
+  "treegrid",
+]);
+
+// https://www.w3.org/TR/wai-aria/#landmark_roles
+const LANDMARK_ROLES = new Set([
+  "banner",
+  "complementary",
+  "contentinfo",
+  "form",
+  "main",
+  "navigation",
+  "region",
+  "search",
+]);
+
+// https://www.w3.org/TR/wai-aria/#live_region_roles
+const LIVE_REGION_ROLES = new Set([
+  "alert",
+  "log",
+  "marquee",
+  "status",
+  "timer",
+]);
+
+// https://www.w3.org/TR/wai-aria/#window_roles
+const WINDOW_ROLES = new Set(["alertdialog", "dialog"]);
+
+const ALL_ROLES = new Set([
+  ...DOCUMENT_STRUCTURE_ROLES,
+  ...WIDGET_ROLES,
+  ...COMPOSITE_WIDGET_ROLES,
+  ...LANDMARK_ROLES,
+  ...LIVE_REGION_ROLES,
+  ...WINDOW_ROLES,
+]);
+
+const ELEMENTS_DISALLOWING_PRESENTATION_OR_NONE_ROLE = new Set([
+  "a",
+  "abbr",
+  "applet",
+  "area",
+  "audio",
+  "b",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "br",
+  "button",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "dir",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "form",
+  "hr",
+  "i",
+  "iframe",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "main",
+  "map",
+  "mark",
+  "menu",
+  "menuitem",
+  "meter",
+  "noembed",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "pre",
+  "progress",
+  "q",
+  "rb",
+  "rp",
+  "rt",
+  "rtc",
+  "ruby",
+  "s",
+  "samp",
+  "select",
+  "small",
+  "source",
+  "strong",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "tr",
+  "track",
+  "tt",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr",
+]);
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Disallows use of invalid role.",
+      category: RULE_CATEGORY.ACCESSIBILITY,
+      recommended: false,
+    },
+
+    fixable: null,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.INVALID]: "Unexpected use of invalid role '{{role}}'",
+      [MESSAGE_IDS.INVALID_PRESENTATION]:
+        "Unexpected use of presentation role on <{{element}}>",
+    },
+  },
+
+  create(context) {
+    return createVisitors(context, {
+      Tag(node) {
+        const role = findAttr(node, "role");
+        if (!role) {
+          return;
+        }
+        const roleValue = (
+          (role.value && role.value.value) ||
+          ""
+        ).toLowerCase();
+
+        if (
+          (roleValue === "presentation" || roleValue === "none") &&
+          ELEMENTS_DISALLOWING_PRESENTATION_OR_NONE_ROLE.has(
+            node.name.toLowerCase()
+          )
+        ) {
+          context.report({
+            node: role,
+            messageId: MESSAGE_IDS.INVALID_PRESENTATION,
+            data: {
+              element: node.name,
+            },
+          });
+        }
+
+        if (!ALL_ROLES.has(roleValue)) {
+          context.report({
+            node: role,
+            messageId: MESSAGE_IDS.INVALID,
+            data: {
+              role: roleValue,
+            },
+          });
+        }
+      },
+    });
+  },
+};

package/lib/rules/no-multiple-empty-lines.js

@@ -1,9 +1,9 @@
 /**
- * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("es-html-parser").DocumentNode } DocumentNode
  * @typedef { import("es-html-parser").AnyToken } AnyToken
- * @typedef { import("es-html-parser").CommentContentNode } CommentContentNode
- * @typedef { import("es-html-parser").TextNode } TextNode
+ * @typedef { import("../types").RuleModule } RuleModule
+ * @typedef { import("../types").Document } Document
+ * @typedef { import("../types").CommentContent } CommentContent
+ * @typedef { import("../types").Text } Text
  */
 
 const { parse } = require("@html-eslint/template-parser");
@@ -62,7 +62,7 @@ module.exports = {
     /**
      * @param {string[]} lines
      * @param {number} lineOffset
-     * @param {((CommentContentNode | TextNode)['templates'][number])[]} tokens
+     * @param {((CommentContent | Text)['templates'][number])[]} tokens
      */
     function check(lines, lineOffset, tokens) {
       /** @type {number[]} */

package/lib/rules/no-multiple-h1.js

@@ -1,6 +1,6 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
+ * @typedef { import("../types").Tag } Tag
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -31,7 +31,7 @@ module.exports = {
 
   create(context) {
     /**
-     * @type {TagNode[]}
+     * @type {Tag[]}
      */
     const h1s = [];
 

package/lib/rules/no-nested-interactive.js

@@ -0,0 +1,120 @@
+/**
+ * @typedef { import("../types").RuleModule } RuleModule
+ * @typedef { import("../types").Tag } Tag
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
+
+const MESSAGE_IDS = {
+  UNEXPECTED: "unexpected",
+};
+
+/**
+ * @see https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2
+ * @param {Tag} tag
+ * @returns {boolean}
+ */
+function isInteractive(tag) {
+  const tagName = tag.name.toLowerCase();
+
+  switch (tagName) {
+    // a (if the href attribute is present)
+    case "a": {
+      return !!findAttr(tag, "href");
+    }
+    // audio (if the controls attribute is present)
+    // video (if the controls attribute is present)
+    case "audio":
+    case "video": {
+      return !!findAttr(tag, "controls");
+    }
+    // img (if the usemap attribute is present)
+    case "img": {
+      return !!findAttr(tag, "usemap");
+    }
+    // input (if the type attribute is not in the Hidden state)
+    case "input": {
+      const typeAttr = findAttr(tag, "type");
+      return !(typeAttr && typeAttr.value && typeAttr.value.value === "hidden");
+    }
+    case "button":
+    case "details":
+    case "embed":
+    case "iframe":
+    case "label":
+    case "select":
+    case "textarea": {
+      return true;
+    }
+    default: {
+      return false;
+    }
+  }
+}
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Disallows nested interactive elements",
+      category: RULE_CATEGORY.BEST_PRACTICE,
+      recommended: false,
+    },
+
+    fixable: null,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.UNEXPECTED]:
+        "Unexpected interactive elements nested (parent interactive: <{{tag}}>)",
+    },
+  },
+
+  create(context) {
+    /**
+     * @type {Tag[]}
+     */
+    let interactiveStack = [];
+
+    return createVisitors(context, {
+      Document() {
+        interactiveStack = [];
+      },
+      Tag(node) {
+        if (!isInteractive(node)) {
+          return;
+        }
+        if (interactiveStack.length) {
+          if (interactiveStack.length === 1) {
+            const parentLabel = interactiveStack.find(
+              (tag) => tag.name.toLowerCase() === "label"
+            );
+            if (parentLabel && node.name.toLowerCase() !== "label") {
+              return;
+            }
+          }
+
+          context.report({
+            node,
+            messageId: MESSAGE_IDS.UNEXPECTED,
+            data: {
+              tag: interactiveStack[interactiveStack.length - 1].name,
+            },
+          });
+        }
+
+        interactiveStack.push(node);
+      },
+      "Tag:exit"(node) {
+        if (interactiveStack[interactiveStack.length - 1] === node) {
+          interactiveStack.pop();
+        }
+      },
+    });
+  },
+};

package/lib/rules/no-positive-tabindex.js

@@ -1,8 +1,8 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").StyleTagNode } StyleTagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").StyleTag } StyleTag
+ * @typedef { import("../types").ScriptTag } ScriptTag
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -35,7 +35,7 @@ module.exports = {
 
   create(context) {
     /**
-     * @param {TagNode | StyleTagNode | ScriptTagNode} node
+     * @param {Tag | StyleTag | ScriptTag} node
      */
     function check(node) {
       const tabIndexAttr = findAttr(node, "tabindex");

package/lib/rules/no-restricted-attr-values.js

@@ -1,9 +1,9 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").StyleTagNode } StyleTagNode
- * @typedef { import("../types").AttributeNode } AttributeNode
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
+ * @typedef { import("../types").StyleTag } StyleTag
+ * @typedef { import("../types").Attribute } Attribute
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").ScriptTag } ScriptTag
  * @typedef {{attrPatterns: string[], attrValuePatterns: string[], message?: string}[]} Options
  */
 
@@ -66,7 +66,7 @@ module.exports = {
     const options = context.options;
     const checkers = options.map((option) => new PatternChecker(option));
     /**
-     * @param {TagNode | StyleTagNode | ScriptTagNode} node
+     * @param {Tag | StyleTag | ScriptTag} node
      */
     function check(node) {
       node.attributes.forEach((attr) => {
@@ -89,7 +89,7 @@ module.exports = {
         }
 
         /**
-         * @type {{node: AttributeNode, message: string, messageId?: string}}
+         * @type {{node: Attribute, message: string, messageId?: string}}
          */
         const result = {
           node: attr,

package/lib/rules/no-restricted-attrs.js

@@ -1,9 +1,9 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").StyleTagNode } StyleTagNode
- * @typedef { import("../types").AttributeNode } AttributeNode
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
+ * @typedef { import("../types").StyleTag } StyleTag
+ * @typedef { import("../types").Attribute } Attribute
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").ScriptTag } ScriptTag
  * @typedef {{tagPatterns: string[], attrPatterns: string[], message?: string}[]} Options
  */
 
@@ -67,7 +67,7 @@ module.exports = {
     const checkers = options.map((option) => new PatternChecker(option));
 
     /**
-     * @param {TagNode | StyleTagNode | ScriptTagNode} node
+     * @param {Tag | StyleTag | ScriptTag} node
      */
     function check(node) {
       const tagName =
@@ -89,7 +89,7 @@ module.exports = {
         }
 
         /**
-         * @type {{node: AttributeNode, message: string, messageId?: string}}
+         * @type {{node: Attribute, message: string, messageId?: string}}
          */
         const result = {
           node: attr,