@html-eslint/eslint-plugin 0.41.0-alpha.0 → 0.42.0

package/lib/rules/index.js

@@ -27,6 +27,7 @@ const noDuplicateAttrs = require("./no-duplicate-attrs");
 const noAbstractRoles = require("./no-abstract-roles");
 const requireButtonType = require("./require-button-type");
 const noAriaHiddenBody = require("./no-aria-hidden-body");
+const noAriaHiddenOnFocusable = require("./no-aria-hidden-on-focusable");
 const noMultipleEmptyLines = require("./no-multiple-empty-lines");
 const noAccesskeyAttrs = require("./no-accesskey-attrs");
 const noRestrictedAttrs = require("./no-restricted-attrs");
@@ -47,6 +48,9 @@ const maxElementDepth = require("./max-element-depth");
 const requireExplicitSize = require("./require-explicit-size");
 const useBaseLine = require("./use-baseline");
 const noDuplicateClass = require("./no-duplicate-class");
+const noEmptyHeadings = require("./no-empty-headings");
+const noInvalidEntity = require("./no-invalid-entity");
+const noDuplicateInHead = require("./no-duplicate-in-head");
 // import new rule here ↑
 // DO NOT REMOVE THIS COMMENT
 
@@ -81,6 +85,7 @@ const rules = {
   "no-abstract-roles": noAbstractRoles,
   "require-button-type": requireButtonType,
   "no-aria-hidden-body": noAriaHiddenBody,
+  "no-aria-hidden-on-focusable": noAriaHiddenOnFocusable,
   "no-multiple-empty-lines": noMultipleEmptyLines,
   "no-accesskey-attrs": noAccesskeyAttrs,
   "no-restricted-attrs": noRestrictedAttrs,
@@ -100,6 +105,9 @@ const rules = {
   "require-explicit-size": requireExplicitSize,
   "use-baseline": useBaseLine,
   "no-duplicate-class": noDuplicateClass,
+  "no-empty-headings": noEmptyHeadings,
+  "no-invalid-entity": noInvalidEntity,
+  "no-duplicate-in-head": noDuplicateInHead,
   // export new rule here ↑
   // DO NOT REMOVE THIS COMMENT
 };

package/lib/rules/lowercase.js

@@ -5,11 +5,10 @@
  * @typedef { import("../types").RuleModule<[]> } RuleModule
  */
 
-const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
 const SVG_CAMEL_CASE_ATTRIBUTES = require("../constants/svg-camel-case-attributes");
 const { createVisitors } = require("./utils/visitors");
-const { hasTemplate } = require("./utils/node");
+const { hasTemplate, isScript, isStyle } = require("./utils/node");
 const { getRuleUrl } = require("./utils/rule");
 
 const MESSAGE_IDS = {
@@ -67,8 +66,8 @@ module.exports = {
      * @param {Tag | StyleTag | ScriptTag} node
      */
     function nameOf(node) {
-      if (node.type === NODE_TYPES.ScriptTag) return "script";
-      if (node.type === NODE_TYPES.StyleTag) return "style";
+      if (isScript(node)) return "script";
+      if (isStyle(node)) return "style";
       return node.name;
     }
 
@@ -77,7 +76,11 @@ module.exports = {
      */
     function check(node) {
       const raw = node.openStart.value.slice(1);
-      if (nameOf(node) !== raw) {
+      const name = nameOf(node);
+      if (
+        name !== raw &&
+        (svgStack.length === 0 || name.toLowerCase() === "svg")
+      ) {
         context.report({
           node: node.openStart,
           messageId: MESSAGE_IDS.UNEXPECTED,

package/lib/rules/max-element-depth.js

@@ -25,7 +25,7 @@ module.exports = {
 
     docs: {
       description: "Enforce element maximum depth",
-      category: RULE_CATEGORY.STYLE,
+      category: RULE_CATEGORY.BEST_PRACTICE,
       recommended: false,
       url: getRuleUrl("max-element-depth"),
     },

package/lib/rules/no-aria-hidden-on-focusable.js

@@ -0,0 +1,118 @@
+/**
+ * @typedef { import("../types").RuleModule<[]> } RuleModule
+ * @typedef { import("@html-eslint/types").Tag } Tag
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
+const { getRuleUrl } = require("./utils/rule");
+
+const MESSAGE_IDS = {
+  UNEXPECTED: "unexpected",
+};
+
+// List of elements that are inherently focusable
+const FOCUSABLE_ELEMENTS = new Set([
+  "a", // if href is present
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "video", // if controls is present
+  "audio", // if controls is present
+  "details",
+  "embed",
+  "iframe",
+  "summary",
+]);
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: 'Disallow aria-hidden="true" on focusable elements',
+      category: RULE_CATEGORY.ACCESSIBILITY,
+      recommended: false,
+      url: getRuleUrl("no-aria-hidden-on-focusable"),
+    },
+
+    fixable: null,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.UNEXPECTED]:
+        'Unexpected aria-hidden="true" on focusable element.',
+    },
+  },
+
+  create(context) {
+    /**
+     * Checks if an element is focusable
+     * @param {Tag} node
+     * @returns {boolean}
+     */
+    function isFocusable(node) {
+      const tagName = node.name.toLowerCase();
+
+      const contentEditableAttr = findAttr(node, "contenteditable");
+      if (contentEditableAttr) {
+        const value = contentEditableAttr.value
+          ? contentEditableAttr.value.value.toLowerCase()
+          : "";
+        if (value === "" || value === "true" || value === "plaintext-only") {
+          return true;
+        }
+      }
+
+      // Check for tabindex attribute
+      const tabIndexAttr = findAttr(node, "tabindex");
+      if (tabIndexAttr && tabIndexAttr.value) {
+        const tabIndexValue = tabIndexAttr.value.value;
+        // If tabindex is -1, the element is not focusable
+        if (tabIndexValue === "-1") {
+          return false;
+        }
+        // If tabindex is present and not -1, the element is focusable
+        return true;
+      }
+
+      // Special cases for elements that are only focusable with certain attributes
+      if (tagName === "a") {
+        return !!findAttr(node, "href");
+      }
+
+      if (tagName === "audio" || tagName === "video") {
+        return !!findAttr(node, "controls");
+      }
+
+      // Check if element is inherently focusable
+      return FOCUSABLE_ELEMENTS.has(tagName);
+    }
+
+    return createVisitors(context, {
+      Tag(node) {
+        const ariaHiddenAttr = findAttr(node, "aria-hidden");
+        if (!ariaHiddenAttr || !ariaHiddenAttr.value) {
+          return;
+        }
+
+        // Only check for aria-hidden="true"
+        if (ariaHiddenAttr.value.value !== "true") {
+          return;
+        }
+
+        // Check if the element is focusable
+        if (isFocusable(node)) {
+          context.report({
+            node: ariaHiddenAttr,
+            messageId: MESSAGE_IDS.UNEXPECTED,
+          });
+        }
+      },
+    });
+  },
+};

package/lib/rules/no-duplicate-in-head.js

@@ -0,0 +1,191 @@
+/**
+ * @typedef { import("@html-eslint/types").Tag } Tag
+ * @typedef { import("@html-eslint/types").StyleTag } StyleTag
+ * @typedef { import("@html-eslint/types").ScriptTag } ScriptTag
+ * @typedef { import("@html-eslint/types").AttributeValue } AttributeValue
+ * @typedef { import("../types").RuleModule<[]> } RuleModule
+ */
+
+const { parse } = require("@html-eslint/template-parser");
+const { RULE_CATEGORY } = require("../constants");
+const { findAttr } = require("./utils/node");
+const {
+  shouldCheckTaggedTemplateExpression,
+  shouldCheckTemplateLiteral,
+} = require("./utils/settings");
+const { getSourceCode } = require("./utils/source-code");
+const { getRuleUrl } = require("./utils/rule");
+
+const MESSAGE_IDS = {
+  DUPLICATE_TAG: "duplicateTag",
+};
+
+/**
+ * Returns a formatted string representing a tag's key detail.
+ * E.g., meta[charset=UTF-8], meta[name=viewport], link[rel=canonical]
+ * @param {Tag} node
+ * @returns {string | null}
+ */
+function getTrackingKey(node) {
+  const tagName = node.name.toLowerCase();
+
+  if (["title", "base"].includes(tagName)) {
+    return tagName;
+  }
+
+  if (tagName === "meta") {
+    const charsetAttr = findAttr(node, "charset");
+    if (charsetAttr) {
+      return "meta[charset]";
+    }
+
+    const nameAttr = findAttr(node, "name");
+    if (nameAttr && nameAttr.value && nameAttr.value.value === "viewport") {
+      return "meta[name=viewport]";
+    }
+  }
+
+  if (tagName === "link") {
+    const relAttr = findAttr(node, "rel");
+    const hrefAttr = findAttr(node, "href");
+    if (
+      relAttr &&
+      relAttr.value &&
+      relAttr.value.value === "canonical" &&
+      hrefAttr
+    ) {
+      return "link[rel=canonical]";
+    }
+  }
+
+  return null;
+}
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+    docs: {
+      description: "Disallow duplicate tags in `<head>`",
+      category: RULE_CATEGORY.BEST_PRACTICE,
+      recommended: false,
+      url: getRuleUrl("no-duplicate-in-head"),
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.DUPLICATE_TAG]: "Duplicate <{{tag}}> tag in <head>.",
+    },
+  },
+
+  create(context) {
+    const htmlTagsMap = new Map();
+    let headCount = 0;
+
+    /**
+     * @param {Map<string, Tag[]>} map
+     * @param {{count: number}|null} headCountRef
+     */
+    function createTagVisitor(map, headCountRef = null) {
+      return {
+        /**
+         * @param {Tag} node
+         */
+        Tag(node) {
+          const tagName = node.name.toLowerCase();
+
+          if (tagName === "head") {
+            if (headCountRef !== null) {
+              headCountRef.count++;
+            } else {
+              headCount++;
+            }
+            return;
+          }
+
+          const currentHeadCount =
+            headCountRef !== null ? headCountRef.count : headCount;
+          if (currentHeadCount === 0) return;
+
+          const trackingKey = getTrackingKey(node);
+          if (typeof trackingKey !== "string") return;
+
+          if (!map.has(trackingKey)) {
+            map.set(trackingKey, []);
+          }
+
+          const nodes = map.get(trackingKey);
+          if (nodes) {
+            nodes.push(node);
+          }
+        },
+
+        /**
+         * @param {Tag} node
+         */
+        "Tag:exit"(node) {
+          const tagName = node.name.toLowerCase();
+          if (tagName === "head") {
+            if (headCountRef !== null) {
+              headCountRef.count--;
+            } else {
+              headCount--;
+            }
+          }
+        },
+      };
+    }
+
+    /**
+     * @param {Map<string, Tag[]>} map
+     */
+    function report(map) {
+      map.forEach((tags, tagKey) => {
+        if (Array.isArray(tags) && tags.length > 1) {
+          tags.slice(1).forEach((tag) => {
+            context.report({
+              node: tag,
+              data: { tag: tagKey },
+              messageId: MESSAGE_IDS.DUPLICATE_TAG,
+            });
+          });
+        }
+      });
+    }
+
+    const htmlVisitor = createTagVisitor(htmlTagsMap);
+
+    return {
+      Tag: htmlVisitor.Tag,
+      "Tag:exit": htmlVisitor["Tag:exit"],
+
+      "Document:exit"() {
+        report(htmlTagsMap);
+      },
+
+      TaggedTemplateExpression(node) {
+        const tagsMap = new Map();
+        const headCountRef = { count: 0 };
+
+        if (shouldCheckTaggedTemplateExpression(node, context)) {
+          const visitor = createTagVisitor(tagsMap, headCountRef);
+          parse(node.quasi, getSourceCode(context), visitor);
+          report(tagsMap);
+        }
+      },
+
+      TemplateLiteral(node) {
+        const tagsMap = new Map();
+        const headCountRef = { count: 0 };
+
+        if (shouldCheckTemplateLiteral(node, context)) {
+          const visitor = createTagVisitor(tagsMap, headCountRef);
+          parse(node, getSourceCode(context), visitor);
+          report(tagsMap);
+        }
+      },
+    };
+  },
+};

package/lib/rules/no-empty-headings.js

@@ -0,0 +1,122 @@
+/**
+ * @typedef { import("../types").RuleModule<[]> } RuleModule
+ * @typedef { import("@html-eslint/types").Tag } Tag
+ * @typedef { import("@html-eslint/types").Text } Text
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { findAttr, isTag, isText } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
+const { getRuleUrl } = require("./utils/rule");
+
+const MESSAGE_IDS = {
+  EMPTY_HEADING: "emptyHeading",
+  INACCESSIBLE_HEADING: "inaccessibleHeading",
+};
+
+const HEADING_NAMES = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
+
+/**
+ * @param {Tag} node
+ */
+function isAriaHidden(node) {
+  const ariaHiddenAttr = findAttr(node, "aria-hidden");
+  return (
+    ariaHiddenAttr &&
+    ariaHiddenAttr.value &&
+    ariaHiddenAttr.value.value === "true"
+  );
+}
+
+/**
+ * @param {Tag} node
+ * @returns {boolean}
+ */
+function isRoleHeading(node) {
+  const roleAttr = findAttr(node, "role");
+  return !!roleAttr && !!roleAttr.value && roleAttr.value.value === "heading";
+}
+
+/**
+ * @param {Text | Tag} node
+ * @returns {string}
+ */
+function getAllText(node) {
+  if (!isTag(node) || !node.children.length) return "";
+  let text = "";
+  for (const child of node.children) {
+    if (isText(child)) {
+      text += child.value.trim();
+    } else if (isTag(child)) {
+      text += getAllText(child);
+    }
+  }
+  return text;
+}
+
+/**
+ * @param {Text | Tag} node
+ * @returns {string}
+ */
+function getAccessibleText(node) {
+  if (!isTag(node) || !node.children.length) return "";
+  let text = "";
+  for (const child of node.children) {
+    if (isText(child)) {
+      text += child.value.trim();
+    } else if (isTag(child) && !isAriaHidden(child)) {
+      text += getAccessibleText(child);
+    }
+  }
+  return text;
+}
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+    docs: {
+      description: "Disallow empty or inaccessible headings.",
+      category: RULE_CATEGORY.ACCESSIBILITY,
+      recommended: false,
+      url: getRuleUrl("no-empty-headings"),
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.EMPTY_HEADING]: "Headings must not be empty.",
+      [MESSAGE_IDS.INACCESSIBLE_HEADING]:
+        "Heading text is inaccessible to assistive technology.",
+    },
+  },
+  create(context) {
+    return createVisitors(context, {
+      Tag(node) {
+        const tagName = node.name.toLowerCase();
+        const isHeadingTag = HEADING_NAMES.has(tagName);
+        const isRoleHeadingEl = isRoleHeading(node);
+        if (!isHeadingTag && !isRoleHeadingEl) return;
+
+        // Gather all text (including aria-hidden)
+        const allText = getAllText(node);
+        if (!allText) {
+          context.report({
+            node,
+            messageId: MESSAGE_IDS.EMPTY_HEADING,
+          });
+          return;
+        }
+        // Gather accessible text (not aria-hidden)
+        const accessibleText = getAccessibleText(node);
+        if (!accessibleText) {
+          context.report({
+            node,
+            messageId: MESSAGE_IDS.INACCESSIBLE_HEADING,
+          });
+        }
+      },
+    });
+  },
+};

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

@@ -30,7 +30,7 @@ module.exports = {
 
     docs: {
       description: "Disallow unnecessary consecutive spaces",
-      category: RULE_CATEGORY.BEST_PRACTICE,
+      category: RULE_CATEGORY.STYLE,
       recommended: false,
       url: getRuleUrl("no-extra-spacing-text"),
     },

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

@@ -0,0 +1,108 @@
+/**
+ * @typedef { import("../types").RuleModule<[]> } RuleModule
+ * @typedef { import("../types").SuggestionReportDescriptor } SuggestionReportDescriptor
+ * @typedef { import("@html-eslint/types").Text} Text
+ */
+
+// Define the type for entities.json
+/**
+ * @typedef {Object} EntityData
+ * @property {number[]} codepoints
+ * @property {string} characters
+ */
+
+/** @type {{ [key: string]: EntityData }} */
+const entities = require("../data/entities.json");
+
+const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
+const { getRuleUrl } = require("./utils/rule");
+
+const MESSAGE_IDS = {
+  INVALID_ENTITY: "invalidEntity",
+};
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+    docs: {
+      description: "Disallows the use of invalid HTML entities",
+      category: RULE_CATEGORY.BEST_PRACTICE,
+      recommended: false,
+      url: getRuleUrl("no-invalid-entity"),
+    },
+    fixable: null,
+    hasSuggestions: false,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.INVALID_ENTITY]: "Invalid HTML entity '{{entity}}' used.",
+    },
+  },
+
+  create(context) {
+    /**
+     * @param {Text} node
+     */
+    function check(node) {
+      const text = node.value;
+
+      // Regular expression to match named and numeric entities
+      const entityRegex = /&([a-zA-Z]+|#[0-9]+|#x[0-9a-fA-F]+|[#][^;]+);/g;
+      let match;
+
+      while ((match = entityRegex.exec(text)) !== null) {
+        const entity = match[0];
+        const entityName = match[1];
+
+        // Check named entities
+        if (!entityName.startsWith("#")) {
+          const fullEntity = `&${entityName};`;
+          if (!Object.prototype.hasOwnProperty.call(entities, fullEntity)) {
+            context.report({
+              node,
+              messageId: MESSAGE_IDS.INVALID_ENTITY,
+              data: { entity },
+            });
+          }
+        }
+        // Check numeric entities
+        else {
+          const isHex = entityName[1] === "x";
+          const numStr = isHex ? entityName.slice(2) : entityName.slice(1);
+          const num = isHex ? parseInt(numStr, 16) : parseInt(numStr, 10);
+
+          // If the number is not a valid integer, report an error
+          if (isNaN(num)) {
+            context.report({
+              node,
+              messageId: MESSAGE_IDS.INVALID_ENTITY,
+              data: { entity },
+            });
+            continue;
+          }
+
+          // Check if the numeric entity is valid (exists in entities.json or within valid Unicode range)
+          const entityKey = Object.keys(entities).find((key) => {
+            const codepoints = entities[key].codepoints;
+            return codepoints.length === 1 && codepoints[0] === num;
+          });
+
+          if (!entityKey && (num < 0 || num > 0x10ffff)) {
+            context.report({
+              node,
+              messageId: MESSAGE_IDS.INVALID_ENTITY,
+              data: { entity },
+            });
+          }
+        }
+      }
+    }
+
+    return createVisitors(context, {
+      Text: check,
+    });
+  },
+};