html-validate 10.6.0 → 10.8.0

package/dist/esm/core.js

@@ -3999,7 +3999,7 @@ class Rule {
   }
 }
 
-const defaults$y = {
+const defaults$A = {
   allowExternal: true,
   allowRelative: true,
   allowAbsolute: true,
@@ -4043,7 +4043,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);
@@ -4211,7 +4211,7 @@ class AllowedLinks extends Rule {
   }
 }
 
-const defaults$x = {
+const defaults$z = {
   accessible: true
 };
 function findByTarget(target, siblings) {
@@ -4241,7 +4241,7 @@ function getDescription$1(context) {
 }
 class AreaAlt extends Rule {
   constructor(options) {
-    super({ ...defaults$x, ...options });
+    super({ ...defaults$z, ...options });
   }
   static schema() {
     return {
@@ -4320,8 +4320,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",
@@ -4364,7 +4368,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 = [
@@ -4422,6 +4445,9 @@ class AriaLabelMisuse extends Rule {
     if (!meta) {
       return;
     }
+    if (this.shouldIgnoreElement(target)) {
+      return;
+    }
     if (isValidUsage(target, meta)) {
       return;
     }
@@ -4446,6 +4472,9 @@ class AriaLabelMisuse extends Rule {
       });
     }
   }
+  shouldIgnoreElement(target) {
+    return isKeywordIgnored(this.options.elements, target.tagName, keywordPatternMatcher);
+  }
 }
 
 class ConfigError extends UserError {
@@ -4508,14 +4537,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() {
@@ -4622,7 +4651,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 {
@@ -4920,7 +4949,7 @@ class AttrDelimiter extends Rule {
 }
 
 const DEFAULT_PATTERN = "[a-z0-9-:]+";
-const defaults$u = {
+const defaults$w = {
   pattern: DEFAULT_PATTERN,
   ignoreForeign: true
 };
@@ -4953,7 +4982,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() {
@@ -5000,7 +5029,7 @@ class AttrPattern extends Rule {
   }
 }
 
-const defaults$t = {
+const defaults$v = {
   style: "auto",
   unquoted: false
 };
@@ -5066,7 +5095,7 @@ class AttrQuotes extends Rule {
     };
   }
   constructor(options) {
-    super({ ...defaults$t, ...options });
+    super({ ...defaults$v, ...options });
     this.style = parseStyle$3(this.options.style);
   }
   setup() {
@@ -5222,13 +5251,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() {
@@ -5298,13 +5327,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() {
@@ -5421,6 +5450,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",
@@ -5552,7 +5697,7 @@ class BasePatternRule extends Rule {
   }
 }
 
-const defaults$q = {
+const defaults$r = {
   pattern: "kebabcase"
 };
 class ClassPattern extends BasePatternRule {
@@ -5560,7 +5705,7 @@ class ClassPattern extends BasePatternRule {
     super({
       ruleId: "class-pattern",
       attr: "class",
-      options: { ...defaults$q, ...options },
+      options: { ...defaults$r, ...options },
       allowedPatterns: patternNames
       // allow all patterns
     });
@@ -5710,13 +5855,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 {
@@ -5870,12 +6015,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 {
@@ -5903,13 +6048,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() {
@@ -5969,7 +6114,7 @@ class ElementCase extends Rule {
   }
 }
 
-const defaults$m = {
+const defaults$n = {
   pattern: "^[a-z][a-z0-9\\-._]*-[a-z0-9\\-._]*$",
   whitelist: [],
   blacklist: []
@@ -5977,7 +6122,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() {
@@ -6014,7 +6159,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:`,
         "",
@@ -6531,7 +6676,7 @@ class EmptyTitle extends Rule {
   }
 }
 
-const defaults$l = {
+const defaults$m = {
   allowArrayBrackets: true,
   allowCheckboxDefault: true,
   shared: ["radio", "button", "reset", "submit"]
@@ -6591,7 +6736,7 @@ function getDocumentation(context) {
 }
 class FormDupName extends Rule {
   constructor(options) {
-    super({ ...defaults$l, ...options });
+    super({ ...defaults$m, ...options });
   }
   static schema() {
     return {
@@ -6750,7 +6895,7 @@ class FormDupName extends Rule {
   }
 }
 
-const defaults$k = {
+const defaults$l = {
   allowMultipleH1: false,
   minInitialRank: "h1",
   sectioningRoots: ["dialog", '[role="dialog"]', '[role="alertdialog"]']
@@ -6782,7 +6927,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({
@@ -7021,7 +7166,7 @@ class HiddenFocusable extends Rule {
   }
 }
 
-const defaults$j = {
+const defaults$k = {
   pattern: "kebabcase"
 };
 function exclude$1(set, ...values) {
@@ -7037,7 +7182,7 @@ class IdPattern extends BasePatternRule {
     super({
       ruleId: "id-pattern",
       attr: "id",
-      options: { ...defaults$j, ...options },
+      options: { ...defaults$k, ...options },
       allowedPatterns
     });
   }
@@ -7359,13 +7504,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() {
@@ -7469,12 +7614,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 {
@@ -7585,7 +7730,7 @@ class MultipleLabeledControls extends Rule {
   }
 }
 
-const defaults$g = {
+const defaults$h = {
   pattern: "camelcase"
 };
 function exclude(set, ...values) {
@@ -7601,7 +7746,7 @@ class NamePattern extends BasePatternRule {
     super({
       ruleId: "name-pattern",
       attr: "name",
-      options: { ...defaults$g, ...options },
+      options: { ...defaults$h, ...options },
       allowedPatterns
     });
   }
@@ -7692,13 +7837,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 {
@@ -8020,14 +8165,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 {
@@ -8213,7 +8358,7 @@ class NoMultipleMain extends Rule {
   }
 }
 
-const defaults$d = {
+const defaults$e = {
   relaxed: false
 };
 const textRegexp = /([<>]|&(?![a-zA-Z0-9#]+;))/g;
@@ -8231,7 +8376,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() {
@@ -8411,13 +8556,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 {
@@ -8467,7 +8612,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.",
@@ -8475,9 +8633,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");
       }
     });
@@ -9384,7 +9546,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;
@@ -9700,9 +9862,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",
@@ -10744,6 +10904,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,
@@ -11109,6 +11270,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",
@@ -12123,7 +12285,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) {
@@ -12669,31 +12831,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,
@@ -14540,5 +14705,5 @@ const engines = {
 
 var workerPath = "./jest-worker.js";
 
-export { compatibilityCheckImpl as $, Attribute as A, Reporter as B, Config as C, DOMNode as D, definePlugin as E, ruleExists as F, walk as G, HtmlElement as H, EventHandler as I, engines as J, normalizeSource as K, transformSource as L, MetaCopyableProperty as M, NodeClosed as N, Engine as O, Parser as P, transformSourceSync as Q, ResolvedConfig as R, Severity as S, TextNode as T, UserError as U, Validator as V, WrappedError as W, transformFilename as X, transformFilenameSync as Y, configurationSchema as Z, isThenable as _, ConfigError as a, workerPath as a0, codeframe as a1, name as a2, bugs as a3, ConfigLoader as b, defineConfig as c, deepmerge as d, ensureError as e, StaticConfigLoader as f, getFormatter as g, DOMTokenList as h, ignore as i, DOMTree as j, DynamicValue as k, NodeType as l, NestedError as m, SchemaValidationError as n, isUserError as o, presets as p, MetaTable as q, TextContent$1 as r, staticResolver as s, Rule as t, TextClassification as u, version as v, ariaNaming as w, classifyNodeText as x, keywordPatternMatcher as y, sliceLocation as z };
+export { engines as $, Attribute as A, TextContent$1 as B, ConfigLoader as C, DOMNode as D, Engine as E, TextNode as F, ariaNaming as G, HtmlElement as H, classifyNodeText as I, presets as J, defineConfig as K, definePlugin as L, MetaCopyableProperty as M, NestedError as N, isUserError as O, Parser as P, keywordPatternMatcher as Q, Reporter as R, StaticConfigLoader as S, TextClassification as T, UserError as U, Validator as V, WrappedError as W, ruleExists as X, sliceLocation as Y, staticResolver as Z, walk as _, transformSourceSync as a, workerPath as a0, codeframe as a1, name as a2, bugs as a3, transformFilename as b, transformFilenameSync as c, configurationSchema as d, ConfigError as e, Config as f, compatibilityCheckImpl as g, ensureError as h, isThenable as i, getFormatter as j, deepmerge as k, ignore as l, DOMTokenList as m, normalizeSource as n, DOMTree as o, DynamicValue as p, EventHandler as q, MetaTable as r, NodeClosed as s, transformSource as t, NodeType as u, version as v, ResolvedConfig as w, Rule as x, SchemaValidationError as y, Severity as z };
 //# sourceMappingURL=core.js.map