html-validate 10.1.2 → 10.3.0

package/dist/esm/core.js

@@ -1486,7 +1486,7 @@ function sliceLocation(location, begin, end, wrap) {
   if (wrap) {
     let index = -1;
     const col = sliced.column;
-    do {
+    for (; ; ) {
       index = wrap.indexOf("\n", index + 1);
       if (index >= 0 && index < begin) {
         sliced.column = col - (index + 1);
@@ -1494,7 +1494,7 @@ function sliceLocation(location, begin, end, wrap) {
       } else {
         break;
       }
-    } while (true);
+    }
   }
   return sliced;
 }
@@ -1509,6 +1509,7 @@ var State = /* @__PURE__ */ ((State2) => {
   State2[State2["SCRIPT"] = 7] = "SCRIPT";
   State2[State2["STYLE"] = 8] = "STYLE";
   State2[State2["TEXTAREA"] = 9] = "TEXTAREA";
+  State2[State2["TITLE"] = 10] = "TITLE";
   return State2;
 })(State || {});
 
@@ -1517,6 +1518,7 @@ var ContentModel = /* @__PURE__ */ ((ContentModel2) => {
   ContentModel2[ContentModel2["SCRIPT"] = 2] = "SCRIPT";
   ContentModel2[ContentModel2["STYLE"] = 3] = "STYLE";
   ContentModel2[ContentModel2["TEXTAREA"] = 4] = "TEXTAREA";
+  ContentModel2[ContentModel2["TITLE"] = 5] = "TITLE";
   return ContentModel2;
 })(ContentModel || {});
 class Context {
@@ -3270,7 +3272,7 @@ class Validator {
   static validatePermittedCategory(node, category, defaultMatch) {
     const [, rawCategory] = /^(@?.*?)([?*]?)$/.exec(category);
     if (!rawCategory.startsWith("@")) {
-      return node.tagName === rawCategory;
+      return node.matches(rawCategory);
     }
     if (!node.meta) {
       return defaultMatch;
@@ -3471,7 +3473,7 @@ function inAccessibilityTree(node) {
 function isAriaHiddenImpl(node) {
   const getAriaHiddenAttr = (node2) => {
     const ariaHidden = node2.getAttribute("aria-hidden");
-    return Boolean(ariaHidden && ariaHidden.value === "true");
+    return ariaHidden?.value === "true";
   };
   return {
     byParent: node.parent ? isAriaHidden(node.parent) : false,
@@ -3706,7 +3708,7 @@ function getSchemaValidator(ruleId, properties) {
   return ajv$1.compile(schema);
 }
 function isErrorDescriptor(value) {
-  return Boolean(value[0] && value[0].message);
+  return Boolean(value[0] && value[0]["message"]);
 }
 function unpackErrorDescriptor(value) {
   if (isErrorDescriptor(value)) {
@@ -3977,8 +3979,7 @@ class Rule {
    * @returns Rule documentation and url with additional details or `null` if no
    * additional documentation is available.
    */
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars -- technical debt, prototype should be moved to interface */
-  documentation(context) {
+  documentation(_context) {
     return null;
   }
 }
@@ -4307,7 +4308,7 @@ class AriaHiddenBody extends Rule {
 const defaults$w = {
   allowAnyNamable: false
 };
-const whitelisted = [
+const allowlist = /* @__PURE__ */ new Set([
   "main",
   "nav",
   "table",
@@ -4320,18 +4321,19 @@ const whitelisted = [
   "article",
   "dialog",
   "form",
+  "iframe",
   "img",
   "area",
   "fieldset",
   "summary",
   "figure"
-];
+]);
 function isValidUsage(target, meta) {
   const explicit = meta.attributes["aria-label"];
   if (explicit) {
     return true;
   }
-  if (whitelisted.includes(target.tagName)) {
+  if (allowlist.has(target.tagName)) {
     return true;
   }
   if (target.hasAttribute("role")) {
@@ -4349,7 +4351,7 @@ class AriaLabelMisuse extends Rule {
   constructor(options) {
     super({ ...defaults$w, ...options });
   }
-  documentation() {
+  documentation(context) {
     const valid = [
       "Interactive elements",
       "Labelable elements",
@@ -4363,25 +4365,41 @@ class AriaLabelMisuse extends Rule {
       "`<summary>`",
       "`<table>`, `<td>` and `<th>`"
     ];
-    const lines = valid.map((it) => `- ${it}
-`).join("");
-    return {
-      description: `\`aria-label\` can only be used on:
-
-${lines}`,
-      url: "https://html-validate.org/rules/aria-label-misuse.html"
-    };
+    const lines = valid.map((it) => `- ${it}`);
+    const url = "https://html-validate.org/rules/aria-label-misuse.html";
+    if (context.allowsNaming) {
+      return {
+        description: [
+          `\`${context.attr}\` is strictly allowed but is not recommended to be used on this element.`,
+          `\`${context.attr}\` can only be used on:`,
+          "",
+          ...lines
+        ].join("\n"),
+        url
+      };
+    } else {
+      return {
+        description: [`\`${context.attr}\` can only be used on:`, "", ...lines].join("\n"),
+        url
+      };
+    }
   }
   setup() {
     this.on("dom:ready", (event) => {
       const { document } = event;
-      for (const target of document.querySelectorAll("[aria-label]")) {
-        this.validateElement(target);
+      for (const target of document.querySelectorAll("[aria-label], [aria-labelledby]")) {
+        const ariaLabel = target.getAttribute("aria-label");
+        if (ariaLabel) {
+          this.validateElement(target, ariaLabel, "aria-label");
+        }
+        const ariaLabelledby = target.getAttribute("aria-labelledby");
+        if (ariaLabelledby) {
+          this.validateElement(target, ariaLabelledby, "aria-labelledby");
+        }
       }
     });
   }
-  validateElement(target) {
-    const attr = target.getAttribute("aria-label");
+  validateElement(target, attr, key) {
     if (!attr.value || attr.valueMatches("", false)) {
       return;
     }
@@ -4392,10 +4410,26 @@ ${lines}`,
     if (isValidUsage(target, meta)) {
       return;
     }
-    if (this.options.allowAnyNamable && ariaNaming(target) === "allowed") {
+    const allowsNaming = ariaNaming(target) === "allowed";
+    if (allowsNaming && this.options.allowAnyNamable) {
       return;
     }
-    this.report(target, `"aria-label" cannot be used on this element`, attr.keyLocation);
+    const context = { attr: key, allowsNaming };
+    if (allowsNaming) {
+      this.report({
+        node: target,
+        location: attr.keyLocation,
+        context,
+        message: `"{{ attr }}" is strictly allowed but is not recommended to be used on this element`
+      });
+    } else {
+      this.report({
+        node: target,
+        location: attr.keyLocation,
+        context,
+        message: `"{{ attr }}" cannot be used on this element`
+      });
+    }
   }
 }
 
@@ -4571,6 +4605,8 @@ const MATCH_STYLE_DATA = /^[^]*?(?=<\/style)/;
 const MATCH_STYLE_END = /^<(\/)(style)/;
 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_COMMENT = /^<!--([^]*?)-->/;
 const MATCH_CONDITIONAL = /^<!\[([^\]]*?)\]>/;
@@ -4616,6 +4652,9 @@ class Lexer {
         case State.TEXTAREA:
           yield* this.tokenizeTextarea(context);
           break;
+        case State.TITLE:
+          yield* this.tokenizeTitle(context);
+          break;
         /* istanbul ignore next: sanity check: should not happen unless adding new states */
         default:
           this.unhandled(context);
@@ -4690,6 +4729,8 @@ class Lexer {
         context.contentModel = ContentModel.STYLE;
       } else if (data[0] === "<textarea") {
         context.contentModel = ContentModel.TEXTAREA;
+      } else if (data[0] === "<title") {
+        context.contentModel = ContentModel.TITLE;
       } else {
         context.contentModel = ContentModel.TEXT;
       }
@@ -4747,6 +4788,12 @@ class Lexer {
           } else {
             return State.TEXT;
           }
+        case ContentModel.TITLE:
+          if (selfClosed) {
+            return State.TITLE;
+          } else {
+            return State.TEXT;
+          }
       }
     }
     yield* this.match(
@@ -4821,6 +4868,16 @@ class Lexer {
       "expected </textarea>"
     );
   }
+  *tokenizeTitle(context) {
+    yield* this.match(
+      context,
+      [
+        [MATCH_TITLE_END, State.TAG, TokenType.TAG_OPEN],
+        [MATCH_TITLE_DATA, State.TITLE, TokenType.TEXT]
+      ],
+      "expected </title>"
+    );
+  }
 }
 
 const whitespace = /(\s+)/;
@@ -5090,9 +5147,6 @@ class AttributeAllowedValues extends Rule {
       description: "Attribute has invalid value.",
       url: "https://html-validate.org/rules/attribute-allowed-values.html"
     };
-    if (!context) {
-      return docs;
-    }
     const { allowed, attribute, element, value } = context;
     if (allowed.enum) {
       const allowedList = allowed.enum.map((value2) => {
@@ -5927,7 +5981,10 @@ class ElementName extends Rule {
 
 function isNativeTemplate(node) {
   const { tagName, meta } = node;
-  return Boolean(tagName === "template" && meta?.templateRoot && meta?.scriptSupporting);
+  if (!meta) {
+    return false;
+  }
+  return Boolean(tagName === "template" && meta.templateRoot && meta.scriptSupporting);
 }
 function getTransparentChildren(node, transparent) {
   if (typeof transparent === "boolean") {
@@ -6156,7 +6213,7 @@ class ElementPermittedParent extends Rule {
         }
         const rules = node.meta?.permittedParent;
         if (!rules) {
-          return false;
+          return;
         }
         if (Validator.validatePermitted(parent, rules)) {
           return;
@@ -6223,14 +6280,10 @@ class ElementRequiredAncestor extends Rule {
 
 class ElementRequiredAttributes extends Rule {
   documentation(context) {
-    const docs = {
-      description: "Element is missing a required attribute",
+    return {
+      description: `The \`<${context.element}>\` element is required to have a \`${context.attribute}\` attribute.`,
       url: "https://html-validate.org/rules/element-required-attributes.html"
     };
-    if (context) {
-      docs.description = `The <${context.element}> element is required to have a "${context.attribute}" attribute.`;
-    }
-    return docs;
   }
   setup() {
     this.on("tag:end", (event) => {
@@ -7737,6 +7790,9 @@ class NoImplicitButtonType extends Rule {
   setup() {
     this.on("element:ready", isRelevant$2, (event) => {
       const { target } = event;
+      if (target.parent?.is("select")) {
+        return;
+      }
       const attr = target.getAttribute("type");
       if (!attr) {
         this.report({
@@ -8233,10 +8289,9 @@ class NoSelfClosing extends Rule {
       }
     };
   }
-  documentation(tagName) {
-    tagName = tagName || "element";
+  documentation(context) {
     return {
-      description: `Self-closing elements are disallowed. Use regular end tag <${tagName}></${tagName}> instead of self-closing <${tagName}/>.`,
+      description: `Self-closing elements are disallowed. Use regular end tag <${context}></${context}> instead of self-closing <${context}/>.`,
       url: "https://html-validate.org/rules/no-self-closing.html"
     };
   }
@@ -8814,7 +8869,7 @@ class ScriptElement extends Rule {
   setup() {
     this.on("tag:end", (event) => {
       const node = event.target;
-      if (!node || node.tagName !== "script") {
+      if (node?.tagName !== "script") {
         return;
       }
       if (node.closed !== NodeClosed.EndTag) {
@@ -9077,6 +9132,9 @@ function haveAccessibleText(node) {
   if (node.is("img") && hasNonEmptyAttribute(node, "alt")) {
     return true;
   }
+  if (node.is("selectedcontent")) {
+    return true;
+  }
   if (hasDefaultText(node)) {
     return true;
   }
@@ -10027,13 +10085,13 @@ class ValidID extends Rule {
 }
 
 class VoidContent extends Rule {
-  documentation(tagName) {
+  documentation(context) {
     const doc = {
       description: "HTML void elements cannot have any content and must not have content or end tag.",
       url: "https://html-validate.org/rules/void-content.html"
     };
-    if (tagName) {
-      doc.description = `<${tagName}> is a void element and must not have content or end tag.`;
+    if (context) {
+      doc.description = `<${context}> is a void element and must not have content or end tag.`;
     }
     return doc;
   }
@@ -10336,7 +10394,7 @@ class H37 extends Rule {
 const defaults$1 = {
   strict: false
 };
-const { enum: validScopes } = html5.th.attributes?.scope;
+const { enum: validScopes } = html5.th.attributes.scope;
 const joinedScopes = naturalJoin(validScopes);
 const td = 0;
 const th = 1;
@@ -10434,7 +10492,7 @@ class H67 extends Rule {
   setup() {
     this.on("tag:end", (event) => {
       const node = event.target;
-      if (!node || node.tagName !== "img") {
+      if (node?.tagName !== "img") {
         return;
       }
       const title = node.getAttribute("title");
@@ -11878,7 +11936,7 @@ class EventHandler {
 }
 
 const name = "html-validate";
-const version = "10.1.2";
+const version = "10.3.0";
 const bugs = "https://gitlab.com/html-validate/html-validate/issues/new";
 
 function freeze(src) {
@@ -12611,9 +12669,9 @@ class Parser {
    * Trigger close events for any still open elements.
    */
   closeTree(source, location) {
-    let active;
     const documentElement = this.dom.root;
-    while ((active = this.dom.getActive()) && !active.isRootElement()) {
+    let active = this.dom.getActive();
+    while (!active.isRootElement()) {
       if (active.meta?.implicitClosed) {
         active.closed = NodeClosed.ImplicitClosed;
         this.closeElement(source, documentElement, active, location);
@@ -12621,6 +12679,7 @@ class Parser {
         this.closeElement(source, null, active, location);
       }
       this.dom.popActive();
+      active = this.dom.getActive();
     }
   }
 }
@@ -12987,8 +13046,8 @@ function getUnnamedTransformerFromPlugin(name, plugin) {
     throw new ConfigError(`Plugin does not expose any transformers`);
   }
   if (typeof plugin.transformer !== "function") {
-    if (plugin.transformer.default) {
-      return plugin.transformer.default;
+    if (plugin.transformer["default"]) {
+      return plugin.transformer["default"];
     }
     throw new ConfigError(
       `Transformer "${name}" refers to unnamed transformer but plugin exposes only named.`
@@ -13217,7 +13276,7 @@ function checkstyleFormatter(results) {
   output += "</checkstyle>\n";
   return output;
 }
-const formatter$3 = checkstyleFormatter;
+const formatter$2 = checkstyleFormatter;
 
 const defaults = {
   showLink: true,
@@ -13392,7 +13451,7 @@ function codeframe(results, options) {
 function jsonFormatter(results) {
   return JSON.stringify(results);
 }
-const formatter$2 = jsonFormatter;
+const formatter$1 = jsonFormatter;
 
 function linkSummary(results) {
   const urls = results.reduce((result, it) => {
@@ -13421,7 +13480,6 @@ function stylish(results) {
   const links = linkSummary(results);
   return `${errors}${links}`;
 }
-const formatter$1 = stylish;
 
 function textFormatter(results) {
   let output = "";
@@ -13451,10 +13509,10 @@ function textFormatter(results) {
 const formatter = textFormatter;
 
 const availableFormatters = {
-  checkstyle: formatter$3,
+  checkstyle: formatter$2,
   codeframe,
-  json: formatter$2,
-  stylish: formatter$1,
+  json: formatter$1,
+  stylish,
   text: formatter
 };
 function getFormatter(name) {