html-validate 8.14.0 → 8.15.0

package/dist/es/core.js

@@ -6546,26 +6546,6 @@ class IdPattern extends Rule {
 const restricted = /* @__PURE__ */ new Map([
   ["accept", ["file"]],
   ["alt", ["image"]],
-  [
-    "autocomplete",
-    [
-      "hidden",
-      "text",
-      "search",
-      "url",
-      "tel",
-      "email",
-      "password",
-      "date",
-      "month",
-      "week",
-      "time",
-      "datetime-local",
-      "number",
-      "range",
-      "color"
-    ]
-  ],
   ["capture", ["file"]],
   ["checked", ["checkbox", "radio"]],
   ["dirname", ["text", "search"]],
@@ -6946,7 +6926,7 @@ class MetaRefresh extends Rule {
   }
 }
 function parseContent(text) {
-  const match = text.match(/^(\d+)(?:\s*;\s*url=(.*))?/);
+  const match = text.match(/^(\d+)(?:\s*;\s*url=(.*))?/i);
   if (match) {
     return {
       delay: parseInt(match[1], 10),
@@ -9033,6 +9013,522 @@ class UnknownCharReference extends Rule {
   }
 }
 
+const expectedOrder = ["section", "hint", "contact", "field1", "field2", "webauthn"];
+const fieldNames1 = [
+  "name",
+  "honorific-prefix",
+  "given-name",
+  "additional-name",
+  "family-name",
+  "honorific-suffix",
+  "nickname",
+  "username",
+  "new-password",
+  "current-password",
+  "one-time-code",
+  "organization-title",
+  "organization",
+  "street-address",
+  "address-line1",
+  "address-line2",
+  "address-line3",
+  "address-level4",
+  "address-level3",
+  "address-level2",
+  "address-level1",
+  "country",
+  "country-name",
+  "postal-code",
+  "cc-name",
+  "cc-given-name",
+  "cc-additional-name",
+  "cc-family-name",
+  "cc-number",
+  "cc-exp",
+  "cc-exp-month",
+  "cc-exp-year",
+  "cc-csc",
+  "cc-type",
+  "transaction-currency",
+  "transaction-amount",
+  "language",
+  "bday",
+  "bday-day",
+  "bday-month",
+  "bday-year",
+  "sex",
+  "url",
+  "photo"
+];
+const fieldNames2 = [
+  "tel",
+  "tel-country-code",
+  "tel-national",
+  "tel-area-code",
+  "tel-local",
+  "tel-local-prefix",
+  "tel-local-suffix",
+  "tel-extension",
+  "email",
+  "impp"
+];
+const fieldNameGroup = {
+  name: "text",
+  "honorific-prefix": "text",
+  "given-name": "text",
+  "additional-name": "text",
+  "family-name": "text",
+  "honorific-suffix": "text",
+  nickname: "text",
+  username: "username",
+  "new-password": "password",
+  "current-password": "password",
+  "one-time-code": "password",
+  "organization-title": "text",
+  organization: "text",
+  "street-address": "multiline",
+  "address-line1": "text",
+  "address-line2": "text",
+  "address-line3": "text",
+  "address-level4": "text",
+  "address-level3": "text",
+  "address-level2": "text",
+  "address-level1": "text",
+  country: "text",
+  "country-name": "text",
+  "postal-code": "text",
+  "cc-name": "text",
+  "cc-given-name": "text",
+  "cc-additional-name": "text",
+  "cc-family-name": "text",
+  "cc-number": "text",
+  "cc-exp": "month",
+  "cc-exp-month": "numeric",
+  "cc-exp-year": "numeric",
+  "cc-csc": "text",
+  "cc-type": "text",
+  "transaction-currency": "text",
+  "transaction-amount": "numeric",
+  language: "text",
+  bday: "date",
+  "bday-day": "numeric",
+  "bday-month": "numeric",
+  "bday-year": "numeric",
+  sex: "text",
+  url: "url",
+  photo: "url",
+  tel: "tel",
+  "tel-country-code": "text",
+  "tel-national": "text",
+  "tel-area-code": "text",
+  "tel-local": "text",
+  "tel-local-prefix": "text",
+  "tel-local-suffix": "text",
+  "tel-extension": "text",
+  email: "username",
+  impp: "url"
+};
+const disallowedInputTypes = ["checkbox", "radio", "file", "submit", "image", "reset", "button"];
+function matchSection(token) {
+  return token.startsWith("section-");
+}
+function matchHint(token) {
+  return token === "shipping" || token === "billing";
+}
+function matchFieldNames1(token) {
+  return fieldNames1.includes(token);
+}
+function matchContact(token) {
+  const haystack = ["home", "work", "mobile", "fax", "pager"];
+  return haystack.includes(token);
+}
+function matchFieldNames2(token) {
+  return fieldNames2.includes(token);
+}
+function matchWebauthn(token) {
+  return token === "webauthn";
+}
+function matchToken(token) {
+  if (matchSection(token)) {
+    return "section";
+  }
+  if (matchHint(token)) {
+    return "hint";
+  }
+  if (matchFieldNames1(token)) {
+    return "field1";
+  }
+  if (matchFieldNames2(token)) {
+    return "field2";
+  }
+  if (matchContact(token)) {
+    return "contact";
+  }
+  if (matchWebauthn(token)) {
+    return "webauthn";
+  }
+  return null;
+}
+function getControlGroups(type) {
+  const allGroups = [
+    "text",
+    "multiline",
+    "password",
+    "url",
+    "username",
+    "tel",
+    "numeric",
+    "month",
+    "date"
+  ];
+  const mapping = {
+    hidden: allGroups,
+    text: allGroups.filter((it) => it !== "multiline"),
+    search: allGroups.filter((it) => it !== "multiline"),
+    password: ["password"],
+    url: ["url"],
+    email: ["username"],
+    tel: ["tel"],
+    number: ["numeric"],
+    month: ["month"],
+    date: ["date"]
+  };
+  const groups = mapping[type];
+  if (groups) {
+    return groups;
+  }
+  return [];
+}
+function isDisallowedType(node, type) {
+  if (!node.is("input")) {
+    return false;
+  }
+  return disallowedInputTypes.includes(type);
+}
+function getTerminalMessage(context) {
+  switch (context.msg) {
+    case 0 /* InvalidAttribute */:
+      return "autocomplete attribute cannot be used on {{ what }}";
+    case 1 /* InvalidValue */:
+      return '"{{ value }}" cannot be used on {{ what }}';
+    case 2 /* InvalidOrder */:
+      return '"{{ second }}" must appear before "{{ first }}"';
+    case 3 /* InvalidToken */:
+      return '"{{ token }}" is not a valid autocomplete token or field name';
+    case 4 /* InvalidCombination */:
+      return '"{{ second }}" cannot be combined with "{{ first }}"';
+    case 5 /* MissingField */:
+      return "autocomplete attribute is missing field name";
+  }
+}
+function getMarkdownMessage(context) {
+  switch (context.msg) {
+    case 0 /* InvalidAttribute */:
+      return [
+        `\`autocomplete\` attribute cannot be used on \`${context.what}\``,
+        "",
+        "The following input types cannot use the `autocomplete` attribute:",
+        "",
+        ...disallowedInputTypes.map((it) => `- \`${it}\``)
+      ].join("\n");
+    case 1 /* InvalidValue */: {
+      const message = `\`"${context.value}"\` cannot be used on \`${context.what}\``;
+      if (context.type === "form") {
+        return [
+          message,
+          "",
+          'The `<form>` element can only use the values `"on"` and `"off"`.'
+        ].join("\n");
+      }
+      if (context.type === "hidden") {
+        return [
+          message,
+          "",
+          '`<input type="hidden">` cannot use the values `"on"` and `"off"`.'
+        ].join("\n");
+      }
+      const controlGroups = getControlGroups(context.type);
+      const currentGroup = fieldNameGroup[context.value];
+      return [
+        message,
+        "",
+        `\`${context.what}\` allows autocomplete fields from the following group${controlGroups.length > 1 ? "s" : ""}:`,
+        "",
+        ...controlGroups.map((it) => `- ${it}`),
+        "",
+        `The field \`"${context.value}"\` belongs to the group /${currentGroup}/ which cannot be used with this input type.`
+      ].join("\n");
+    }
+    case 2 /* InvalidOrder */:
+      return [
+        `\`"${context.second}"\` must appear before \`"${context.first}"\``,
+        "",
+        "The autocomplete tokens must appear in the following order:",
+        "",
+        "- Optional section name (`section-` prefix).",
+        "- Optional `shipping` or `billing` token.",
+        "- Optional `home`, `work`, `mobile`, `fax` or `pager` token (for fields supporting it).",
+        "- Field name",
+        "- Optional `webauthn` token."
+      ].join("\n");
+    case 3 /* InvalidToken */:
+      return `\`"${context.token}"\` is not a valid autocomplete token or field name`;
+    case 4 /* InvalidCombination */:
+      return `\`"${context.second}"\` cannot be combined with \`"${context.first}"\``;
+    case 5 /* MissingField */:
+      return "Autocomplete attribute is missing field name";
+  }
+}
+class ValidAutocomplete extends Rule {
+  documentation(context) {
+    return {
+      description: getMarkdownMessage(context),
+      url: "https://html-validate.org/rules/valid-autocomplete.html"
+    };
+  }
+  setup() {
+    this.on("dom:ready", (event) => {
+      const { document } = event;
+      const elements = document.querySelectorAll("[autocomplete]");
+      for (const element of elements) {
+        const autocomplete = element.getAttribute("autocomplete");
+        if (autocomplete.value === null || autocomplete.value instanceof DynamicValue) {
+          continue;
+        }
+        const location = autocomplete.valueLocation;
+        const value = autocomplete.value.toLowerCase();
+        const tokens = new DOMTokenList(value, location);
+        if (tokens.length === 0) {
+          continue;
+        }
+        this.validate(element, value, tokens, autocomplete.keyLocation, location);
+      }
+    });
+  }
+  validate(node, value, tokens, keyLocation, valueLocation) {
+    switch (node.tagName) {
+      case "form":
+        this.validateFormAutocomplete(node, value, valueLocation);
+        break;
+      case "input":
+      case "textarea":
+      case "select":
+        this.validateControlAutocomplete(node, tokens, keyLocation);
+        break;
+    }
+  }
+  validateControlAutocomplete(node, tokens, keyLocation) {
+    const type = node.getAttributeValue("type") ?? "text";
+    const mantle = type !== "hidden" ? "expectation" : "anchor";
+    if (isDisallowedType(node, type)) {
+      const context = {
+        msg: 0 /* InvalidAttribute */,
+        what: `<input type="${type}">`
+      };
+      this.report({
+        node,
+        message: getTerminalMessage(context),
+        location: keyLocation,
+        context
+      });
+      return;
+    }
+    if (tokens.includes("on") || tokens.includes("off")) {
+      this.validateOnOff(node, mantle, tokens);
+      return;
+    }
+    this.validateTokens(node, tokens, keyLocation);
+  }
+  validateFormAutocomplete(node, value, location) {
+    const trimmed = value.trim();
+    if (["on", "off"].includes(trimmed)) {
+      return;
+    }
+    const context = {
+      msg: 1 /* InvalidValue */,
+      type: "form",
+      value: trimmed,
+      what: "<form>"
+    };
+    this.report({
+      node,
+      message: getTerminalMessage(context),
+      location,
+      context
+    });
+  }
+  validateOnOff(node, mantle, tokens) {
+    const index = tokens.findIndex((it) => it === "on" || it === "off");
+    const value = tokens.item(index);
+    const location = tokens.location(index);
+    if (tokens.length > 1) {
+      const context = {
+        msg: 4 /* InvalidCombination */,
+        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- it must be present of it wouldn't be found */
+        first: tokens.item(index > 0 ? 0 : 1),
+        second: value
+      };
+      this.report({
+        node,
+        message: getTerminalMessage(context),
+        location,
+        context
+      });
+    }
+    switch (mantle) {
+      case "expectation":
+        return;
+      case "anchor": {
+        const context = {
+          msg: 1 /* InvalidValue */,
+          type: "hidden",
+          value,
+          what: `<input type="hidden">`
+        };
+        this.report({
+          node,
+          message: getTerminalMessage(context),
+          location: tokens.location(0),
+          context
+        });
+      }
+    }
+  }
+  validateTokens(node, tokens, keyLocation) {
+    const order = [];
+    for (const { item, location } of tokens.iterator()) {
+      const tokenType = matchToken(item);
+      if (tokenType) {
+        order.push(tokenType);
+      } else {
+        const context = {
+          msg: 3 /* InvalidToken */,
+          token: item
+        };
+        this.report({
+          node,
+          message: getTerminalMessage(context),
+          location,
+          context
+        });
+        return;
+      }
+    }
+    const fieldTokens = order.map((it) => it === "field1" || it === "field2");
+    this.validateFieldPresence(node, tokens, fieldTokens, keyLocation);
+    this.validateContact(node, tokens, order);
+    this.validateOrder(node, tokens, order);
+    this.validateControlGroup(node, tokens, fieldTokens);
+  }
+  /**
+   * Ensure that exactly one field name is present from the two field lists.
+   */
+  validateFieldPresence(node, tokens, fieldTokens, keyLocation) {
+    const numFields = fieldTokens.filter(Boolean).length;
+    if (numFields === 0) {
+      const context = {
+        msg: 5 /* MissingField */
+      };
+      this.report({
+        node,
+        message: getTerminalMessage(context),
+        location: keyLocation,
+        context
+      });
+    } else if (numFields > 1) {
+      const a = fieldTokens.indexOf(true);
+      const b = fieldTokens.lastIndexOf(true);
+      const context = {
+        msg: 4 /* InvalidCombination */,
+        /* eslint-disable @typescript-eslint/no-non-null-assertion -- it must be present of it wouldn't be found */
+        first: tokens.item(a),
+        second: tokens.item(b)
+        /* eslint-enable @typescript-eslint/no-non-null-assertion */
+      };
+      this.report({
+        node,
+        message: getTerminalMessage(context),
+        location: tokens.location(b),
+        context
+      });
+    }
+  }
+  /**
+   * Ensure contact token is only used with field names from the second list.
+   */
+  validateContact(node, tokens, order) {
+    if (order.includes("contact") && order.includes("field1")) {
+      const a = order.indexOf("field1");
+      const b = order.indexOf("contact");
+      const context = {
+        msg: 4 /* InvalidCombination */,
+        /* eslint-disable @typescript-eslint/no-non-null-assertion -- it must be present of it wouldn't be found */
+        first: tokens.item(a),
+        second: tokens.item(b)
+        /* eslint-enable @typescript-eslint/no-non-null-assertion */
+      };
+      this.report({
+        node,
+        message: getTerminalMessage(context),
+        location: tokens.location(b),
+        context
+      });
+    }
+  }
+  validateOrder(node, tokens, order) {
+    const indicies = order.map((it) => expectedOrder.indexOf(it));
+    for (let i = 0; i < indicies.length - 1; i++) {
+      if (indicies[0] > indicies[i + 1]) {
+        const context = {
+          msg: 2 /* InvalidOrder */,
+          /* eslint-disable @typescript-eslint/no-non-null-assertion -- it must be present of it wouldn't be found */
+          first: tokens.item(i),
+          second: tokens.item(i + 1)
+          /* eslint-enable @typescript-eslint/no-non-null-assertion */
+        };
+        this.report({
+          node,
+          message: getTerminalMessage(context),
+          location: tokens.location(i + 1),
+          context
+        });
+      }
+    }
+  }
+  validateControlGroup(node, tokens, fieldTokens) {
+    const numFields = fieldTokens.filter(Boolean).length;
+    if (numFields === 0) {
+      return;
+    }
+    if (!node.is("input")) {
+      return;
+    }
+    const attr = node.getAttribute("type");
+    const type = (attr == null ? void 0 : attr.value) ?? "text";
+    if (type instanceof DynamicValue) {
+      return;
+    }
+    const controlGroups = getControlGroups(type);
+    const fieldIndex = fieldTokens.indexOf(true);
+    const fieldToken = tokens.item(fieldIndex);
+    const fieldGroup = fieldNameGroup[fieldToken];
+    if (!controlGroups.includes(fieldGroup)) {
+      const context = {
+        msg: 1 /* InvalidValue */,
+        type,
+        value: fieldToken,
+        what: `<input type="${type}">`
+      };
+      this.report({
+        node,
+        message: getTerminalMessage(context),
+        location: tokens.location(fieldIndex),
+        context
+      });
+    }
+  }
+}
+
 const defaults$3 = {
   relaxed: false
 };
@@ -9587,6 +10083,7 @@ const bundledRules = {
   "text-content": TextContent,
   "unique-landmark": UniqueLandmark,
   "unrecognized-char-ref": UnknownCharReference,
+  "valid-autocomplete": ValidAutocomplete,
   "valid-id": ValidID,
   "void-content": VoidContent,
   "void-style": VoidStyle,
@@ -9617,6 +10114,7 @@ const config$4 = {
     "svg-focusable": "off",
     "text-content": "error",
     "unique-landmark": "error",
+    "valid-autocomplete": "error",
     "wcag/h30": "error",
     "wcag/h32": "error",
     "wcag/h36": "error",
@@ -9716,6 +10214,7 @@ const config$1 = {
     "text-content": "error",
     "unique-landmark": "error",
     "unrecognized-char-ref": "error",
+    "valid-autocomplete": "error",
     "valid-id": ["error", { relaxed: false }],
     void: "off",
     "void-content": "error",
@@ -9763,6 +10262,7 @@ const config = {
     "no-unused-disable": "error",
     "script-element": "error",
     "unrecognized-char-ref": "error",
+    "valid-autocomplete": "error",
     "valid-id": ["error", { relaxed: true }],
     "void-content": "error"
   }
@@ -11988,7 +12488,7 @@ class HtmlValidate {
 }
 
 const name = "html-validate";
-const version = "8.14.0";
+const version = "8.15.0";
 const bugs = "https://gitlab.com/html-validate/html-validate/issues/new";
 
 function definePlugin(plugin) {