html-validate 8.15.0 → 8.17.0

package/dist/es/core.js

@@ -801,6 +801,10 @@ const definitions = {
 		type: "object",
 		additionalProperties: false,
 		properties: {
+			disablable: {
+				type: "boolean",
+				title: "Disablable elements can be disabled using the disabled attribute."
+			},
 			listed: {
 				type: "boolean",
 				title: "Listed elements have a name attribute and is listed in the form and fieldset elements property."
@@ -1126,6 +1130,7 @@ function migrateElement(src) {
   }
   if (src.formAssociated) {
     result.formAssociated = {
+      disablable: Boolean(src.formAssociated.disablable),
       listed: Boolean(src.formAssociated.listed)
     };
   } else {
@@ -1385,10 +1390,14 @@ function expandRegexValue(value) {
   if (value instanceof RegExp) {
     return value;
   }
-  const match = value.match(/^\/\^?([^/$]*)\$?\/([i]*)$/);
+  const match = value.match(/^\/(.*(?=\/))\/(i?)$/);
   if (match) {
     const [, expr, flags] = match;
-    return new RegExp(`^${expr}$`, flags);
+    if (expr.startsWith("^") || expr.endsWith("$")) {
+      return new RegExp(expr, flags);
+    } else {
+      return new RegExp(`^${expr}$`, flags);
+    }
   } else {
     return value;
   }
@@ -2290,6 +2299,7 @@ class TextNode extends DOMNode {
 }
 
 const ROLE = Symbol("role");
+const TABINDEX = Symbol("tabindex");
 var NodeClosed = /* @__PURE__ */ ((NodeClosed2) => {
   NodeClosed2[NodeClosed2["Open"] = 0] = "Open";
   NodeClosed2[NodeClosed2["EndTag"] = 1] = "EndTag";
@@ -2570,6 +2580,43 @@ class HtmlElement extends DOMNode {
     }
     this.attr[key].push(new Attribute(key, value, keyLocation, valueLocation, originalAttribute));
   }
+  /**
+   * Get parsed tabindex for this element.
+   *
+   * - If `tabindex` attribute is not present `null` is returned.
+   * - If attribute value is omitted or the empty string `null` is returned.
+   * - If attribute value cannot be parsed `null` is returned.
+   * - If attribute value is dynamic `0` is returned.
+   * - Otherwise the parsed value is returned.
+   *
+   * This property does *NOT* take into account if the element have a default
+   * `tabindex` (such as `<input>` have). Instead use the `focusable` metadata
+   * property to determine this.
+   *
+   * @public
+   * @since 8.16.0
+   */
+  get tabIndex() {
+    const cached = this.cacheGet(TABINDEX);
+    if (cached !== void 0) {
+      return cached;
+    }
+    const tabindex = this.getAttribute("tabindex");
+    if (!tabindex) {
+      return this.cacheSet(TABINDEX, null);
+    }
+    if (tabindex.value === null) {
+      return this.cacheSet(TABINDEX, null);
+    }
+    if (tabindex.value instanceof DynamicValue) {
+      return this.cacheSet(TABINDEX, 0);
+    }
+    const parsed = parseInt(tabindex.value, 10);
+    if (isNaN(parsed)) {
+      return this.cacheSet(TABINDEX, null);
+    }
+    return this.cacheSet(TABINDEX, parsed);
+  }
   /**
    * Get a list of all attributes on this node.
    */
@@ -3366,6 +3413,7 @@ function isKeywordIgnored(options, keyword, matcher = (list, it) => list.include
 
 const ARIA_HIDDEN_CACHE = Symbol(isAriaHidden.name);
 const HTML_HIDDEN_CACHE = Symbol(isHTMLHidden.name);
+const INERT_CACHE = Symbol(isInert.name);
 const ROLE_PRESENTATION_CACHE = Symbol(isPresentation.name);
 const STYLE_HIDDEN_CACHE = Symbol(isStyleHidden.name);
 function inAccessibilityTree(node) {
@@ -3378,6 +3426,9 @@ function inAccessibilityTree(node) {
   if (isHTMLHidden(node)) {
     return false;
   }
+  if (isInert(node)) {
+    return false;
+  }
   if (isStyleHidden(node)) {
     return false;
   }
@@ -3419,6 +3470,24 @@ function isHTMLHidden(node, details) {
   const result = node.cacheSet(HTML_HIDDEN_CACHE, isHTMLHiddenImpl(node));
   return details ? result : result.byParent || result.bySelf;
 }
+function isInertImpl(node) {
+  const isInert2 = (node2) => {
+    const inert = node2.getAttribute("inert");
+    return inert !== null && inert.isStatic;
+  };
+  return {
+    byParent: node.parent ? isInert2(node.parent) : false,
+    bySelf: isInert2(node)
+  };
+}
+function isInert(node, details) {
+  const cached = node.cacheGet(INERT_CACHE);
+  if (cached) {
+    return details ? cached : cached.byParent || cached.bySelf;
+  }
+  const result = node.cacheSet(INERT_CACHE, isInertImpl(node));
+  return details ? result : result.byParent || result.bySelf;
+}
 function isStyleHiddenImpl(node) {
   const isHidden = (node2) => {
     const style = node2.getAttribute("style");
@@ -3844,7 +3913,7 @@ class Rule {
   }
 }
 
-const defaults$w = {
+const defaults$x = {
   allowExternal: true,
   allowRelative: true,
   allowAbsolute: true,
@@ -3885,7 +3954,7 @@ function matchList(value, list) {
 }
 class AllowedLinks extends Rule {
   constructor(options) {
-    super({ ...defaults$w, ...options });
+    super({ ...defaults$x, ...options });
     this.allowExternal = parseAllow(this.options.allowExternal);
     this.allowRelative = parseAllow(this.options.allowRelative);
     this.allowAbsolute = parseAllow(this.options.allowAbsolute);
@@ -4049,7 +4118,7 @@ class AllowedLinks extends Rule {
   }
 }
 
-const defaults$v = {
+const defaults$w = {
   accessible: true
 };
 function findByTarget(target, siblings) {
@@ -4079,7 +4148,7 @@ function getDescription$1(context) {
 }
 class AreaAlt extends Rule {
   constructor(options) {
-    super({ ...defaults$v, ...options });
+    super({ ...defaults$w, ...options });
   }
   static schema() {
     return {
@@ -4158,7 +4227,7 @@ class AriaHiddenBody extends Rule {
   }
 }
 
-const defaults$u = {
+const defaults$v = {
   allowAnyNamable: false
 };
 const whitelisted = [
@@ -4200,7 +4269,7 @@ function isValidUsage(target, meta) {
 }
 class AriaLabelMisuse extends Rule {
   constructor(options) {
-    super({ ...defaults$u, ...options });
+    super({ ...defaults$v, ...options });
   }
   documentation() {
     const valid = [
@@ -4310,13 +4379,13 @@ class CaseStyle {
   }
 }
 
-const defaults$t = {
+const defaults$u = {
   style: "lowercase",
   ignoreForeign: true
 };
 class AttrCase extends Rule {
   constructor(options) {
-    super({ ...defaults$t, ...options });
+    super({ ...defaults$u, ...options });
     this.style = new CaseStyle(this.options.style, "attr-case");
   }
   static schema() {
@@ -4672,7 +4741,7 @@ class AttrDelimiter extends Rule {
 }
 
 const DEFAULT_PATTERN = "[a-z0-9-:]+";
-const defaults$s = {
+const defaults$t = {
   pattern: DEFAULT_PATTERN,
   ignoreForeign: true
 };
@@ -4704,7 +4773,7 @@ function generateDescription(name, pattern) {
 }
 class AttrPattern extends Rule {
   constructor(options) {
-    super({ ...defaults$s, ...options });
+    super({ ...defaults$t, ...options });
     this.pattern = generateRegexp(this.options.pattern);
   }
   static schema() {
@@ -4751,7 +4820,7 @@ class AttrPattern extends Rule {
   }
 }
 
-const defaults$r = {
+const defaults$s = {
   style: "auto",
   unquoted: false
 };
@@ -4790,7 +4859,7 @@ function describeStyle(style, unquoted) {
 }
 class AttrQuotes extends Rule {
   constructor(options) {
-    super({ ...defaults$r, ...options });
+    super({ ...defaults$s, ...options });
     this.style = parseStyle$3(this.options.style);
   }
   static schema() {
@@ -4974,12 +5043,12 @@ class AttributeAllowedValues extends Rule {
   }
 }
 
-const defaults$q = {
+const defaults$r = {
   style: "omit"
 };
 class AttributeBooleanStyle extends Rule {
   constructor(options) {
-    super({ ...defaults$q, ...options });
+    super({ ...defaults$r, ...options });
     this.hasInvalidStyle = parseStyle$2(this.options.style);
   }
   static schema() {
@@ -5046,12 +5115,12 @@ function reportMessage$1(attr, style) {
   return "";
 }
 
-const defaults$p = {
+const defaults$q = {
   style: "omit"
 };
 class AttributeEmptyStyle extends Rule {
   constructor(options) {
-    super({ ...defaults$p, ...options });
+    super({ ...defaults$q, ...options });
     this.hasInvalidStyle = parseStyle$1(this.options.style);
   }
   static schema() {
@@ -5169,64 +5238,95 @@ class AttributeMisuse extends Rule {
 function parsePattern(pattern) {
   switch (pattern) {
     case "kebabcase":
-      return /^[a-z0-9-]+$/;
+      return { regexp: /^[a-z0-9-]+$/, description: pattern };
     case "camelcase":
-      return /^[a-z][a-zA-Z0-9]+$/;
+      return { regexp: /^[a-z][a-zA-Z0-9]+$/, description: pattern };
     case "underscore":
-      return /^[a-z0-9_]+$/;
-    default:
-      return new RegExp(pattern);
+      return { regexp: /^[a-z0-9_]+$/, description: pattern };
+    default: {
+      const regexp = new RegExp(pattern);
+      return { regexp, description: regexp.toString() };
+    }
   }
 }
-function describePattern(pattern) {
-  const regexp = parsePattern(pattern).toString();
-  switch (pattern) {
-    case "kebabcase":
-    case "camelcase":
-    case "underscore": {
-      return `${regexp} (${pattern})`;
+
+function toArray$1(value) {
+  return Array.isArray(value) ? value : [value];
+}
+class BasePatternRule extends Rule {
+  /**
+   * @param attr - Attribute holding the value.
+   * @param options - Rule options with defaults expanded.
+   */
+  constructor(attr, options) {
+    super(options);
+    const { pattern } = this.options;
+    this.attr = attr;
+    this.patterns = toArray$1(pattern).map((it) => parsePattern(it));
+  }
+  static schema() {
+    return {
+      pattern: {
+        oneOf: [{ type: "array", items: { type: "string" }, minItems: 1 }, { type: "string" }]
+      }
+    };
+  }
+  description(context) {
+    const { attr, patterns } = this;
+    const { value } = context;
+    const lead = patterns.length === 1 ? `The \`${attr}\` attribute value \`"${value}"\` does not match the configured pattern.` : `The \`${attr}\` attribute value \`"${value}"\` does not match either of the configured patterns.`;
+    return [
+      lead,
+      "For consistency within the codebase the `${attr}` is required to match one or more of the following patterns:",
+      "",
+      ...patterns.map((it) => `- \`${it.description}\``)
+    ].join("\n");
+  }
+  validateValue(node, value, location) {
+    const { attr, patterns } = this;
+    const matches = patterns.some((it) => it.regexp.test(value));
+    if (matches) {
+      return;
     }
-    default:
-      return regexp;
+    const allowed = naturalJoin(patterns.map((it) => `"${it.description}"`));
+    const message = patterns.length === 1 ? `${attr} "${value}" does not match the configured pattern ${allowed}` : `${attr} "${value}" does not match either of the configured patterns: ${allowed}`;
+    this.report({
+      node,
+      message,
+      location,
+      context: {
+        value
+      }
+    });
   }
 }
 
-const defaults$o = {
+const defaults$p = {
   pattern: "kebabcase"
 };
-class ClassPattern extends Rule {
+class ClassPattern extends BasePatternRule {
   constructor(options) {
-    super({ ...defaults$o, ...options });
-    this.pattern = parsePattern(this.options.pattern);
+    super("class", { ...defaults$p, ...options });
   }
   static schema() {
-    return {
-      pattern: {
-        type: "string"
-      }
-    };
+    return BasePatternRule.schema();
   }
-  documentation() {
-    const pattern = describePattern(this.options.pattern);
+  documentation(context) {
     return {
-      description: `For consistency all classes are required to match the pattern ${pattern}.`,
+      description: this.description(context),
       url: "https://html-validate.org/rules/class-pattern.html"
     };
   }
   setup() {
     this.on("attr", (event) => {
-      if (event.key.toLowerCase() !== "class") {
+      const { target, key, value, valueLocation } = event;
+      if (key.toLowerCase() !== "class") {
         return;
       }
-      const classes = new DOMTokenList(event.value, event.valueLocation);
-      classes.forEach((cur, index) => {
-        if (!cur.match(this.pattern)) {
-          const location = classes.location(index);
-          const pattern = this.pattern.toString();
-          const message = `Class "${cur}" does not match required pattern "${pattern}"`;
-          this.report(event.target, message, location);
-        }
-      });
+      const classes = new DOMTokenList(value, valueLocation);
+      for (const { item, location } of classes.iterator()) {
+        this.validateValue(target, item, location);
+      }
     });
   }
 }
@@ -5302,13 +5402,13 @@ class CloseOrder extends Rule {
   }
 }
 
-const defaults$n = {
+const defaults$o = {
   include: null,
   exclude: null
 };
 class Deprecated extends Rule {
   constructor(options) {
-    super({ ...defaults$n, ...options });
+    super({ ...defaults$o, ...options });
   }
   static schema() {
     return {
@@ -5462,12 +5562,12 @@ let NoStyleTag$1 = class NoStyleTag extends Rule {
   }
 };
 
-const defaults$m = {
+const defaults$n = {
   style: "uppercase"
 };
 class DoctypeStyle extends Rule {
   constructor(options) {
-    super({ ...defaults$m, ...options });
+    super({ ...defaults$n, ...options });
   }
   static schema() {
     return {
@@ -5495,12 +5595,12 @@ class DoctypeStyle extends Rule {
   }
 }
 
-const defaults$l = {
+const defaults$m = {
   style: "lowercase"
 };
 class ElementCase extends Rule {
   constructor(options) {
-    super({ ...defaults$l, ...options });
+    super({ ...defaults$m, ...options });
     this.style = new CaseStyle(this.options.style, "element-case");
   }
   static schema() {
@@ -5560,14 +5660,14 @@ class ElementCase extends Rule {
   }
 }
 
-const defaults$k = {
+const defaults$l = {
   pattern: "^[a-z][a-z0-9\\-._]*-[a-z0-9\\-._]*$",
   whitelist: [],
   blacklist: []
 };
 class ElementName extends Rule {
   constructor(options) {
-    super({ ...defaults$k, ...options });
+    super({ ...defaults$l, ...options });
     this.pattern = new RegExp(this.options.pattern);
   }
   static schema() {
@@ -5604,7 +5704,7 @@ class ElementName extends Rule {
         ...context.blacklist.map((cur) => `- ${cur}`)
       ];
     }
-    if (context.pattern !== defaults$k.pattern) {
+    if (context.pattern !== defaults$l.pattern) {
       return [
         `<${context.tagName}> is not a valid element name. This project is configured to only allow names matching the following regular expression:`,
         "",
@@ -6093,7 +6193,7 @@ class EmptyTitle extends Rule {
   }
 }
 
-const defaults$j = {
+const defaults$k = {
   allowArrayBrackets: true,
   shared: ["radio", "button", "reset", "submit"]
 };
@@ -6121,7 +6221,7 @@ function getDocumentation(context) {
 }
 class FormDupName extends Rule {
   constructor(options) {
-    super({ ...defaults$j, ...options });
+    super({ ...defaults$k, ...options });
   }
   static schema() {
     return {
@@ -6270,7 +6370,7 @@ class FormDupName extends Rule {
   }
 }
 
-const defaults$i = {
+const defaults$j = {
   allowMultipleH1: false,
   minInitialRank: "h1",
   sectioningRoots: ["dialog", '[role="dialog"]', '[role="alertdialog"]']
@@ -6299,7 +6399,7 @@ function parseMaxInitial(value) {
 }
 class HeadingLevel extends Rule {
   constructor(options) {
-    super({ ...defaults$i, ...options });
+    super({ ...defaults$j, ...options });
     this.stack = [];
     this.minInitialRank = parseMaxInitial(this.options.minInitialRank);
     this.sectionRoots = this.options.sectioningRoots.map((it) => new Pattern(it));
@@ -6450,6 +6550,46 @@ class HeadingLevel extends Rule {
   }
 }
 
+const FOCUSABLE_CACHE = Symbol(isFocusable.name);
+function isDisabled(element, meta) {
+  var _a;
+  if (!((_a = meta.formAssociated) == null ? void 0 : _a.disablable)) {
+    return false;
+  }
+  const disabled = element.matches("[disabled]");
+  if (disabled) {
+    return true;
+  }
+  const fieldset = element.closest("fieldset[disabled]");
+  if (fieldset) {
+    return true;
+  }
+  return false;
+}
+function isFocusableImpl(element) {
+  if (isHTMLHidden(element) || isInert(element) || isStyleHidden(element)) {
+    return false;
+  }
+  const { tabIndex, meta } = element;
+  if (tabIndex !== null) {
+    return tabIndex >= 0;
+  }
+  if (!meta) {
+    return false;
+  }
+  if (isDisabled(element, meta)) {
+    return false;
+  }
+  return Boolean(meta == null ? void 0 : meta.focusable);
+}
+function isFocusable(element) {
+  const cached = element.cacheGet(FOCUSABLE_CACHE);
+  if (cached) {
+    return cached;
+  }
+  return element.cacheSet(FOCUSABLE_CACHE, isFocusableImpl(element));
+}
+
 class HiddenFocusable extends Rule {
   documentation(context) {
     const byParent = context === "parent" ? " In this case it is being hidden by an ancestor with `aria-hidden.`" : "";
@@ -6463,7 +6603,8 @@ class HiddenFocusable extends Rule {
         "To fix this either:",
         "  - Remove `aria-hidden`.",
         "  - Remove the element from the DOM instead.",
-        "  - Use the `hidden` attribute or similar means to hide the element."
+        '  - Use `tabindex="-1"` to remove the element from tab order.',
+        "  - Use `hidden`, `inert` or similar means to hide or disable the element."
       ].join("\n"),
       url: "https://html-validate.org/rules/hidden-focusable.html"
     };
@@ -6474,21 +6615,13 @@ class HiddenFocusable extends Rule {
     this.on("dom:ready", (event) => {
       const { document } = event;
       for (const element of document.querySelectorAll(selector)) {
-        if (isHTMLHidden(element) || isStyleHidden(element)) {
-          continue;
-        }
-        if (isAriaHidden(element)) {
-          this.validateElement(element);
+        if (isFocusable(element) && isAriaHidden(element)) {
+          this.reportElement(element);
         }
       }
     });
   }
-  validateElement(element) {
-    const { meta } = element;
-    const tabindex = element.getAttribute("tabindex");
-    if (meta && !meta.focusable && !tabindex) {
-      return;
-    }
+  reportElement(element) {
     const attribute = element.getAttribute("aria-hidden");
     const message = attribute ? `aria-hidden cannot be used on focusable elements` : `aria-hidden cannot be used on focusable elements (hidden by ancestor element)`;
     const location = attribute ? attribute.keyLocation : element.location;
@@ -6502,43 +6635,35 @@ class HiddenFocusable extends Rule {
   }
 }
 
-const defaults$h = {
+const defaults$i = {
   pattern: "kebabcase"
 };
-class IdPattern extends Rule {
+class IdPattern extends BasePatternRule {
   constructor(options) {
-    super({ ...defaults$h, ...options });
-    this.pattern = parsePattern(this.options.pattern);
+    super("id", { ...defaults$i, ...options });
   }
   static schema() {
-    return {
-      pattern: {
-        type: "string"
-      }
-    };
+    return BasePatternRule.schema();
   }
-  documentation() {
-    const pattern = describePattern(this.options.pattern);
+  documentation(context) {
     return {
-      description: `For consistency all IDs are required to match the pattern ${pattern}.`,
+      description: this.description(context),
       url: "https://html-validate.org/rules/id-pattern.html"
     };
   }
   setup() {
     this.on("attr", (event) => {
-      var _a;
-      if (event.key.toLowerCase() !== "id") {
+      const { target, key, value, valueLocation } = event;
+      if (key.toLowerCase() !== "id") {
         return;
       }
-      if (event.value instanceof DynamicValue) {
+      if (value instanceof DynamicValue) {
         return;
       }
-      if (!((_a = event.value) == null ? void 0 : _a.match(this.pattern))) {
-        const value = event.value ?? "";
-        const pattern = this.pattern.toString();
-        const message = `ID "${value}" does not match required pattern "${pattern}"`;
-        this.report(event.target, message, event.valueLocation);
+      if (value === null) {
+        return;
       }
+      this.validateValue(target, value, valueLocation);
     });
   }
 }
@@ -6777,7 +6902,7 @@ class InputMissingLabel extends Rule {
     });
   }
   validateInput(root, elem) {
-    if (isHTMLHidden(elem) || isAriaHidden(elem)) {
+    if (!inAccessibilityTree(elem)) {
       return;
     }
     if (isIgnored(elem)) {
@@ -6810,7 +6935,7 @@ class InputMissingLabel extends Rule {
    * Reports error if none of the labels are accessible.
    */
   validateLabel(root, elem, labels) {
-    const visible = labels.filter(isVisible);
+    const visible = labels.filter(inAccessibilityTree);
     if (visible.length === 0) {
       this.report(elem, `<${elem.tagName}> element has <label> but <label> element is hidden`);
       return;
@@ -6820,10 +6945,6 @@ class InputMissingLabel extends Rule {
     }
   }
 }
-function isVisible(elem) {
-  const hidden = isHTMLHidden(elem) || isAriaHidden(elem);
-  return !hidden;
-}
 function findLabelById(root, id) {
   if (!id)
     return [];
@@ -6840,12 +6961,12 @@ function findLabelByParent(el) {
   return [];
 }
 
-const defaults$g = {
+const defaults$h = {
   maxlength: 70
 };
 class LongTitle extends Rule {
   constructor(options) {
-    super({ ...defaults$g, ...options });
+    super({ ...defaults$h, ...options });
     this.maxlength = this.options.maxlength;
   }
   static schema() {
@@ -6874,12 +6995,12 @@ class LongTitle extends Rule {
   }
 }
 
-const defaults$f = {
+const defaults$g = {
   allowLongDelay: false
 };
 class MetaRefresh extends Rule {
   constructor(options) {
-    super({ ...defaults$f, ...options });
+    super({ ...defaults$g, ...options });
   }
   documentation() {
     return {
@@ -7067,6 +7188,45 @@ class MultipleLabeledControls extends Rule {
   }
 }
 
+const defaults$f = {
+  pattern: "camelcase"
+};
+class NamePattern extends BasePatternRule {
+  constructor(options) {
+    super("name", { ...defaults$f, ...options });
+  }
+  static schema() {
+    return BasePatternRule.schema();
+  }
+  documentation(context) {
+    return {
+      description: this.description(context),
+      url: "https://html-validate.org/rules/name-pattern.html"
+    };
+  }
+  setup() {
+    this.on("attr", (event) => {
+      var _a;
+      const { target, key, value, valueLocation } = event;
+      const { meta } = target;
+      if (!((_a = meta == null ? void 0 : meta.formAssociated) == null ? void 0 : _a.listed)) {
+        return;
+      }
+      if (key.toLowerCase() !== "name") {
+        return;
+      }
+      if (value instanceof DynamicValue) {
+        return;
+      }
+      if (value === null) {
+        return;
+      }
+      const name = value.endsWith("[]") ? value.slice(0, -2) : value;
+      this.validateValue(target, name, valueLocation);
+    });
+  }
+}
+
 const abstractRoles = [
   "command",
   "composite",
@@ -10048,6 +10208,7 @@ const bundledRules = {
   "meta-refresh": MetaRefresh,
   "missing-doctype": MissingDoctype,
   "multiple-labeled-controls": MultipleLabeledControls,
+  "name-pattern": NamePattern,
   "no-abstract-role": NoAbstractRole,
   "no-autoplay": NoAutoplay,
   "no-conditional-comment": NoConditionalComment,
@@ -12488,7 +12649,7 @@ class HtmlValidate {
 }
 
 const name = "html-validate";
-const version = "8.15.0";
+const version = "8.17.0";
 const bugs = "https://gitlab.com/html-validate/html-validate/issues/new";
 
 function definePlugin(plugin) {