npm - html-validate - Versions diffs - 6.2.0 → 6.4.0 - Mend

html-validate 6.2.0 → 6.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/es/core.d.ts CHANGED Viewed

@@ -502,6 +502,8 @@ interface ConditionalEvent extends Event {
     location: Location;
     /** Condition including markers. */
     condition: string;
+    /** The element containing the conditional, if any. */
+    parent: HtmlElement | null;
 }
 /**
  * Event emitted when html-validate directives `<!-- [html-validate-...] -->`
@@ -651,10 +653,17 @@ declare class Parser {
      */
     private getAttributeLocation;
     protected consumeDirective(token: Token): void;
+    /**
+     * Consumes conditional comment in tag form.
+     *
+     * See also the related [[consumeCommend]] method.
+     */
+    protected consumeConditional(token: Token): void;
     /**
      * Consumes comment token.
      *
-     * Tries to find IE conditional comments and emits conditional token if found.
+     * Tries to find IE conditional comments and emits conditional token if
+     * found. See also the related [[consumeConditional]] method.
      */
     protected consumeComment(token: Token): void;
     /**
@@ -1575,7 +1584,8 @@ declare class MetaTable {
      */
     loadFromFile(filename: string): void;
     /**
-     * Get [[MetaElement]] for the given tag or null if the element doesn't exist.
+     * Get [[MetaElement]] for the given tag. If no specific metadata is present
+     * the global metadata is returned or null if no global is present.
      *
      * @public
      * @returns A shallow copy of metadata.

package/dist/es/core.js CHANGED Viewed

@@ -933,14 +933,23 @@ class MetaTable {
         }
     }
     /**
-     * Get [[MetaElement]] for the given tag or null if the element doesn't exist.
+     * Get [[MetaElement]] for the given tag. If no specific metadata is present
+     * the global metadata is returned or null if no global is present.
      *
      * @public
      * @returns A shallow copy of metadata.
      */
     getMetaFor(tagName) {
+        /* try to locate by tagname */
         tagName = tagName.toLowerCase();
-        return this.elements[tagName] ? { ...this.elements[tagName] } : null;
+        if (this.elements[tagName]) {
+            return { ...this.elements[tagName] };
+        }
+        /* try to locate global element */
+        if (this.elements["*"]) {
+            return { ...this.elements["*"] };
+        }
+        return null;
     }
     /**
      * Find all tags which has enabled given property.
@@ -2936,7 +2945,7 @@ var TRANSFORMER_API;
 /** @public */
 const name = "html-validate";
 /** @public */
-const version = "6.2.0";
+const version = "6.4.0";
 /** @public */
 const homepage = "https://html-validate.org";
 /** @public */
@@ -3216,7 +3225,8 @@ function ruleDocumentationUrl(filename) {
     const p = path.parse(filename);
     const root = path.join(distFolder, "rules");
     const rel = path.relative(root, path.join(p.dir, p.name));
-    return `${homepage}/rules/${rel}.html`;
+    const normalized = rel.replace(/\\/g, "/");
+    return `${homepage}/rules/${normalized}.html`;
 }
 const defaults$p = {
@@ -3406,6 +3416,28 @@ class AllowedLinks extends Rule {
     }
 }
+class AriaHiddenBody extends Rule {
+    documentation() {
+        return {
+            description: "`aria-hidden` must not be used on the `<body>` element as it makes the page inaccessible to assistive technology such as screenreaders",
+            url: ruleDocumentationUrl("@/rules/aria-hidden-body.ts"),
+        };
+    }
+    setup() {
+        this.on("tag:ready", this.isRelevant, (event) => {
+            const { target } = event;
+            const attr = target.getAttribute("aria-hidden");
+            if (!attr || !attr.valueMatches("true", true)) {
+                return;
+            }
+            this.report(target, "aria-hidden must not be used on <body>", attr.keyLocation);
+        });
+    }
+    isRelevant(event) {
+        return event.target.is("body");
+    }
+}
 const whitelisted = [
     "main",
     "nav",
@@ -5033,8 +5065,9 @@ class ElementRequiredAttributes extends Rule {
 class ElementRequiredContent extends Rule {
     documentation(context) {
         if (context) {
+            const { element, missing } = context;
             return {
-                description: `The <${context.node} element requires a <${context.missing}> to be present as content.`,
+                description: `The \`${element}\` element requires a \`${missing}\` to be present as content.`,
                 url: ruleDocumentationUrl("@/rules/element-required-content.ts"),
             };
         }
@@ -5060,10 +5093,11 @@ class ElementRequiredContent extends Rule {
                 }
                 for (const missing of Validator.validateRequiredContent(node, rules)) {
                     const context = {
-                        node: node.tagName,
-                        missing,
+                        element: node.annotatedName,
+                        missing: `<${missing}>`,
                     };
-                    this.report(node, `${node.annotatedName} element must have <${missing}> as content`, null, context);
+                    const message = `${node.annotatedName} element must have <${missing}> as content`;
+                    this.report(node, message, null, context);
                 }
             });
         });
