html-validate 10.6.0 → 10.8.0

package/dist/cjs/core.js

@@ -4008,7 +4008,7 @@ class Rule {
   }
 }
 
-const defaults$y = {
+const defaults$A = {
   allowExternal: true,
   allowRelative: true,
   allowAbsolute: true,
@@ -4052,7 +4052,7 @@ class AllowedLinks extends Rule {
   allowRelative;
   allowAbsolute;
   constructor(options) {
-    super({ ...defaults$y, ...options });
+    super({ ...defaults$A, ...options });
     this.allowExternal = parseAllow(this.options.allowExternal);
     this.allowRelative = parseAllow(this.options.allowRelative);
     this.allowAbsolute = parseAllow(this.options.allowAbsolute);
@@ -4220,7 +4220,7 @@ class AllowedLinks extends Rule {
   }
 }
 
-const defaults$x = {
+const defaults$z = {
   accessible: true
 };
 function findByTarget(target, siblings) {
@@ -4250,7 +4250,7 @@ function getDescription$1(context) {
 }
 class AreaAlt extends Rule {
   constructor(options) {
-    super({ ...defaults$x, ...options });
+    super({ ...defaults$z, ...options });
   }
   static schema() {
     return {
@@ -4329,8 +4329,12 @@ class AriaHiddenBody extends Rule {
   }
 }
 
-const defaults$w = {
-  allowAnyNamable: false
+const defaults$y = {
+  allowAnyNamable: false,
+  elements: {
+    include: null,
+    exclude: null
+  }
 };
 const allowlist = /* @__PURE__ */ new Set([
   "main",
@@ -4373,7 +4377,26 @@ function isValidUsage(target, meta) {
 }
 class AriaLabelMisuse extends Rule {
   constructor(options) {
-    super({ ...defaults$w, ...options });
+    super({ ...defaults$y, ...options });
+  }
+  static schema() {
+    return {
+      allowAnyNamable: {
+        type: "boolean"
+      },
+      elements: {
+        type: "object",
+        properties: {
+          include: {
+            anyOf: [{ type: "array", items: { type: "string" } }, { type: "null" }]
+          },
+          exclude: {
+            anyOf: [{ type: "array", items: { type: "string" } }, { type: "null" }]
+          }
+        },
+        additionalProperties: false
+      }
+    };
   }
   documentation(context) {
     const valid = [
@@ -4431,6 +4454,9 @@ class AriaLabelMisuse extends Rule {
     if (!meta) {
       return;
     }
+    if (this.shouldIgnoreElement(target)) {
+      return;
+    }
     if (isValidUsage(target, meta)) {
       return;
     }
@@ -4455,6 +4481,9 @@ class AriaLabelMisuse extends Rule {
       });
     }
   }
+  shouldIgnoreElement(target) {
+    return isKeywordIgnored(this.options.elements, target.tagName, keywordPatternMatcher);
+  }
 }
 
 class ConfigError extends UserError {
@@ -4517,14 +4546,14 @@ class CaseStyle {
   }
 }
 
-const defaults$v = {
+const defaults$x = {
   style: "lowercase",
   ignoreForeign: true
 };
 class AttrCase extends Rule {
   style;
   constructor(options) {
-    super({ ...defaults$v, ...options });
+    super({ ...defaults$x, ...options });
     this.style = new CaseStyle(this.options.style, "attr-case");
   }
   static schema() {
@@ -4631,7 +4660,7 @@ const MATCH_TEXTAREA_DATA = /^[^]*?(?=<\/textarea)/;
 const MATCH_TEXTAREA_END = /^<(\/)(textarea)/;
 const MATCH_TITLE_DATA = /^[^]*?(?=<\/title)/;
 const MATCH_TITLE_END = /^<(\/)(title)/;
-const MATCH_DIRECTIVE = /^(<!--\s*\[html-validate-)([a-z0-9-]+)(\s*)(.*?)(]?\s*-->)/;
+const MATCH_DIRECTIVE = /^(<!--\s*\[?)(html-validate-)([a-z0-9-]+)(\s*)(.*?)(]?\s*-->)/;
 const MATCH_COMMENT = /^<!--([^]*?)-->/;
 const MATCH_CONDITIONAL = /^<!\[([^\]]*?)\]>/;
 class InvalidTokenError extends Error {
@@ -4929,7 +4958,7 @@ class AttrDelimiter extends Rule {
 }
 
 const DEFAULT_PATTERN = "[a-z0-9-:]+";
-const defaults$u = {
+const defaults$w = {
   pattern: DEFAULT_PATTERN,
   ignoreForeign: true
 };
@@ -4962,7 +4991,7 @@ function generateDescription(name, pattern) {
 class AttrPattern extends Rule {
   pattern;
   constructor(options) {
-    super({ ...defaults$u, ...options });
+    super({ ...defaults$w, ...options });
     this.pattern = generateRegexp(this.options.pattern);
   }
   static schema() {
@@ -5009,7 +5038,7 @@ class AttrPattern extends Rule {
   }
 }
 
-const defaults$t = {
+const defaults$v = {
   style: "auto",
   unquoted: false
 };
@@ -5075,7 +5104,7 @@ class AttrQuotes extends Rule {
     };
   }
   constructor(options) {
-    super({ ...defaults$t, ...options });
+    super({ ...defaults$v, ...options });
     this.style = parseStyle$3(this.options.style);
   }
   setup() {
@@ -5231,13 +5260,13 @@ class AttributeAllowedValues extends Rule {
   }
 }
 
-const defaults$s = {
+const defaults$u = {
   style: "omit"
 };
 class AttributeBooleanStyle extends Rule {
   hasInvalidStyle;
   constructor(options) {
-    super({ ...defaults$s, ...options });
+    super({ ...defaults$u, ...options });
     this.hasInvalidStyle = parseStyle$2(this.options.style);
   }
   static schema() {
@@ -5307,13 +5336,13 @@ function reportMessage$1(attr, style) {
   return "";
 }
 
-const defaults$r = {
+const defaults$t = {
   style: "omit"
 };
 class AttributeEmptyStyle extends Rule {
   hasInvalidStyle;
   constructor(options) {
-    super({ ...defaults$r, ...options });
+    super({ ...defaults$t, ...options });
     this.hasInvalidStyle = parseStyle$1(this.options.style);
   }
   static schema() {
@@ -5430,6 +5459,122 @@ class AttributeMisuse extends Rule {
   }
 }
 
+const defaults$s = {
+  preferred: void 0
+};
+function isPasswordInput(event) {
+  const { target } = event;
+  if (!target.is("input")) {
+    return false;
+  }
+  const type = target.getAttribute("type");
+  return type?.value?.toString().toLowerCase() === "password";
+}
+function isGroupingToken(token) {
+  return token.startsWith("section-") || token === "shipping" || token === "billing";
+}
+class AutocompletePassword extends Rule {
+  preferred;
+  constructor(options) {
+    super({ ...defaults$s, ...options });
+    this.preferred = options.preferred?.toLowerCase();
+  }
+  static schema() {
+    return {
+      preferred: {
+        type: "string"
+      }
+    };
+  }
+  documentation(context) {
+    const url = "https://html-validate.org/rules/autocomplete-password.html";
+    switch (context.kind) {
+      case "preferred-mismatch":
+        return {
+          description: [
+            `\`<input type="password">\` should use \`autocomplete="${context.preferred}"\`.`,
+            "",
+            `The configured preferred autocomplete value is \`"${context.preferred}"\` but the element uses \`"${context.value}"\`.`
+          ].join("\n"),
+          url
+        };
+      case "off":
+      case "missing":
+      default: {
+        const error = context.kind === "off" ? '`<input type="password">` should not use `autocomplete="off"`.' : '`<input type="password">` must have the `autocomplete` attribute.';
+        return {
+          description: [
+            error,
+            "",
+            "Browsers and password managers often ignore the absence of autocomplete and autofill password fields anyway, which can lead to unexpected behavior where users unknowingly submit autofilled passwords for unrelated fields.",
+            "",
+            "Use one of the following values:",
+            "",
+            '- `autocomplete="new-password"` for password creation forms',
+            '- `autocomplete="current-password"` for login forms'
+          ].join("\n"),
+          url
+        };
+      }
+    }
+  }
+  setup() {
+    this.on("tag:ready", isPasswordInput, (event) => {
+      const { preferred } = this;
+      const { target } = event;
+      const autocomplete = target.getAttribute("autocomplete");
+      if (!autocomplete) {
+        const context = { kind: "missing" };
+        this.report({
+          node: target,
+          message: '<input type="password"> is missing required "autocomplete" attribute',
+          location: target.location,
+          context
+        });
+        return;
+      }
+      if (autocomplete.isDynamic || !autocomplete.value) {
+        return;
+      }
+      const raw = autocomplete.value.toString().toLowerCase();
+      const tokens = new DOMTokenList(raw, autocomplete.valueLocation);
+      const index = tokens.findIndex((token) => !isGroupingToken(token));
+      const value = tokens.item(index);
+      const location = tokens.location(index);
+      if (!value) {
+        return;
+      }
+      if (value === "off") {
+        const context = { kind: "off" };
+        this.report({
+          node: target,
+          message: '<input type="password"> should not use autocomplete="off"',
+          /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- location must be present if value is */
+          location,
+          context
+        });
+        return;
+      }
+      if (preferred) {
+        if (value !== preferred) {
+          const context = {
+            kind: "preferred-mismatch",
+            value,
+            preferred
+          };
+          this.report({
+            node: target,
+            message: `<input type="password"> should use autocomplete="${preferred}"`,
+            /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- location must be present if value is */
+            location,
+            context
+          });
+        }
+      }
+    });
+  }
+}
+
 const patternNamesValues = [
   "kebabcase",
   "camelcase",
@@ -5561,7 +5706,7 @@ class BasePatternRule extends Rule {
   }
 }
 
-const defaults$q = {
+const defaults$r = {
   pattern: "kebabcase"
 };
 class ClassPattern extends BasePatternRule {
@@ -5569,7 +5714,7 @@ class ClassPattern extends BasePatternRule {
     super({
       ruleId: "class-pattern",
       attr: "class",
-      options: { ...defaults$q, ...options },
+      options: { ...defaults$r, ...options },
       allowedPatterns: patternNames
       // allow all patterns
     });
@@ -5719,13 +5864,13 @@ class CloseOrder extends Rule {
   }
 }
 
-const defaults$p = {
+const defaults$q = {
   include: null,
   exclude: null
 };
 class Deprecated extends Rule {
   constructor(options) {
-    super({ ...defaults$p, ...options });
+    super({ ...defaults$q, ...options });
   }
   static schema() {
     return {
@@ -5879,12 +6024,12 @@ let NoStyleTag$1 = class NoStyleTag extends Rule {
   }
 };
 
-const defaults$o = {
+const defaults$p = {
   style: "uppercase"
 };
 class DoctypeStyle extends Rule {
   constructor(options) {
-    super({ ...defaults$o, ...options });
+    super({ ...defaults$p, ...options });
   }
   static schema() {
     return {
@@ -5912,13 +6057,13 @@ class DoctypeStyle extends Rule {
   }
 }
 
-const defaults$n = {
+const defaults$o = {
   style: "lowercase"
 };
 class ElementCase extends Rule {
   style;
   constructor(options) {
-    super({ ...defaults$n, ...options });
+    super({ ...defaults$o, ...options });
     this.style = new CaseStyle(this.options.style, "element-case");
   }
   static schema() {
@@ -5978,7 +6123,7 @@ class ElementCase extends Rule {
   }
 }
 
-const defaults$m = {
+const defaults$n = {
   pattern: "^[a-z][a-z0-9\\-._]*-[a-z0-9\\-._]*$",
   whitelist: [],
   blacklist: []
@@ -5986,7 +6131,7 @@ const defaults$m = {
 class ElementName extends Rule {
   pattern;
   constructor(options) {
-    super({ ...defaults$m, ...options });
+    super({ ...defaults$n, ...options });
     this.pattern = new RegExp(this.options.pattern);
   }
   static schema() {
@@ -6023,7 +6168,7 @@ class ElementName extends Rule {
         ...context.blacklist.map((cur) => `- ${cur}`)
       ];
     }
-    if (context.pattern !== defaults$m.pattern) {
+    if (context.pattern !== defaults$n.pattern) {
       return [
         `<${context.tagName}> is not a valid element name. This project is configured to only allow names matching the following regular expression:`,
         "",
@@ -6540,7 +6685,7 @@ class EmptyTitle extends Rule {
   }
 }
 
-const defaults$l = {
+const defaults$m = {
   allowArrayBrackets: true,
   allowCheckboxDefault: true,
   shared: ["radio", "button", "reset", "submit"]
@@ -6600,7 +6745,7 @@ function getDocumentation(context) {
 }
 class FormDupName extends Rule {
   constructor(options) {
-    super({ ...defaults$l, ...options });
+    super({ ...defaults$m, ...options });
   }
   static schema() {
     return {
@@ -6759,7 +6904,7 @@ class FormDupName extends Rule {
   }
 }
 
-const defaults$k = {
+const defaults$l = {
   allowMultipleH1: false,
   minInitialRank: "h1",
   sectioningRoots: ["dialog", '[role="dialog"]', '[role="alertdialog"]']
@@ -6791,7 +6936,7 @@ class HeadingLevel extends Rule {
   sectionRoots;
   stack = [];
   constructor(options) {
-    super({ ...defaults$k, ...options });
+    super({ ...defaults$l, ...options });
     this.minInitialRank = parseMaxInitial(this.options.minInitialRank);
     this.sectionRoots = this.options.sectioningRoots.map((it) => new Compound(it));
     this.stack.push({
@@ -7030,7 +7175,7 @@ class HiddenFocusable extends Rule {
   }
 }
 
-const defaults$j = {
+const defaults$k = {
   pattern: "kebabcase"
 };
 function exclude$1(set, ...values) {
@@ -7046,7 +7191,7 @@ class IdPattern extends BasePatternRule {
     super({
       ruleId: "id-pattern",
       attr: "id",
-      options: { ...defaults$j, ...options },
+      options: { ...defaults$k, ...options },
       allowedPatterns
     });
   }
@@ -7368,13 +7513,13 @@ function findLabelByParent(el) {
   return [];
 }
 
-const defaults$i = {
+const defaults$j = {
   maxlength: 70
 };
 class LongTitle extends Rule {
   maxlength;
   constructor(options) {
-    super({ ...defaults$i, ...options });
+    super({ ...defaults$j, ...options });
     this.maxlength = this.options.maxlength;
   }
   static schema() {
@@ -7478,12 +7623,12 @@ class MapIdName extends Rule {
   }
 }
 
-const defaults$h = {
+const defaults$i = {
   allowLongDelay: false
 };
 class MetaRefresh extends Rule {
   constructor(options) {
-    super({ ...defaults$h, ...options });
+    super({ ...defaults$i, ...options });
   }
   documentation() {
     return {
@@ -7594,7 +7739,7 @@ class MultipleLabeledControls extends Rule {
   }
 }
 
-const defaults$g = {
+const defaults$h = {
   pattern: "camelcase"
 };
 function exclude(set, ...values) {
@@ -7610,7 +7755,7 @@ class NamePattern extends BasePatternRule {
     super({
       ruleId: "name-pattern",
       attr: "name",
-      options: { ...defaults$g, ...options },
+      options: { ...defaults$h, ...options },
       allowedPatterns
     });
   }
@@ -7701,13 +7846,13 @@ class NoAbstractRole extends Rule {
   }
 }
 
-const defaults$f = {
+const defaults$g = {
   include: null,
   exclude: null
 };
 class NoAutoplay extends Rule {
   constructor(options) {
-    super({ ...defaults$f, ...options });
+    super({ ...defaults$g, ...options });
   }
   documentation(context) {
     return {
@@ -8029,14 +8174,14 @@ class NoImplicitInputType extends Rule {
   }
 }
 
-const defaults$e = {
+const defaults$f = {
   include: null,
   exclude: null,
   allowedProperties: ["display"]
 };
 class NoInlineStyle extends Rule {
   constructor(options) {
-    super({ ...defaults$e, ...options });
+    super({ ...defaults$f, ...options });
   }
   static schema() {
     return {
@@ -8222,7 +8367,7 @@ class NoMultipleMain extends Rule {
   }
 }
 
-const defaults$d = {
+const defaults$e = {
   relaxed: false
 };
 const textRegexp = /([<>]|&(?![a-zA-Z0-9#]+;))/g;
@@ -8240,7 +8385,7 @@ const replacementTable = {
 class NoRawCharacters extends Rule {
   relaxed;
   constructor(options) {
-    super({ ...defaults$d, ...options });
+    super({ ...defaults$e, ...options });
     this.relaxed = this.options.relaxed;
   }
   static schema() {
@@ -8420,13 +8565,13 @@ class NoRedundantRole extends Rule {
 }
 
 const xmlns = /^(.+):.+$/;
-const defaults$c = {
+const defaults$d = {
   ignoreForeign: true,
   ignoreXML: true
 };
 class NoSelfClosing extends Rule {
   constructor(options) {
-    super({ ...defaults$c, ...options });
+    super({ ...defaults$d, ...options });
   }
   static schema() {
     return {
@@ -8476,7 +8621,20 @@ function isRelevant(node, options) {
   return true;
 }
 
+const defaults$c = {
+  allowTemplate: true
+};
 class NoStyleTag extends Rule {
+  constructor(options) {
+    super({ ...defaults$c, ...options });
+  }
+  static schema() {
+    return {
+      allowTemplate: {
+        type: "boolean"
+      }
+    };
+  }
   documentation() {
     return {
       description: "Prefer to use external stylesheets with the `<link>` tag instead of inlining the styling.",
@@ -8484,9 +8642,13 @@ class NoStyleTag extends Rule {
     };
   }
   setup() {
+    const { allowTemplate } = this.options;
     this.on("tag:start", (event) => {
       const node = event.target;
       if (node.tagName === "style") {
+        if (allowTemplate && node.parent?.is("template")) {
+          return;
+        }
         this.report(node, "Use external stylesheet with <link> instead of <style> tag");
       }
     });
@@ -9393,7 +9555,7 @@ function getTextFromReference(document, id) {
   if (!id || id instanceof DynamicValue) {
     return id;
   }
-  const selector = `#${id}`;
+  const selector = generateIdSelector(id);
   const ref = document.querySelector(selector);
   if (ref) {
     return ref.textContent;
@@ -9709,9 +9871,7 @@ const fieldNameGroup = {
   nickname: "text",
   username: "username",
   "new-password": "password",
-  // eslint-disable-line sonarjs/no-hardcoded-passwords -- false positive, it is not used as a password
   "current-password": "password",
-  // eslint-disable-line sonarjs/no-hardcoded-passwords -- false positive, it is not used as a password
   "one-time-code": "password",
   "organization-title": "text",
   organization: "text",
@@ -10753,6 +10913,7 @@ const bundledRules = {
   "attribute-boolean-style": AttributeBooleanStyle,
   "attribute-empty-style": AttributeEmptyStyle,
   "attribute-misuse": AttributeMisuse,
+  "autocomplete-password": AutocompletePassword,
   "class-pattern": ClassPattern,
   "close-attr": CloseAttr,
   "close-order": CloseOrder,
@@ -11118,6 +11279,7 @@ const config$1 = {
     "attribute-boolean-style": "error",
     "attribute-empty-style": "error",
     "attribute-misuse": "error",
+    "autocomplete-password": "error",
     "close-attr": "error",
     "close-order": "error",
     deprecated: "error",
@@ -12132,7 +12294,7 @@ class EventHandler {
 }
 
 const name = "html-validate";
-const version = "10.6.0";
+const version = "10.8.0";
 const bugs = "https://gitlab.com/html-validate/html-validate/issues/new";
 
 function freeze(src) {
@@ -12678,31 +12840,34 @@ class Parser {
    * @internal
    */
   consumeDirective(token) {
-    const [text, preamble, action, separator1, directive, postamble] = token.data;
-    if (!postamble.startsWith("]")) {
-      throw new ParserError(token.location, `Missing end bracket "]" on directive "${text}"`);
+    const [text, preamble, prefix, action, separator1, directive, postamble] = token.data;
+    const hasStartBracket = preamble.includes("[");
+    const hasEndBracket = postamble.startsWith("]");
+    if (hasStartBracket && !hasEndBracket) {
+      this.trigger("parse:error", {
+        location: sliceLocation(token.location, preamble.length - 1, -postamble.length),
+        message: `Missing end bracket "]" on directive "${text}"`
+      });
+      return;
     }
     const match = /^(.*?)(?:(\s*(?:--|:)\s*)(.*))?$/.exec(directive);
     if (!match) {
       throw new Error(`Failed to parse directive "${text}"`);
     }
     if (!isValidDirective(action)) {
+      const begin = preamble.length;
+      const end = preamble.length + prefix.length + action.length;
       this.trigger("parse:error", {
-        location: token.location,
+        location: sliceLocation(token.location, begin, -text.length + end),
         message: `Unknown directive "${action}"`
       });
       return;
     }
     const [, data, separator2, comment] = match;
-    const prefix = "html-validate-";
-    const actionOffset = preamble.length;
+    const actionOffset = preamble.length + prefix.length;
     const optionsOffset = actionOffset + action.length + separator1.length;
     const commentOffset = optionsOffset + data.length + (separator2 || "").length;
-    const location = sliceLocation(
-      token.location,
-      preamble.length - prefix.length - 1,
-      -postamble.length + 1
-    );
+    const location = sliceLocation(token.location, preamble.length - 1, -postamble.length + 1);
     const actionLocation = sliceLocation(
       token.location,
       actionOffset,