html-validate 8.8.0 → 8.9.1

package/dist/es/core.js

@@ -591,6 +591,18 @@ const patternProperties = {
 				description: "Script-supporting elements are elements which can be inserted where othersise not permitted to assist in templating",
 				type: "boolean"
 			},
+			focusable: {
+				title: "Mark this element as focusable",
+				description: "This element may contain an associated label element.",
+				anyOf: [
+					{
+						type: "boolean"
+					},
+					{
+						"function": true
+					}
+				]
+			},
 			form: {
 				title: "Mark element as a submittable form element",
 				type: "boolean"
@@ -965,6 +977,7 @@ const MetaCopyableProperty = [
   "embedded",
   "interactive",
   "transparent",
+  "focusable",
   "form",
   "formAssociated",
   "labelable",
@@ -1037,6 +1050,7 @@ function migrateElement(src) {
     },
     attributes: migrateAttributes(src),
     textContent: src.textContent,
+    focusable: src.focusable ?? false,
     implicitRole: src.implicitRole ?? (() => null)
   };
   delete result.deprecatedAttributes;
@@ -1292,6 +1306,9 @@ function expandProperties(node, entry) {
       setMetaProperty(entry, key, evaluateProperty(node, property));
     }
   }
+  if (typeof entry.focusable === "function") {
+    setMetaProperty(entry, "focusable", entry.focusable(node._adapter));
+  }
 }
 function expandRegexValue(value) {
   if (value instanceof RegExp) {
@@ -1506,10 +1523,10 @@ class Context {
   constructor(source) {
     this.state = State.INITIAL;
     this.string = source.data;
-    this.filename = source.filename ?? "";
-    this.offset = source.offset ?? 0;
-    this.line = source.line ?? 1;
-    this.column = source.column ?? 1;
+    this.filename = source.filename;
+    this.offset = source.offset;
+    this.line = source.line;
+    this.column = source.column;
     this.contentModel = 1 /* TEXT */;
   }
   getTruncatedLine(n = 13) {
@@ -1542,6 +1559,16 @@ class Context {
   }
 }
 
+function normalizeSource(source) {
+  return {
+    filename: "",
+    offset: 0,
+    line: 1,
+    column: 1,
+    ...source
+  };
+}
+
 var NodeType = /* @__PURE__ */ ((NodeType2) => {
   NodeType2[NodeType2["ELEMENT_NODE"] = 1] = "ELEMENT_NODE";
   NodeType2[NodeType2["TEXT_NODE"] = 3] = "TEXT_NODE";
@@ -2122,6 +2149,7 @@ class TextNode extends DOMNode {
   }
 }
 
+const ROLE = Symbol("role");
 var NodeClosed = /* @__PURE__ */ ((NodeClosed2) => {
   NodeClosed2[NodeClosed2["Open"] = 0] = "Open";
   NodeClosed2[NodeClosed2["EndTag"] = 1] = "EndTag";
@@ -2357,6 +2385,27 @@ class HtmlElement extends DOMNode {
   get meta() {
     return this.metaElement;
   }
+  /**
+   * Get current role for this element (explicit with `role` attribute or mapped
+   * with implicit role).
+   *
+   * @since 8.9.1
+   */
+  get role() {
+    const cached = this.cacheGet(ROLE);
+    if (cached !== void 0) {
+      return cached;
+    }
+    const role = this.getAttribute("role");
+    if (role) {
+      return this.cacheSet(ROLE, role.value);
+    }
+    if (this.metaElement) {
+      const implicitRole = this.metaElement.implicitRole(this._adapter);
+      return this.cacheSet(ROLE, implicitRole);
+    }
+    return this.cacheSet(ROLE, null);
+  }
   /**
    * Set annotation for this element.
    */
@@ -3135,8 +3184,21 @@ function isKeywordIgnored(options, keyword, matcher = (list, it) => list.include
 const ARIA_HIDDEN_CACHE = Symbol(isAriaHidden.name);
 const HTML_HIDDEN_CACHE = Symbol(isHTMLHidden.name);
 const ROLE_PRESENTATION_CACHE = Symbol(isPresentation.name);
+const STYLE_HIDDEN_CACHE = Symbol(isStyleHidden.name);
 function inAccessibilityTree(node) {
-  return !isAriaHidden(node) && !isPresentation(node);
+  if (isAriaHidden(node)) {
+    return false;
+  }
+  if (isPresentation(node)) {
+    return false;
+  }
+  if (isHTMLHidden(node)) {
+    return false;
+  }
+  if (isStyleHidden(node)) {
+    return false;
+  }
+  return true;
 }
 function isAriaHiddenImpl(node) {
   const isHidden = (node2) => {
@@ -3174,22 +3236,41 @@ function isHTMLHidden(node, details) {
   const result = node.cacheSet(HTML_HIDDEN_CACHE, isHTMLHiddenImpl(node));
   return details ? result : result.byParent || result.bySelf;
 }
+function isStyleHiddenImpl(node) {
+  const isHidden = (node2) => {
+    const style = node2.getAttribute("style");
+    const { display, visibility } = parseCssDeclaration(style == null ? void 0 : style.value);
+    return display === "none" || visibility === "hidden";
+  };
+  const byParent = node.parent ? isStyleHidden(node.parent) : false;
+  const bySelf = isHidden(node);
+  return byParent || bySelf;
+}
+function isStyleHidden(node) {
+  const cached = node.cacheGet(STYLE_HIDDEN_CACHE);
+  if (cached) {
+    return cached;
+  }
+  return node.cacheSet(STYLE_HIDDEN_CACHE, isStyleHiddenImpl(node));
+}
 function isPresentation(node) {
   if (node.cacheExists(ROLE_PRESENTATION_CACHE)) {
     return Boolean(node.cacheGet(ROLE_PRESENTATION_CACHE));
   }
-  let cur = node;
-  do {
-    const role = cur.getAttribute("role");
-    if (role && role.value === "presentation") {
-      return cur.cacheSet(ROLE_PRESENTATION_CACHE, true);
-    }
-    if (!cur.parent) {
-      break;
-    }
-    cur = cur.parent;
-  } while (!cur.isRootElement());
-  return node.cacheSet(ROLE_PRESENTATION_CACHE, false);
+  const meta = node.meta;
+  if (meta && meta.interactive) {
+    return node.cacheSet(ROLE_PRESENTATION_CACHE, false);
+  }
+  const tabindex = node.getAttribute("tabindex");
+  if (tabindex) {
+    return node.cacheSet(ROLE_PRESENTATION_CACHE, false);
+  }
+  const role = node.getAttribute("role");
+  if (role && (role.value === "presentation" || role.value === "none")) {
+    return node.cacheSet(ROLE_PRESENTATION_CACHE, true);
+  } else {
+    return node.cacheSet(ROLE_PRESENTATION_CACHE, false);
+  }
 }
 
 const cachePrefix = classifyNodeText.name;
@@ -6177,6 +6258,58 @@ class HeadingLevel extends Rule {
   }
 }
 
+class HiddenFocusable extends Rule {
+  documentation(context) {
+    const byParent = context === "parent" ? " In this case it is being hidden by an ancestor with `aria-hidden.`" : "";
+    return {
+      description: [
+        `\`aria-hidden\` cannot be used on focusable elements.${byParent}`,
+        "",
+        "When focusable elements are hidden with `aria-hidden` they are still reachable using conventional means such as a mouse or keyboard but won't be exposed to assistive technology (AT).",
+        "This is often confusing for users of AT such as screenreaders.",
+        "",
+        "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."
+      ].join("\n"),
+      url: "https://html-validate.org/rules/hidden-focusable.html"
+    };
+  }
+  setup() {
+    const focusable = this.getTagsWithProperty("focusable");
+    const selector = ["[tabindex]", ...focusable].join(",");
+    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);
+        }
+      }
+    });
+  }
+  validateElement(element) {
+    const { meta } = element;
+    const tabindex = element.getAttribute("tabindex");
+    if (meta && !meta.focusable && !tabindex) {
+      return;
+    }
+    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;
+    const context = attribute ? "self" : "parent";
+    this.report({
+      node: element,
+      message,
+      location,
+      context
+    });
+  }
+}
+
 const defaults$g = {
   pattern: "kebabcase"
 };
@@ -6362,7 +6495,7 @@ function isHidden(node, context) {
   if (reference && reference.isSameNode(node)) {
     return false;
   } else {
-    return isHTMLHidden(node) || !inAccessibilityTree(node);
+    return !inAccessibilityTree(node);
   }
 }
 function hasImgAltText(node, context) {
@@ -7312,7 +7445,7 @@ class NoRawCharacters extends Rule {
   }
 }
 
-const selectors = ["input[aria-label]", "textarea[aria-label]", "select[aria-label]"];
+const selectors$1 = ["input[aria-label]", "textarea[aria-label]", "select[aria-label]"];
 class NoRedundantAriaLabel extends Rule {
   documentation() {
     return {
@@ -7323,7 +7456,7 @@ class NoRedundantAriaLabel extends Rule {
   setup() {
     this.on("dom:ready", (event) => {
       const { document } = event;
-      const elements = document.querySelectorAll(selectors.join(","));
+      const elements = document.querySelectorAll(selectors$1.join(","));
       for (const element of elements) {
         const ariaLabel = element.getAttribute("aria-label");
         const id = element.id;
@@ -7939,7 +8072,7 @@ class RequireSri extends Rule {
   }
   documentation() {
     return {
-      description: `Subresource Integrity (SRI) \`integrity\` attribute is required to prevent manipulation from Content Delivery Networks or other third-party hosting.`,
+      description: `Subresource Integrity (SRI) \`integrity\` attribute is required to prevent tampering or manipulation from Content Delivery Networks (CDN), rouge proxies,  malicious entities, etc.`,
       url: "https://html-validate.org/rules/require-sri.html"
     };
   }
@@ -8352,6 +8485,130 @@ class TextContent extends Rule {
   }
 }
 
+const roles = ["complementary", "contentinfo", "form", "banner", "main", "navigation", "region"];
+const selectors = [
+  "aside",
+  "footer",
+  "form",
+  "header",
+  "main",
+  "nav",
+  "section",
+  ...roles.map((it) => `[role="${it}"]`)
+  /* <search> does not (yet?) require a unique name */
+];
+function getTextFromReference(document, id) {
+  if (!id || id instanceof DynamicValue) {
+    return id;
+  }
+  const selector = `#${id}`;
+  const ref = document.querySelector(selector);
+  if (ref) {
+    return ref.textContent;
+  } else {
+    return selector;
+  }
+}
+function groupBy(values, callback) {
+  const result = {};
+  for (const value of values) {
+    const key = callback(value);
+    if (key in result) {
+      result[key].push(value);
+    } else {
+      result[key] = [value];
+    }
+  }
+  return result;
+}
+function getTextEntryFromElement(document, node) {
+  const ariaLabel = node.getAttribute("aria-label");
+  if (ariaLabel) {
+    return {
+      node,
+      text: ariaLabel.value,
+      location: ariaLabel.keyLocation
+    };
+  }
+  const ariaLabelledby = node.getAttribute("aria-labelledby");
+  if (ariaLabelledby) {
+    const text = getTextFromReference(document, ariaLabelledby.value);
+    return {
+      node,
+      text,
+      location: ariaLabelledby.keyLocation
+    };
+  }
+  return {
+    node,
+    text: null,
+    location: node.location
+  };
+}
+function isExcluded(entry) {
+  const { node, text } = entry;
+  if (text === null) {
+    return !(node.is("form") || node.is("section"));
+  }
+  return true;
+}
+class UniqueLandmark extends Rule {
+  documentation() {
+    return {
+      description: [
+        "When the same type of landmark is present more than once in the same document each must be uniquely identifiable with a non-empty and unique name.",
+        "For instance, if the document has two `<nav>` elements each of them need an accessible name to be distinguished from each other.",
+        "",
+        "The following elements / roles are considered landmarks:",
+        "",
+        '  - `aside` or `[role="complementary"]`',
+        '  - `footer` or `[role="contentinfo"]`',
+        '  - `form` or `[role="form"]`',
+        '  - `header` or `[role="banner"]`',
+        '  - `main` or `[role="main"]`',
+        '  - `nav` or `[role="navigation"]`',
+        '  - `section` or `[role="region"]`',
+        "",
+        "To fix this either:",
+        "",
+        "  - Add `aria-label`.",
+        "  - Add `aria-labelledby`.",
+        "  - Remove one of the landmarks."
+      ].join("\n"),
+      url: "https://html-validate.org/rules/unique-landmark.html"
+    };
+  }
+  setup() {
+    this.on("dom:ready", (event) => {
+      const { document } = event;
+      const elements = document.querySelectorAll(selectors.join(",")).filter((it) => typeof it.role === "string" && roles.includes(it.role));
+      const grouped = groupBy(elements, (it) => it.role);
+      for (const nodes of Object.values(grouped)) {
+        if (nodes.length <= 1) {
+          continue;
+        }
+        const entries = nodes.map((it) => getTextEntryFromElement(document, it));
+        const filteredEntries = entries.filter(isExcluded);
+        for (const entry of filteredEntries) {
+          if (entry.text instanceof DynamicValue) {
+            continue;
+          }
+          const dup = entries.filter((it) => it.text === entry.text).length > 1;
+          if (!entry.text || dup) {
+            const message = `Landmarks must have a non-empty and unique accessible name (aria-label or aria-labelledby)`;
+            const location = entry.location;
+            this.report({
+              node: entry.node,
+              message,
+              location
+            });
+          }
+        }
+      }
+    });
+  }
+}
+
 const defaults$4 = {
   ignoreCase: false,
   requireSemicolon: true
@@ -8741,7 +8998,7 @@ class H32 extends Rule {
 }
 function isSubmit(node) {
   const type = node.getAttribute("type");
-  return Boolean(type && type.valueMatches(/submit|image/));
+  return Boolean(!type || type.valueMatches(/submit|image/));
 }
 function isAssociated(id, node) {
   const form = node.getAttribute("form");
@@ -8833,29 +9090,35 @@ class H37 extends Rule {
     };
   }
   setup() {
-    this.on("tag:end", (event) => {
-      const node = event.previous;
-      if (!needsAlt(node)) {
-        return;
-      }
-      if (!inAccessibilityTree(node)) {
-        return;
+    this.on("dom:ready", (event) => {
+      const { document } = event;
+      const nodes = document.querySelectorAll("img, input");
+      for (const node of nodes) {
+        this.validateNode(node);
       }
-      if (Boolean(node.getAttributeValue("alt")) || Boolean(node.hasAttribute("alt") && this.options.allowEmpty)) {
+    });
+  }
+  validateNode(node) {
+    if (!needsAlt(node)) {
+      return;
+    }
+    if (!inAccessibilityTree(node)) {
+      return;
+    }
+    if (Boolean(node.getAttributeValue("alt")) || Boolean(node.hasAttribute("alt") && this.options.allowEmpty)) {
+      return;
+    }
+    for (const attr of this.options.alias) {
+      if (node.getAttribute(attr)) {
         return;
       }
-      for (const attr of this.options.alias) {
-        if (node.getAttribute(attr)) {
-          return;
-        }
-      }
-      if (node.hasAttribute("alt")) {
-        const attr = node.getAttribute("alt");
-        this.report(node, `${getTag(node)} cannot have empty "alt" attribute`, attr == null ? void 0 : attr.keyLocation);
-      } else {
-        this.report(node, `${getTag(node)} is missing required "alt" attribute`, node.location);
-      }
-    });
+    }
+    if (node.hasAttribute("alt")) {
+      const attr = node.getAttribute("alt");
+      this.report(node, `${getTag(node)} cannot have empty "alt" attribute`, attr == null ? void 0 : attr.keyLocation);
+    } else {
+      this.report(node, `${getTag(node)} is missing required "alt" attribute`, node.location);
+    }
   }
 }
 
@@ -8946,7 +9209,7 @@ class H71 extends Rule {
   }
 }
 
-const bundledRules$2 = {
+const bundledRules$1 = {
   "wcag/h30": H30,
   "wcag/h32": H32,
   "wcag/h36": H36,
@@ -8955,7 +9218,7 @@ const bundledRules$2 = {
   "wcag/h67": H67,
   "wcag/h71": H71
 };
-var WCAG = bundledRules$2;
+var WCAG = bundledRules$1;
 
 const bundledRules = {
   "allowed-links": AllowedLinks,
@@ -8991,6 +9254,7 @@ const bundledRules = {
   "empty-title": EmptyTitle,
   "form-dup-name": FormDupName,
   "heading-level": HeadingLevel,
+  "hidden-focusable": HiddenFocusable,
   "id-pattern": IdPattern,
   "input-attributes": InputAttributes,
   "input-missing-label": InputMissingLabel,
@@ -9031,13 +9295,13 @@ const bundledRules = {
   "svg-focusable": SvgFocusable,
   "tel-non-breaking": TelNonBreaking,
   "text-content": TextContent,
+  "unique-landmark": UniqueLandmark,
   "unrecognized-char-ref": UnknownCharReference,
   "valid-id": ValidID,
   "void-content": VoidContent,
   "void-style": VoidStyle,
   ...WCAG
 };
-var bundledRules$1 = bundledRules;
 
 var defaultConfig = {};
 
@@ -9049,6 +9313,7 @@ const config$4 = {
     "deprecated-rule": "warn",
     "empty-heading": "error",
     "empty-title": "error",
+    "hidden-focusable": "error",
     "meta-refresh": "error",
     "multiple-labeled-controls": "error",
     "no-autoplay": ["error", { include: ["audio", "video"] }],
@@ -9060,6 +9325,7 @@ const config$4 = {
     "prefer-native-element": "error",
     "svg-focusable": "off",
     "text-content": "error",
+    "unique-landmark": "error",
     "wcag/h30": "error",
     "wcag/h32": "error",
     "wcag/h36": "error",
@@ -9122,6 +9388,7 @@ const config$1 = {
     "empty-heading": "error",
     "empty-title": "error",
     "form-dup-name": "error",
+    "hidden-focusable": "error",
     "input-attributes": "error",
     "long-title": "error",
     "map-dup-name": "error",
@@ -9154,6 +9421,7 @@ const config$1 = {
     "svg-focusable": "off",
     "tel-non-breaking": "error",
     "text-content": "error",
+    "unique-landmark": "error",
     "unrecognized-char-ref": "error",
     "valid-id": ["error", { relaxed: false }],
     void: "off",
@@ -9498,7 +9766,7 @@ class Config {
     if (configData.rules) {
       const normalizedRules = Config.getRulesObject(configData.rules);
       for (const [ruleId, [, ruleOptions]] of normalizedRules.entries()) {
-        const cls = bundledRules$1[ruleId];
+        const cls = bundledRules[ruleId];
         const path = `/rules/${ruleId}/1`;
         Rule.validateOptions(cls, ruleId, path, ruleOptions, filename, configData);
       }
@@ -9871,16 +10139,17 @@ class EventHandler {
    * @returns Unregistration function.
    */
   on(event, callback) {
-    const names = event.split(",").map((x) => x.trim());
+    const { listeners } = this;
+    const names = event.split(",").map((it) => it.trim());
     for (const name of names) {
-      this.listeners[name] = this.listeners[name] || [];
-      this.listeners[name].push(callback);
+      const list = listeners[name] ?? [];
+      listeners[name] = list;
+      list.push(callback);
     }
     return () => {
       for (const name of names) {
-        this.listeners[name] = this.listeners[name].filter((fn) => {
-          return fn !== callback;
-        });
+        const list = listeners[name];
+        this.listeners[name] = list.filter((fn) => fn !== callback);
       }
     };
   }
@@ -9906,10 +10175,15 @@ class EventHandler {
    * @param data - Event data.
    */
   trigger(event, data) {
-    const callbacks = [...this.listeners[event] ?? [], ...this.listeners["*"] ?? []];
-    callbacks.forEach((listener) => {
+    for (const listener of this.getCallbacks(event)) {
       listener.call(null, event, data);
-    });
+    }
+  }
+  getCallbacks(event) {
+    const { listeners } = this;
+    const callbacks = listeners[event] ?? [];
+    const global = listeners["*"] ?? [];
+    return [...callbacks, ...global];
   }
 }
 
@@ -9979,10 +10253,10 @@ class Parser {
       location: null
     });
     this.dom = new DOMTree({
-      filename: source.filename ?? "",
-      offset: source.offset ?? 0,
-      line: source.line ?? 1,
-      column: source.column ?? 1,
+      filename: source.filename,
+      offset: source.offset,
+      line: source.line,
+      column: source.column,
       size: 0
     });
     this.trigger("dom:load", {
@@ -10506,7 +10780,7 @@ function isThenable(value) {
   return value && typeof value === "object" && "then" in value && typeof value.then === "function";
 }
 
-const ruleIds = new Set(Object.keys(bundledRules$1));
+const ruleIds = new Set(Object.keys(bundledRules));
 function ruleExists(ruleId) {
   return ruleIds.has(ruleId);
 }
@@ -10595,9 +10869,7 @@ class Reporter {
       valid: this.isValid(),
       results: Object.keys(this.result).map((filePath) => {
         const messages = Array.from(this.result[filePath], freeze).sort(messageSort);
-        const source = (sources ?? []).find(
-          (source2) => filePath === (source2.filename ?? "")
-        );
+        const source = (sources ?? []).find((source2) => filePath === source2.filename);
         return {
           filePath,
           messages,
@@ -10665,7 +10937,7 @@ class Engine {
     this.ParserClass = ParserClass;
     const result = this.initPlugins(this.config);
     this.availableRules = {
-      ...bundledRules$1,
+      ...bundledRules,
       ...result.availableRules
     };
   }
@@ -11094,10 +11366,11 @@ class HtmlValidate {
    * @returns Report output.
    */
   async validateSource(input, configOverride) {
-    const config = await this.getConfigFor(input.filename, configOverride);
-    const source = config.transformSource(input);
+    const source = normalizeSource(input);
+    const config = await this.getConfigFor(source.filename, configOverride);
+    const transformedSource = config.transformSource(source);
     const engine = new Engine(config, Parser);
-    return engine.lint(source);
+    return engine.lint(transformedSource);
   }
   /**
    * Parse and validate HTML from [[Source]].
@@ -11107,10 +11380,11 @@ class HtmlValidate {
    * @returns Report output.
    */
   validateSourceSync(input, configOverride) {
-    const config = this.getConfigForSync(input.filename, configOverride);
-    const source = config.transformSource(input);
+    const source = normalizeSource(input);
+    const config = this.getConfigForSync(source.filename, configOverride);
+    const transformedSource = config.transformSource(source);
     const engine = new Engine(config, Parser);
-    return engine.lint(source);
+    return engine.lint(transformedSource);
   }
   /**
    * Parse and validate HTML from file.
@@ -11419,7 +11693,7 @@ class HtmlValidate {
 }
 
 const name = "html-validate";
-const version = "8.8.0";
+const version = "8.9.1";
 const bugs = "https://gitlab.com/html-validate/html-validate/issues/new";
 
 function definePlugin(plugin) {