html-validate 7.5.0 → 7.6.0

package/dist/es/core.js

@@ -1736,9 +1736,19 @@ function factory(name, context) {
 function stripslashes(value) {
     return value.replace(/\\(.)/g, "$1");
 }
+/**
+ * @internal
+ */
 function escapeSelectorComponent(text) {
     return text.toString().replace(/([^a-z0-9_-])/gi, "\\$1");
 }
+/**
+ * @internal
+ */
+function generateIdSelector(id) {
+    const escaped = escapeSelectorComponent(id);
+    return escaped.match(/^\d/) ? `[id="${escaped}"]` : `#${escaped}`;
+}
 /**
  * Returns true if the character is a delimiter for different kinds of selectors:
  *
@@ -2115,6 +2125,25 @@ class HtmlElement extends DOMNode {
             return `<${this.tagName}>`;
         }
     }
+    /**
+     * Get list of IDs referenced by `aria-labelledby`.
+     *
+     * If the attribute is unset or empty this getter returns null.
+     * If the attribute is dynamic the original {@link DynamicValue} is returned.
+     *
+     * @public
+     */
+    get ariaLabelledby() {
+        const attr = this.getAttribute("aria-labelledby");
+        if (!attr || !attr.value) {
+            return null;
+        }
+        if (attr.value instanceof DynamicValue) {
+            return attr.value;
+        }
+        const list = new DOMTokenList(attr.value, attr.valueLocation);
+        return list.length ? Array.from(list) : null;
+    }
     /**
      * Similar to childNodes but only elements.
      */
@@ -2156,8 +2185,7 @@ class HtmlElement extends DOMNode {
         for (let cur = this; cur.parent; cur = cur.parent) {
             /* if a unique id is present, use it and short-circuit */
             if (cur.id) {
-                const escaped = escapeSelectorComponent(cur.id);
-                const selector = escaped.match(/^\d/) ? `[id="${escaped}"]` : `#${escaped}`;
+                const selector = generateIdSelector(cur.id);
                 const matches = root.querySelectorAll(selector);
                 if (matches.length === 1) {
                     parts.push(selector);
@@ -3163,7 +3191,7 @@ var TRANSFORMER_API;
 /** @public */
 const name = "html-validate";
 /** @public */
-const version = "7.5.0";
+const version = "7.6.0";
 /** @public */
 const homepage = "https://html-validate.org";
 /** @public */
@@ -5386,13 +5414,122 @@ class ElementPermittedOrder extends Rule {
     }
 }
 
-const CACHE_KEY = Symbol(classifyNodeText.name);
+const ARIA_HIDDEN_CACHE = Symbol(isAriaHidden.name);
+const HTML_HIDDEN_CACHE = Symbol(isHTMLHidden.name);
+const ROLE_PRESENTATION_CACHE = Symbol(isPresentation.name);
+/**
+ * Tests if this element is present in the accessibility tree.
+ *
+ * In practice it tests whenever the element or its parents has
+ * `role="presentation"` or `aria-hidden="false"`. Dynamic values counts as
+ * visible since the element might be in the visibility tree sometimes.
+ */
+function inAccessibilityTree(node) {
+    return !isAriaHidden(node) && !isPresentation(node);
+}
+function isAriaHiddenImpl(node) {
+    const isHidden = (node) => {
+        const ariaHidden = node.getAttribute("aria-hidden");
+        return Boolean(ariaHidden && ariaHidden.value === "true");
+    };
+    return {
+        byParent: node.parent ? isAriaHidden(node.parent) : false,
+        bySelf: isHidden(node),
+    };
+}
+function isAriaHidden(node, details) {
+    const cached = node.cacheGet(ARIA_HIDDEN_CACHE);
+    if (cached) {
+        return details ? cached : cached.byParent || cached.bySelf;
+    }
+    const result = node.cacheSet(ARIA_HIDDEN_CACHE, isAriaHiddenImpl(node));
+    return details ? result : result.byParent || result.bySelf;
+}
+function isHTMLHiddenImpl(node) {
+    const isHidden = (node) => {
+        const hidden = node.getAttribute("hidden");
+        return hidden !== null && hidden.isStatic;
+    };
+    return {
+        byParent: node.parent ? isHTMLHidden(node.parent) : false,
+        bySelf: isHidden(node),
+    };
+}
+function isHTMLHidden(node, details) {
+    const cached = node.cacheGet(HTML_HIDDEN_CACHE);
+    if (cached) {
+        return details ? cached : cached.byParent || cached.bySelf;
+    }
+    const result = node.cacheSet(HTML_HIDDEN_CACHE, isHTMLHiddenImpl(node));
+    return details ? result : result.byParent || result.bySelf;
+}
+/**
+ * Tests if this element or a parent element has role="presentation".
+ *
+ * Dynamic values yields `false` just as if the attribute wasn't present.
+ */
+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");
+        /* role="presentation" */
+        if (role && role.value === "presentation") {
+            return cur.cacheSet(ROLE_PRESENTATION_CACHE, true);
+        }
+        /* sanity check: break if no parent is present, normally not an issue as the
+         * root element should be found first */
+        if (!cur.parent) {
+            break;
+        }
+        /* check parents */
+        cur = cur.parent;
+    } while (!cur.isRootElement());
+    return node.cacheSet(ROLE_PRESENTATION_CACHE, false);
+}
+
+const cachePrefix = classifyNodeText.name;
+const HTML_CACHE_KEY = Symbol(`${cachePrefix}|html`);
+const A11Y_CACHE_KEY = Symbol(`${cachePrefix}|a11y`);
+const IGNORE_HIDDEN_ROOT_HTML_CACHE_KEY = Symbol(`${cachePrefix}|html|ignore-hidden-root`);
+const IGNORE_HIDDEN_ROOT_A11Y_CACHE_KEY = Symbol(`${cachePrefix}|a11y|ignore-hidden-root`);
+/**
+ * @public
+ */
 var TextClassification;
 (function (TextClassification) {
     TextClassification[TextClassification["EMPTY_TEXT"] = 0] = "EMPTY_TEXT";
     TextClassification[TextClassification["DYNAMIC_TEXT"] = 1] = "DYNAMIC_TEXT";
     TextClassification[TextClassification["STATIC_TEXT"] = 2] = "STATIC_TEXT";
 })(TextClassification || (TextClassification = {}));
+function getCachekey(options = {}) {
+    const { accessible = false, ignoreHiddenRoot = false } = options;
+    if (accessible && ignoreHiddenRoot) {
+        return IGNORE_HIDDEN_ROOT_A11Y_CACHE_KEY;
+    }
+    else if (ignoreHiddenRoot) {
+        return IGNORE_HIDDEN_ROOT_HTML_CACHE_KEY;
+    }
+    else if (accessible) {
+        return A11Y_CACHE_KEY;
+    }
+    else {
+        return HTML_CACHE_KEY;
+    }
+}
+/* While I cannot find a reference about this in the standard the <select>
+ * element kinda acts as if there is no text content, most particularly it
+ * doesn't receive and accessible name. The `.textContent` property does
+ * however include the <option> childrens text. But for the sake of the
+ * validator it is probably best if the classification acts as if there is no
+ * text as I think that is what is expected of the return values. Might have
+ * to revisit this at some point or if someone could clarify what section of
+ * the standard deals with this. */
+function isSpecialEmpty(node) {
+    return node.is("select") || node.is("textarea");
+}
 /**
  * Checks text content of an element.
  *
@@ -5400,33 +5537,54 @@ var TextClassification;
  * ignored.
  *
  * If any text is dynamic `TextClassification.DYNAMIC_TEXT` is returned.
+ *
+ * @public
  */
-function classifyNodeText(node) {
-    if (node.cacheExists(CACHE_KEY)) {
-        return node.cacheGet(CACHE_KEY);
+function classifyNodeText(node, options = {}) {
+    const { accessible = false, ignoreHiddenRoot = false } = options;
+    const cacheKey = getCachekey(options);
+    if (node.cacheExists(cacheKey)) {
+        return node.cacheGet(cacheKey);
+    }
+    if (!ignoreHiddenRoot && isHTMLHidden(node)) {
+        return node.cacheSet(cacheKey, TextClassification.EMPTY_TEXT);
+    }
+    if (!ignoreHiddenRoot && accessible && isAriaHidden(node)) {
+        return node.cacheSet(cacheKey, TextClassification.EMPTY_TEXT);
     }
-    const text = findTextNodes(node);
+    if (isSpecialEmpty(node)) {
+        return node.cacheSet(cacheKey, TextClassification.EMPTY_TEXT);
+    }
+    const text = findTextNodes(node, {
+        ...options,
+        ignoreHiddenRoot: false,
+    });
     /* if any text is dynamic classify as dynamic */
     if (text.some((cur) => cur.isDynamic)) {
-        return node.cacheSet(CACHE_KEY, TextClassification.DYNAMIC_TEXT);
+        return node.cacheSet(cacheKey, TextClassification.DYNAMIC_TEXT);
     }
     /* if any text has non-whitespace character classify as static */
     if (text.some((cur) => cur.textContent.match(/\S/) !== null)) {
-        return node.cacheSet(CACHE_KEY, TextClassification.STATIC_TEXT);
+        return node.cacheSet(cacheKey, TextClassification.STATIC_TEXT);
     }
     /* default to empty */
-    return node.cacheSet(CACHE_KEY, TextClassification.EMPTY_TEXT);
+    return node.cacheSet(cacheKey, TextClassification.EMPTY_TEXT);
 }
-function findTextNodes(node) {
+function findTextNodes(node, options) {
+    const { accessible = false } = options;
     let text = [];
     for (const child of node.childNodes) {
-        switch (child.nodeType) {
-            case NodeType.TEXT_NODE:
-                text.push(child);
-                break;
-            case NodeType.ELEMENT_NODE:
-                text = text.concat(findTextNodes(child));
-                break;
+        if (isTextNode(child)) {
+            text.push(child);
+        }
+        else if (isElementNode(child)) {
+            if (isHTMLHidden(child, true).bySelf) {
+                continue;
+            }
+            if (accessible && isAriaHidden(child, true).bySelf) {
+                continue;
+            }
+            text = text.concat(findTextNodes(child, options));
         }
     }
     return text;
@@ -5702,6 +5860,17 @@ class ElementRequiredContent extends Rule {
 }
 
 const selector = ["h1", "h2", "h3", "h4", "h5", "h6"].join(",");
+function hasImgAltText$1(node) {
+    if (node.is("img")) {
+        return hasAltText(node);
+    }
+    else if (node.is("svg")) {
+        return node.textContent.trim() !== "";
+    }
+    else {
+        return false;
+    }
+}
 class EmptyHeading extends Rule {
     documentation() {
         return {
@@ -5713,19 +5882,28 @@ class EmptyHeading extends Rule {
         this.on("dom:ready", ({ document }) => {
             const headings = document.querySelectorAll(selector);
             for (const heading of headings) {
-                switch (classifyNodeText(heading)) {
-                    case TextClassification.DYNAMIC_TEXT:
-                    case TextClassification.STATIC_TEXT:
-                        /* have some text content, consider ok */
-                        break;
-                    case TextClassification.EMPTY_TEXT:
-                        /* no content or whitespace only */
-                        this.report(heading, `<${heading.tagName}> cannot be empty, must have text content`);
-                        break;
-                }
+                this.validateHeading(heading);
             }
         });
     }
+    validateHeading(heading) {
+        const images = heading.querySelectorAll("img, svg");
+        for (const child of images) {
+            if (hasImgAltText$1(child)) {
+                return;
+            }
+        }
+        switch (classifyNodeText(heading)) {
+            case TextClassification.DYNAMIC_TEXT:
+            case TextClassification.STATIC_TEXT:
+                /* have some text content, consider ok */
+                break;
+            case TextClassification.EMPTY_TEXT:
+                /* no content or whitespace only */
+                this.report(heading, `<${heading.tagName}> cannot be empty, must have text content`);
+                break;
+        }
+    }
 }
 
 class EmptyTitle extends Rule {
@@ -6146,104 +6324,148 @@ class InputAttributes extends Rule {
     }
 }
 
-const ARIA_HIDDEN_CACHE = Symbol(isAriaHidden.name);
-const HTML_HIDDEN_CACHE = Symbol(isHTMLHidden.name);
-const ROLE_PRESENTATION_CACHE = Symbol(isPresentation.name);
-/**
- * Tests if this element is present in the accessibility tree.
- *
- * In practice it tests whenever the element or its parents has
- * `role="presentation"` or `aria-hidden="false"`. Dynamic values counts as
- * visible since the element might be in the visibility tree sometimes.
- */
-function inAccessibilityTree(node) {
-    return !isAriaHidden(node) && !isPresentation(node);
+const HAS_ACCESSIBLE_TEXT_CACHE = Symbol(hasAccessibleName.name);
+function isHidden(node, context) {
+    const { reference } = context;
+    if (reference && reference.isSameNode(node)) {
+        return false;
+    }
+    else {
+        return isHTMLHidden(node) || !inAccessibilityTree(node);
+    }
 }
-/**
- * Tests if this element or an ancestor have `aria-hidden="true"`.
- *
- * Dynamic values yields `false` since the element will conditionally be in the
- * accessibility tree and must fulfill it's conditions.
- */
-function isAriaHidden(node) {
-    if (node.cacheExists(ARIA_HIDDEN_CACHE)) {
-        return Boolean(node.cacheGet(ARIA_HIDDEN_CACHE));
+function hasImgAltText(node, context) {
+    if (node.is("img")) {
+        return hasAltText(node);
     }
-    let cur = node;
-    do {
-        const ariaHidden = cur.getAttribute("aria-hidden");
-        /* aria-hidden="true" */
-        if (ariaHidden && ariaHidden.value === "true") {
-            return cur.cacheSet(ARIA_HIDDEN_CACHE, true);
-        }
-        /* sanity check: break if no parent is present, normally not an issue as the
-         * root element should be found first */
-        if (!cur.parent) {
-            break;
+    else if (node.is("svg")) {
+        return node.textContent.trim() !== "";
+    }
+    else {
+        for (const img of node.querySelectorAll("img, svg")) {
+            const hasName = hasAccessibleNameImpl(img, context);
+            if (hasName) {
+                return true;
+            }
         }
-        /* check parents */
-        cur = cur.parent;
-    } while (!cur.isRootElement());
-    return node.cacheSet(ARIA_HIDDEN_CACHE, false);
+        return false;
+    }
+}
+function hasLabel(node) {
+    var _a;
+    const value = (_a = node.getAttributeValue("aria-label")) !== null && _a !== void 0 ? _a : "";
+    return Boolean(value.trim());
+}
+function isLabelledby(node, context) {
+    const { document, reference } = context;
+    /* if we already have resolved one level of reference we don't resolve another
+     * level (as per accname step 2B) */
+    if (reference) {
+        return false;
+    }
+    const ariaLabelledby = node.ariaLabelledby;
+    /* consider dynamic aria-labelledby as having a name as we cannot resolve it
+     * so no way to prove correctness */
+    if (ariaLabelledby instanceof DynamicValue) {
+        return true;
+    }
+    /* ignore elements without aria-labelledby */
+    if (ariaLabelledby === null) {
+        return false;
+    }
+    return ariaLabelledby.some((id) => {
+        const selector = generateIdSelector(id);
+        return document.querySelectorAll(selector).some((child) => {
+            return hasAccessibleNameImpl(child, {
+                document,
+                reference: child,
+            });
+        });
+    });
 }
 /**
- * Tests if this element or an ancestor have `hidden` attribute.
+ * This algorithm is based on ["Accessible Name and Description Computation
+ * 1.2"][accname] with some exceptions:
+ *
+ * It doesn't compute the actual name but only the presence of one, e.g. if a
+ * non-empty flat string is present the algorithm terminates with a positive
+ * result.
  *
- * Dynamic values yields `false` since the element will conditionally be in the
- * DOM tree and must fulfill it's conditions.
+ * It takes some optimization shortcuts such as starting with step F as it
+ * would be more common usage and as there is no actual name being computed
+ * the order wont matter.
+ *
+ * [accname]: https://w3c.github.io/accname
  */
-function isHTMLHidden(node) {
-    if (node.cacheExists(HTML_HIDDEN_CACHE)) {
-        return Boolean(node.cacheGet(HTML_HIDDEN_CACHE));
+function hasAccessibleNameImpl(current, context) {
+    const { reference } = context;
+    /* if this element is hidden (see function for exceptions) it does not have an accessible name */
+    if (isHidden(current, context)) {
+        return false;
     }
-    let cur = node;
-    do {
-        const hidden = cur.getAttribute("hidden");
-        /* hidden present */
-        if (hidden !== null && hidden.isStatic) {
-            return cur.cacheSet(HTML_HIDDEN_CACHE, true);
-        }
-        /* sanity check: break if no parent is present, normally not an issue as the
-         * root element should be found first */
-        if (!cur.parent) {
-            break;
-        }
-        /* check parents */
-        cur = cur.parent;
-    } while (!cur.isRootElement());
-    return node.cacheSet(HTML_HIDDEN_CACHE, false);
+    /* special case: when this element is directly referenced by aria-labelledby
+     * we ignore `hidden` */
+    const ignoreHiddenRoot = Boolean(reference && reference.isSameNode(current));
+    const text = classifyNodeText(current, { accessible: true, ignoreHiddenRoot });
+    if (text !== TextClassification.EMPTY_TEXT) {
+        return true;
+    }
+    if (hasImgAltText(current, context)) {
+        return true;
+    }
+    if (hasLabel(current)) {
+        return true;
+    }
+    if (isLabelledby(current, context)) {
+        return true;
+    }
+    return false;
 }
 /**
- * Tests if this element or a parent element has role="presentation".
+ * Returns `true` if the element has an accessible name.
  *
- * Dynamic values yields `false` just as if the attribute wasn't present.
+ * It does not yet consider if the elements role prohibits naming, e.g. a `<p>`
+ * element will still show up as having an accessible name.
+ *
+ * @public
+ * @param document - Document element.
+ * @param current - The element to get accessible name for
+ * @returns `true` if the element has an accessible name.
  */
-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");
-        /* role="presentation" */
-        if (role && role.value === "presentation") {
-            return cur.cacheSet(ROLE_PRESENTATION_CACHE, true);
-        }
-        /* sanity check: break if no parent is present, normally not an issue as the
-         * root element should be found first */
-        if (!cur.parent) {
-            break;
-        }
-        /* check parents */
-        cur = cur.parent;
-    } while (!cur.isRootElement());
-    return node.cacheSet(ROLE_PRESENTATION_CACHE, false);
+function hasAccessibleName(document, current) {
+    /* istanbul ignore next: we're not testing cache */
+    if (current.cacheExists(HAS_ACCESSIBLE_TEXT_CACHE)) {
+        return Boolean(current.cacheGet(HAS_ACCESSIBLE_TEXT_CACHE));
+    }
+    const result = hasAccessibleNameImpl(current, {
+        document,
+        reference: null,
+    });
+    return current.cacheSet(HAS_ACCESSIBLE_TEXT_CACHE, result);
 }
 
+function isIgnored(node) {
+    var _a;
+    if (node.is("input")) {
+        const type = (_a = node.getAttributeValue("type")) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        const ignored = ["hidden", "submit", "reset", "button"];
+        return Boolean(type && ignored.includes(type));
+    }
+    return false;
+}
 class InputMissingLabel extends Rule {
     documentation() {
         return {
-            description: "Labels are associated with the input element and is required for a11y.",
+            description: [
+                "Each form element must have an a label or accessible name.",
+                'Typically this is implemented using a `<label for="..">` element describing the purpose of the form element.',
+                "",
+                "This can be resolved in one of the following ways:",
+                "",
+                '  - Use an associated `<label for="..">` element.',
+                "  - Use a nested `<label>` as parent element.",
+                "  - Use `aria-label` or `aria-labelledby` attributes.",
+            ].join("\n"),
             url: ruleDocumentationUrl("@/rules/input-missing-label.ts"),
         };
     }
@@ -6256,38 +6478,48 @@ class InputMissingLabel extends Rule {
         });
     }
     validateInput(root, elem) {
-        var _a;
         if (isHTMLHidden(elem) || isAriaHidden(elem)) {
             return;
         }
         /* hidden, submit, reset or button should not have label */
-        if (elem.is("input")) {
-            const type = (_a = elem.getAttributeValue("type")) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-            const ignored = ["hidden", "submit", "reset", "button"];
-            if (type && ignored.includes(type)) {
-                return;
-            }
+        if (isIgnored(elem)) {
+            return;
+        }
+        if (hasAccessibleName(root, elem)) {
+            return;
         }
         let label = [];
         /* try to find label by id */
         if ((label = findLabelById(root, elem.id)).length > 0) {
-            this.validateLabel(elem, label);
+            this.validateLabel(root, elem, label);
             return;
         }
         /* try to find parent label (input nested in label) */
         if ((label = findLabelByParent(elem)).length > 0) {
-            this.validateLabel(elem, label);
+            this.validateLabel(root, elem, label);
             return;
         }
-        this.report(elem, `<${elem.tagName}> element does not have a <label>`);
+        if (elem.hasAttribute("aria-label")) {
+            this.report(elem, `<${elem.tagName}> element has aria-label but label has no text`);
+        }
+        else if (elem.hasAttribute("aria-labelledby")) {
+            this.report(elem, `<${elem.tagName}> element has aria-labelledby but referenced element has no text`);
+        }
+        else {
+            this.report(elem, `<${elem.tagName}> element does not have a <label>`);
+        }
     }
     /**
      * Reports error if none of the labels are accessible.
      */
-    validateLabel(elem, labels) {
+    validateLabel(root, elem, labels) {
         const visible = labels.filter(isVisible);
         if (visible.length === 0) {
-            this.report(elem, `<${elem.tagName}> element has label but <label> element is hidden`);
+            this.report(elem, `<${elem.tagName}> element has <label> but <label> element is hidden`);
+            return;
+        }
+        if (!labels.some((label) => hasAccessibleName(root, label))) {
+            this.report(elem, `<${elem.tagName}> element has <label> but <label> has no text`);
         }
     }
 }
@@ -13095,5 +13327,5 @@ function getFormatter(name) {
     return (_a = availableFormatters[name]) !== null && _a !== void 0 ? _a : null;
 }
 
-export { Config as C, DynamicValue as D, EventHandler as E, FileSystemConfigLoader as F, HtmlValidate as H, MetaTable as M, NodeClosed as N, Parser as P, Rule as R, Severity as S, TextNode as T, UserError as U, WrappedError as W, ConfigError as a, ConfigLoader as b, StaticConfigLoader as c, HtmlElement as d, SchemaValidationError as e, NestedError as f, MetaCopyableProperty as g, Reporter as h, TemplateExtractor as i, getFormatter as j, ensureError as k, legacyRequire as l, configDataFromFile as m, compatibilityCheck as n, codeframe as o, presets as p, name as q, ruleExists as r, bugs as s, version as v };
+export { Config as C, DynamicValue as D, EventHandler as E, FileSystemConfigLoader as F, HtmlValidate as H, MetaTable as M, NodeClosed as N, Parser as P, Rule as R, Severity as S, TextNode as T, UserError as U, WrappedError as W, ConfigError as a, ConfigLoader as b, StaticConfigLoader as c, HtmlElement as d, SchemaValidationError as e, NestedError as f, MetaCopyableProperty as g, classifyNodeText as h, TextClassification as i, Reporter as j, TemplateExtractor as k, getFormatter as l, legacyRequire as m, ensureError as n, configDataFromFile as o, presets as p, compatibilityCheck as q, ruleExists as r, codeframe as s, name as t, bugs as u, version as v };
 //# sourceMappingURL=core.js.map