html-validate 10.7.0 → 10.8.0

package/dist/cjs/core.js

@@ -4008,7 +4008,7 @@ class Rule {
   }
 }
 
-const defaults$z = {
+const defaults$A = {
   allowExternal: true,
   allowRelative: true,
   allowAbsolute: true,
@@ -4052,7 +4052,7 @@ class AllowedLinks extends Rule {
   allowRelative;
   allowAbsolute;
   constructor(options) {
-    super({ ...defaults$z, ...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$y = {
+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$y, ...options });
+    super({ ...defaults$z, ...options });
   }
   static schema() {
     return {
@@ -4329,7 +4329,7 @@ class AriaHiddenBody extends Rule {
   }
 }
 
-const defaults$x = {
+const defaults$y = {
   allowAnyNamable: false,
   elements: {
     include: null,
@@ -4377,7 +4377,7 @@ function isValidUsage(target, meta) {
 }
 class AriaLabelMisuse extends Rule {
   constructor(options) {
-    super({ ...defaults$x, ...options });
+    super({ ...defaults$y, ...options });
   }
   static schema() {
     return {
@@ -4546,14 +4546,14 @@ class CaseStyle {
   }
 }
 
-const defaults$w = {
+const defaults$x = {
   style: "lowercase",
   ignoreForeign: true
 };
 class AttrCase extends Rule {
   style;
   constructor(options) {
-    super({ ...defaults$w, ...options });
+    super({ ...defaults$x, ...options });
     this.style = new CaseStyle(this.options.style, "attr-case");
   }
   static schema() {
@@ -4958,7 +4958,7 @@ class AttrDelimiter extends Rule {
 }
 
 const DEFAULT_PATTERN = "[a-z0-9-:]+";
-const defaults$v = {
+const defaults$w = {
   pattern: DEFAULT_PATTERN,
   ignoreForeign: true
 };
@@ -4991,7 +4991,7 @@ function generateDescription(name, pattern) {
 class AttrPattern extends Rule {
   pattern;
   constructor(options) {
-    super({ ...defaults$v, ...options });
+    super({ ...defaults$w, ...options });
     this.pattern = generateRegexp(this.options.pattern);
   }
   static schema() {
@@ -5038,7 +5038,7 @@ class AttrPattern extends Rule {
   }
 }
 
-const defaults$u = {
+const defaults$v = {
   style: "auto",
   unquoted: false
 };
@@ -5104,7 +5104,7 @@ class AttrQuotes extends Rule {
     };
   }
   constructor(options) {
-    super({ ...defaults$u, ...options });
+    super({ ...defaults$v, ...options });
     this.style = parseStyle$3(this.options.style);
   }
   setup() {
@@ -5260,13 +5260,13 @@ class AttributeAllowedValues extends Rule {
   }
 }
 
-const defaults$t = {
+const defaults$u = {
   style: "omit"
 };
 class AttributeBooleanStyle extends Rule {
   hasInvalidStyle;
   constructor(options) {
-    super({ ...defaults$t, ...options });
+    super({ ...defaults$u, ...options });
     this.hasInvalidStyle = parseStyle$2(this.options.style);
   }
   static schema() {
@@ -5336,13 +5336,13 @@ function reportMessage$1(attr, style) {
   return "";
 }
 
-const defaults$s = {
+const defaults$t = {
   style: "omit"
 };
 class AttributeEmptyStyle extends Rule {
   hasInvalidStyle;
   constructor(options) {
-    super({ ...defaults$s, ...options });
+    super({ ...defaults$t, ...options });
     this.hasInvalidStyle = parseStyle$1(this.options.style);
   }
   static schema() {
@@ -5459,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",
@@ -9755,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",
@@ -10799,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,
@@ -11164,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",
@@ -12178,7 +12294,7 @@ class EventHandler {
 }
 
 const name = "html-validate";
-const version = "10.7.0";
+const version = "10.8.0";
 const bugs = "https://gitlab.com/html-validate/html-validate/issues/new";
 
 function freeze(src) {