@@ -5146,7 +5180,14 @@ class EmptyHeading extends Rule {
 class EmptyTitle extends Rule {
     documentation() {
         return {
-            description: `The <title> element is used to describe the document and is shown in the browser tab and titlebar. WCAG and SEO requires a descriptive title and preferably unique within the site. Whitespace only is considered empty.`,
+            description: [
+                "The `<title>` element cannot be empty, it must have textual content.",
+                "",
+                "It is used to describe the document and is shown in the browser tab and titlebar.",
+                "WCAG and SEO requires a descriptive title and preferably unique within the site.",
+                "",
+                "Whitespace is ignored.",
+            ].join("\n"),
             url: ruleDocumentationUrl("@/rules/empty-title.ts"),
         };
     }
@@ -5162,7 +5203,10 @@ class EmptyTitle extends Rule {
                     break;
                 case TextClassification.EMPTY_TEXT:
                     /* no content or whitespace only */
-                    this.report(node, `<${node.tagName}> cannot be empty, must have text content`);
+                    {
+                        const message = `<${node.tagName}> cannot be empty, must have text content`;
+                        this.report(node, message, node.location);
+                    }
                     break;
             }
         });
@@ -5943,7 +5987,7 @@ class NoConditionalComment extends Rule {
     }
     setup() {
         this.on("conditional", (event) => {
-            this.report(null, "Use of conditional comments are deprecated", event.location);
+            this.report(event.parent, "Use of conditional comments are deprecated", event.location);
         });
     }
 }
@@ -9440,6 +9484,7 @@ const bundledRules$1 = {
 const bundledRules = {
     "allowed-links": AllowedLinks,
+    "aria-hidden-body": AriaHiddenBody,
     "aria-label-misuse": AriaLabelMisuse,
     "attr-case": AttrCase,
     "attr-delimiter": AttrDelimiter,
@@ -9510,6 +9555,7 @@ var defaultConfig = {};
 const config$3 = {
     rules: {
+        "aria-hidden-body": "error",
         "aria-label-misuse": "error",
         "deprecated-rule": "warn",
         "empty-heading": "error",
@@ -9544,6 +9590,7 @@ const config$2 = {
 const config$1 = {
     rules: {
+        "aria-hidden-body": "error",
         "aria-label-misuse": "error",
         "attr-case": "error",
         "attr-delimiter": "error",
@@ -9713,7 +9760,9 @@ class ResolvedConfig {
      * @returns A list of transformed sources ready for validation.
      */
     transformFilename(filename) {
-        const data = fs.readFileSync(filename, { encoding: "utf8" });
+        const stdin = 0;
+        const src = filename !== "/dev/stdin" ? filename : stdin;
+        const data = fs.readFileSync(src, { encoding: "utf8" });
         const source = {
             data,
             filename,
@@ -10435,10 +10484,7 @@ class Parser {
                     this.consumeDirective(token);
                     break;
                 case TokenType.CONDITIONAL:
-                    this.trigger("conditional", {
-                        condition: token.data[1],
-                        location: token.location,
-                    });
+                    this.consumeConditional(token);
                     break;
                 case TokenType.COMMENT:
                     this.consumeComment(token);
@@ -10743,17 +10789,33 @@ class Parser {
             location: token.location,
         });
     }
+    /**
+     * Consumes conditional comment in tag form.
+     *
+     * See also the related [[consumeCommend]] method.
+     */
+    consumeConditional(token) {
+        const element = this.dom.getActive();
+        this.trigger("conditional", {
+            condition: token.data[1],
+            location: token.location,
+            parent: element,
+        });
+    }
     /**
      * Consumes comment token.
      *
-     * Tries to find IE conditional comments and emits conditional token if found.
+     * Tries to find IE conditional comments and emits conditional token if
+     * found. See also the related [[consumeConditional]] method.
      */
     consumeComment(token) {
         const comment = token.data[0];
+        const element = this.dom.getActive();
         for (const conditional of parseConditionalComment(comment, token.location)) {
             this.trigger("conditional", {
                 condition: conditional.expression,
                 location: conditional.location,
+                parent: element,
             });
         }
     }