@markuplint/rules 5.3.0 → 5.5.0

package/lib/permitted-contents/represent-transparent-nodes.js

@@ -1,8 +1,9 @@
+import { isInterElementWhitespace } from '@markuplint/selector';
 import { resolveContentModel } from './content-model.js';
 import { cmLog } from './debug.js';
 import { order } from './order.js';
 import { expandChildren, getContentOwner, getSlotContent } from './slot-content.js';
-import { Collection, isTransparent, matches } from './utils.js';
+import { Collection, isComment, isTransparent, matches } from './utils.js';
 /**
  * A map tracking child nodes that are currently being evaluated through
  * a transparent content model. Used to prevent infinite recursion and
@@ -97,78 +98,13 @@ childNodes, rules, specs, options, mode) {
             }
             continue;
         }
-        // A component whose children sit inside an inner wrapper element (or one of
-        // several) cannot be looked through as transparent content: the children
-        // belong to the wrapper, not to the outermost element that is being matched.
-        const childSlot = getSlotContent(childNode, mode);
-        if (childSlot && (!childSlot.wrapper || getContentOwner(childNode, mode) !== childNode)) {
+        const branchGroups = transparentBranchGroups(childNode, rules, specs, options, mode);
+        if (branchGroups == null) {
             for (const p of patterns) {
                 p.push(childNode);
             }
             continue;
         }
-        const models = resolveContentModel(childNode, rules, specs, mode);
-        if (models == null || typeof models === 'boolean') {
-            for (const p of patterns) {
-                p.push(childNode);
-            }
-            continue;
-        }
-        const noTransparentModels = models.filter(m => !isTransparent(m));
-        if (noTransparentModels.length === models.length) {
-            for (const p of patterns) {
-                p.push(childNode);
-            }
-            continue;
-        }
-        const childNodesPatterns = options.evaluateConditionalChildNodes
-            ? childNode.conditionalChildNodes().map(childNodes => [...expandChildren(childNode, [...childNodes], mode)])
-            : [
-                [...expandChildren(childNode, [...childNode.childNodes], mode)].filter(child => !(child.is(child.TEXT_NODE) && child.isWhitespace())),
-            ];
-        const branchGroups = [];
-        for (const branchChildNodes of childNodesPatterns) {
-            const collection = new Collection([...branchChildNodes]);
-            let unmatched;
-            if (noTransparentModels.length > 0) {
-                const result = order(noTransparentModels, collection.unmatched, rules, specs, options, Number.POSITIVE_INFINITY, mode);
-                unmatched = result.unmatched;
-            }
-            else {
-                unmatched = collection.unmatched;
-            }
-            const transparent = models.find(m => isTransparent(m));
-            if (!transparent || !isTransparent(transparent)) {
-                throw new Error('Unreachable code');
-            }
-            const branchChildren = [];
-            for (const _child of unmatched) {
-                const child = _child;
-                if (transparentMode.has(child)) {
-                    continue;
-                }
-                transparentMode.set(child, true);
-                if (child.is(child.ELEMENT_NODE)) {
-                    const transparentCondMatched = matches(transparent.transparent, child, specs, mode);
-                    if (!transparentCondMatched.matched) {
-                        branchChildren.push({
-                            type: 'TRANSPARENT_MODEL_DISALLOWS',
-                            matched: [],
-                            unmatched: [childNode],
-                            zeroMatch: false,
-                            query: transparent.transparent,
-                            hint: {
-                                not: transparentCondMatched.not,
-                                transparent: childNode,
-                            },
-                        });
-                        continue;
-                    }
-                }
-                branchChildren.push(child);
-            }
-            branchGroups.push(branchChildren);
-        }
         // The transparent element itself is still a child of the current parent
         // and must be evaluated against the parent's own content model (e.g., a
         // `<button>` must reject an `<a href>` descendant even though `<a>`'s
@@ -223,3 +159,99 @@ childNodes, rules, specs, options, mode) {
     });
     return result;
 }
+/**
+ * The children that a transparent element stands for in its parent, one group per
+ * conditional branch, or `null` when the element is not looked through (its content
+ * model has no transparent part, or it is a component whose children belong to an
+ * inner wrapper).
+ *
+ * A child that is itself a transparent element is followed by the children it
+ * stands for, so that `<span><ins><ins><div>` puts the `<div>` in the `<span>`: the
+ * HTML Standard derives the content model of a transparent element from its parent
+ * again for each transparent element in which the content finds itself.
+ *
+ * > In some cases, where transparent elements are nested in each other, the process
+ * > has to be applied iteratively.
+ *
+ * @see https://html.spec.whatwg.org/multipage/dom.html#transparent-content-models
+ *
+ * The branches of a nested transparent element are merged into each branch of the
+ * outer one, the same over-approximation as the fallback documented on
+ * {@link MAX_PATTERNS}.
+ */
+function transparentBranchGroups(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+childNode, rules, specs, options, mode) {
+    // A component whose children sit inside an inner wrapper element (or one of
+    // several) cannot be looked through as transparent content: the children
+    // belong to the wrapper, not to the outermost element that is being matched.
+    const childSlot = getSlotContent(childNode, mode);
+    if (childSlot && (!childSlot.wrapper || getContentOwner(childNode, mode) !== childNode)) {
+        return null;
+    }
+    const models = resolveContentModel(childNode, rules, specs, mode);
+    if (models == null || typeof models === 'boolean') {
+        return null;
+    }
+    const noTransparentModels = models.filter(m => !isTransparent(m));
+    if (noTransparentModels.length === models.length) {
+        return null;
+    }
+    const childNodesPatterns = options.evaluateConditionalChildNodes
+        ? childNode
+            .conditionalChildNodes()
+            .map(childNodes => [...expandChildren(childNode, [...childNodes], mode)].filter(child => !isComment(child)))
+        : [
+            [...expandChildren(childNode, [...childNode.childNodes], mode)].filter(child => !isComment(child) && !(child.is(child.TEXT_NODE) && isInterElementWhitespace(child.raw))),
+        ];
+    const branchGroups = [];
+    for (const branchChildNodes of childNodesPatterns) {
+        const collection = new Collection([...branchChildNodes]);
+        let unmatched;
+        if (noTransparentModels.length > 0) {
+            const result = order(noTransparentModels, collection.unmatched, rules, specs, options, Number.POSITIVE_INFINITY, mode);
+            unmatched = result.unmatched;
+        }
+        else {
+            unmatched = collection.unmatched;
+        }
+        const transparent = models.find(m => isTransparent(m));
+        if (!transparent || !isTransparent(transparent)) {
+            throw new Error('Unreachable code');
+        }
+        const branchChildren = [];
+        for (const _child of unmatched) {
+            const child = _child;
+            if (transparentMode.has(child)) {
+                continue;
+            }
+            transparentMode.set(child, true);
+            if (child.is(child.ELEMENT_NODE)) {
+                const transparentCondMatched = matches(transparent.transparent, child, specs, mode);
+                if (!transparentCondMatched.matched) {
+                    branchChildren.push({
+                        type: 'TRANSPARENT_MODEL_DISALLOWS',
+                        matched: [],
+                        unmatched: [childNode],
+                        zeroMatch: false,
+                        query: transparent.transparent,
+                        hint: {
+                            not: transparentCondMatched.not,
+                            transparent: childNode,
+                        },
+                    });
+                    continue;
+                }
+                branchChildren.push(child);
+                const nested = transparentBranchGroups(child, rules, specs, options, mode);
+                if (nested != null) {
+                    branchChildren.push(...nested.flat());
+                }
+                continue;
+            }
+            branchChildren.push(child);
+        }
+        branchGroups.push(branchChildren);
+    }
+    return branchGroups;
+}

package/lib/permitted-contents/slot-content.d.ts

@@ -24,7 +24,8 @@ export declare function getContentOwner<T extends RuleConfigValue, O extends Pla
  * The children of `el` to validate: the nodes given at the usage site, passed
  * through the pretender's `contents` when it declares any, with the children of
  * fragment pretenders (`element: '#fragment'`) expanded in place because such a
- * component contributes its contents directly to its parent.
+ * component contributes its contents directly to its parent. What the framework
+ * moves to the `<head>` (`movedToHead` of the spec) is not a child of `el` in the DOM.
  */
 export declare function expandChildren<T extends RuleConfigValue, O extends PlainData>(el: Element<T, O>, given: readonly ChildNode<T, O>[], mode: Mode): readonly ChildNode<T, O>[];
 /**

package/lib/permitted-contents/slot-content.js

@@ -34,14 +34,40 @@ el, mode) {
     }
     return el;
 }
+/**
+ * Whether the framework moves `child` out of `parent`: the spec of the framework lists the elements
+ * it places in the `<head>` wherever they are written (`movedToHead`), so what `parent` contains in
+ * the DOM does not include them. The `<head>` itself keeps them: that is where they are placed.
+ *
+ * @see MLMLSpec.movedToHead in `@markuplint/ml-spec`
+ */
+function isMovedToHead(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+parent, 
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+child) {
+    const selectors = parent.ownerMLDocument.specs.movedToHead;
+    if (!selectors || !child.is(child.ELEMENT_NODE) || parent.localName === 'head') {
+        return false;
+    }
+    return selectors.some(selector => child.matches(selector));
+}
 /**
  * The children of `el` to validate: the nodes given at the usage site, passed
  * through the pretender's `contents` when it declares any, with the children of
  * fragment pretenders (`element: '#fragment'`) expanded in place because such a
- * component contributes its contents directly to its parent.
+ * component contributes its contents directly to its parent. What the framework
+ * moves to the `<head>` (`movedToHead` of the spec) is not a child of `el` in the DOM.
  */
 export function expandChildren(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+el, given, mode) {
+    // Only here, not in the expansion of a fragment: what a fragment contributes belongs to `el`, so
+    // it is `el` that decides whether it is moved (the `<head>` keeps it), not the fragment.
+    return fillAndExpand(el, given, mode).filter(child => !isMovedToHead(el, child));
+}
+function fillAndExpand(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
 el, given, mode) {
     const slotContent = getSlotContent(el, mode);
     const children = slotContent ? slotContent.fill(given) : given;
@@ -71,7 +97,7 @@ node, mode) {
 function expandFragment(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
 node, mode) {
-    return isFragmentPretender(node, mode) ? expandChildren(node, [...node.childNodes], mode) : [node];
+    return isFragmentPretender(node, mode) ? fillAndExpand(node, [...node.childNodes], mode) : [node];
 }
 /**
  * A violation on an element that only the pretender renders (`contents`) is reported

package/lib/permitted-contents/start.js

@@ -1,6 +1,8 @@
+import { isInterElementWhitespace } from '@markuplint/selector';
 import { order } from './order.js';
 import { representTransparentNodes } from './represent-transparent-nodes.js';
 import { expandChildren } from './slot-content.js';
+import { isComment } from './utils.js';
 /**
  * Entry point for validating an element's child nodes against a content model definition.
  * Handles the three forms of content model: `false` (no content allowed), `true` (any content
@@ -23,10 +25,10 @@ el, rules, specs, options, mode) {
         ? el.conditionalChildNodes().map(childNodes => [...childNodes])
         : [[...el.childNodes]];
     const childNodesPatterns = givenPatterns.map(given => {
-        const children = expandChildren(el, given, mode);
+        const children = expandChildren(el, given, mode).filter(child => !isComment(child));
         return options.evaluateConditionalChildNodes
             ? [...children]
-            : children.filter(child => !(child.is(child.TEXT_NODE) && child.isWhitespace()));
+            : children.filter(child => !(child.is(child.TEXT_NODE) && isInterElementWhitespace(child.raw)));
     });
     return childNodesPatterns.flatMap(childNodes => {
         if (contents === false) {

package/lib/permitted-contents/utils.d.ts

@@ -1,6 +1,17 @@
 import type { ChildNode, Hints, MissingNodeReason, Mode, RepeatSign, Specs } from './types.js';
 import type { PermittedContentPattern, PermittedContentChoice, PermittedContentOneOrMore, PermittedContentOptional, PermittedContentRequire, PermittedContentTransparent, PermittedContentZeroOrMore, Model } from '@markuplint/ml-spec';
 import type { ReadonlyDeep } from 'type-fest';
+/**
+ * Whether a child node is a comment, which a content model does not see.
+ * Without this, a comment is matched like an element and takes the place of
+ * one the model requires (`<html><!-- c --><head>` leaves `head` unmatched).
+ *
+ * @param node - The child node to test.
+ * @returns True if the node is a comment node.
+ * @see https://html.spec.whatwg.org/multipage/dom.html#content-models
+ * > Inter-element whitespace, comment nodes, and processing instruction nodes must be ignored when establishing whether an element's contents match the element's content model or not
+ */
+export declare function isComment(node: ChildNode): boolean;
 /**
  * Determines whether a given value is a terminal model (a selector string or an array
  * of selector strings) rather than a nested array of content model patterns.

package/lib/permitted-contents/utils.js

@@ -1,6 +1,21 @@
 import { createSelector } from '@markuplint/selector';
 import { bgGreen, green, bgRed, bgBlue, blue, bgMagenta, cyan } from './debug.js';
 import { transparentMode } from './represent-transparent-nodes.js';
+/**
+ * Whether a child node is a comment, which a content model does not see.
+ * Without this, a comment is matched like an element and takes the place of
+ * one the model requires (`<html><!-- c --><head>` leaves `head` unmatched).
+ *
+ * @param node - The child node to test.
+ * @returns True if the node is a comment node.
+ * @see https://html.spec.whatwg.org/multipage/dom.html#content-models
+ * > Inter-element whitespace, comment nodes, and processing instruction nodes must be ignored when establishing whether an element's contents match the element's content model or not
+ */
+export function isComment(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+node) {
+    return node.is(node.COMMENT_NODE);
+}
 /**
  * Determines whether a given value is a terminal model (a selector string or an array
  * of selector strings) rather than a nested array of content model patterns.

package/lib/placeholder-label-option/index.js

@@ -1,4 +1,5 @@
 import { createRule } from '@markuplint/ml-core';
+import { getSelectDisplaySize } from '@markuplint/ml-spec';
 import { decodeEntities } from '@markuplint/shared';
 import meta from './meta.js';
 /**
@@ -17,7 +18,7 @@ import meta from './meta.js';
 export default createRule({
     meta: meta,
     verify({ document, report, t }) {
-        for (const select of document.querySelectorAll('select')) {
+        for (const select of document.deepQuerySelectorAll('select')) {
             if (!needPlaceholderLabelOption(select)) {
                 continue;
             }
@@ -88,17 +89,10 @@ select) {
     return value === '' || value === null;
 }
 /**
- * The display size of a `<select>`.
- *
- * > The display size of a select element is the result of applying the rules for parsing non-negative integers to the
- * > value of the element's size attribute, if it has one and parsing it is successful. If applying those rules to the
- * > attribute's value is not successful, or if the size attribute is absent, then the element's display size is 4 if
- * > the element's multiple content attribute is present, and 1 otherwise.
+ * The display size of a `<select>`, as {@link getSelectDisplaySize} defines it.
  *
  * `null` when the size is given by an expression (`:size="n"`, `size={n}`): it
  * is not known until the template runs, so the rule must not assume it is 1.
- *
- * @see https://html.spec.whatwg.org/multipage/form-elements.html#concept-select-size
  */
 function displaySize(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
@@ -107,23 +101,7 @@ select) {
     if (size?.isDynamicValue) {
         return null;
     }
-    return parseNonNegativeInteger(size?.value ?? null) ?? (select.hasAttribute('multiple') ? 4 : 1);
-}
-/**
- * The rules for parsing non-negative integers: leading ASCII whitespace is
- * skipped, an optional `+` or `-` is read, then the leading run of ASCII
- * digits; whatever follows the digits is ignored (`"3abc"` is 3, `"01"` is 1).
- * No digits, or a negative number, is an error. `-0` is not less than zero.
- *
- * @see https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-non-negative-integers
- */
-function parseNonNegativeInteger(text) {
-    const match = /^[\t\n\f\r ]*([+-]?)(\d+)/.exec(text ?? '');
-    if (!match) {
-        return null;
-    }
-    const value = Number(match[2]);
-    return match[1] === '-' && value !== 0 ? null : value;
+    return getSelectDisplaySize(size?.value ?? null, select.hasAttribute('multiple'));
 }
 /**
  * The first option of a select's list of options, and whether an optgroup lies

package/lib/require-accessible-name/index.js

@@ -10,7 +10,7 @@ export default createRule({
     async verify({ document, report, t }) {
         await document.walkOn('Element', el => {
             const ariaVersion = el.rule.options?.ariaVersion ?? document.ruleCommonSettings?.ariaVersion ?? ARIA_RECOMMENDED_VERSION;
-            if (accnameMayBeMutable(el, document)) {
+            if (accnameMayBeMutable(el)) {
                 return;
             }
             if (!isExposed(el, document.specs, ariaVersion)) {
@@ -29,7 +29,7 @@ export default createRule({
                 return;
             }
             // The static scan cannot decide whether the unknown content is the name.
-            if (accnameMayComeFromUnknownContent(el, document)) {
+            if (accnameMayComeFromUnknownContent(el)) {
                 return;
             }
             report({ scope: el, message: t('Require {0}', 'accessible name') });

package/lib/require-adjacent-popover/index.js

@@ -1,5 +1,6 @@
 import { createRule } from '@markuplint/ml-core';
 import { ARIA_RECOMMENDED_VERSION, mayBeFocusable } from '@markuplint/ml-spec';
+import { getElementByIdInTree } from '../helpers.js';
 import meta from './meta.js';
 /**
  * Command values from the Invoker Commands API that relate to popover behavior.
@@ -11,7 +12,8 @@ export default createRule({
     defaultSeverity: 'warning',
     verify({ document, report, t }) {
         const ariaVersion = document.ruleCommonSettings?.ariaVersion ?? ARIA_RECOMMENDED_VERSION;
-        const triggers = document.querySelectorAll('[popovertarget], [commandfor]');
+        // The target is looked for in the tree of the trigger, so the triggers of every tree are checked
+        const triggers = document.deepQuerySelectorAll('[popovertarget], [commandfor]');
         Triggers: for (const trigger of triggers) {
             let targetId = null;
             const popovertarget = trigger.getAttribute('popovertarget');
@@ -27,7 +29,7 @@ export default createRule({
             if (!targetId) {
                 continue;
             }
-            const target = document.getElementById(targetId);
+            const target = getElementByIdInTree(trigger, targetId, trigger.getAttributeNode(popovertarget ? 'popovertarget' : 'commandfor')?.isExpressionValue);
             if (!target) {
                 continue;
             }

package/lib/require-ancestor/index.d.ts

@@ -1,2 +1,22 @@
+/**
+ * Looks for the ancestor that the content model asks for (`descendantOf`) in the tree of the
+ * element, as the DOM does: the climb stops at the top of the content of a `template` element, and
+ * does not go on to the tree that holds the `template`.
+ *
+ * What the rule decides for an element whose climb ends there depends on where the content is placed:
+ *
+ * - The content of an ordinary `template` element is placed where the markup does not tell
+ *   (a script clones it into the document), so the rule does not decide and reports nothing,
+ *   whether or not a matching ancestor stands outside of the `template`.
+ * - The content of a declarative shadow root is placed in its host, and it is a tree of its own:
+ *   an ancestor outside of the shadow root is not an ancestor of the element, so it is reported.
+ *
+ * A `template` of a template engine that renders its children in place of it (Vue's `<template v-if>`,
+ * or the `template` of a framework whose spec puts the children in the element itself) is not an HTML
+ * `template` element, and the climb goes through it as through any other element.
+ *
+ * @see https://dom.spec.whatwg.org/#parent-element
+ * @see https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
+ */
 declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<import("@markuplint/ml-core").RuleConfigValue, undefined>>;
 export default _default;

package/lib/require-ancestor/index.js

@@ -1,5 +1,26 @@
 import { createRule } from '@markuplint/ml-core';
+import { isShadowRoot } from '@markuplint/ml-spec';
 import meta from './meta.js';
+/**
+ * Looks for the ancestor that the content model asks for (`descendantOf`) in the tree of the
+ * element, as the DOM does: the climb stops at the top of the content of a `template` element, and
+ * does not go on to the tree that holds the `template`.
+ *
+ * What the rule decides for an element whose climb ends there depends on where the content is placed:
+ *
+ * - The content of an ordinary `template` element is placed where the markup does not tell
+ *   (a script clones it into the document), so the rule does not decide and reports nothing,
+ *   whether or not a matching ancestor stands outside of the `template`.
+ * - The content of a declarative shadow root is placed in its host, and it is a tree of its own:
+ *   an ancestor outside of the shadow root is not an ancestor of the element, so it is reported.
+ *
+ * A `template` of a template engine that renders its children in place of it (Vue's `<template v-if>`,
+ * or the `template` of a framework whose spec puts the children in the element itself) is not an HTML
+ * `template` element, and the climb goes through it as through any other element.
+ *
+ * @see https://dom.spec.whatwg.org/#parent-element
+ * @see https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
+ */
 export default createRule({
     meta: meta,
     async verify({ document, report, t }) {
@@ -9,21 +30,26 @@ export default createRule({
             if (!descendantOf) {
                 return;
             }
-            let ancestor = el.parentElement;
+            let ancestor = el.treeParentElement;
             let found = false;
             while (ancestor) {
                 if (ancestor.matches(descendantOf)) {
                     found = true;
                     break;
                 }
-                ancestor = ancestor.parentElement;
+                ancestor = ancestor.treeParentElement;
             }
-            if (!found) {
-                report({
-                    scope: el,
-                    message: t('{0} must appear as a descendant of {1}', t('the "{0}" {1}', el.localName, 'element'), t('the "{0}" {1}', descendantOf, 'element')),
-                });
+            if (found) {
+                return;
+            }
+            const root = el.getRootNode();
+            if (root.is(root.DOCUMENT_FRAGMENT_NODE) && !isShadowRoot(root)) {
+                return;
             }
+            report({
+                scope: el,
+                message: t('{0} must appear as a descendant of {1}', t('the "{0}" {1}', el.localName, 'element'), t('the "{0}" {1}', descendantOf, 'element')),
+            });
         });
     },
 });

package/lib/require-datetime/index.js

@@ -8,7 +8,7 @@ export default createRule({
         langs: undefined,
     },
     verify({ document, report, t }) {
-        for (const time of document.querySelectorAll('time:not([datetime])')) {
+        for (const time of document.deepQuerySelectorAll('time:not([datetime])')) {
             if (time.hasMutableChildren()) {
                 continue;
             }

package/lib/require-dialog-autofocus/index.js

@@ -1,4 +1,5 @@
 import { createRule } from '@markuplint/ml-core';
+import { getElementByIdInTree } from '../helpers.js';
 import meta from './meta.js';
 /**
  * Without `autofocus`, the browser's dialog focusing steps fall back to the
@@ -14,8 +15,9 @@ export default createRule({
     defaultSeverity: 'warning',
     meta: meta,
     verify({ document, report, t }) {
-        const triggers = document.querySelectorAll('button[command][commandfor]');
-        const reportedDialogIds = new Set();
+        // The dialog is looked for in the tree of the trigger, so the triggers of every tree are checked
+        const triggers = document.deepQuerySelectorAll('button[command][commandfor]');
+        const reportedDialogs = new Set();
         for (const trigger of triggers) {
             const command = trigger.getAttribute('command');
             if (!command || command.toLowerCase() !== 'show-modal') {
@@ -25,11 +27,11 @@ export default createRule({
             if (!targetId) {
                 continue;
             }
-            if (reportedDialogIds.has(targetId)) {
+            const target = getElementByIdInTree(trigger, targetId, trigger.getAttributeNode('commandfor')?.isExpressionValue);
+            if (!target) {
                 continue;
             }
-            const target = document.getElementById(targetId);
-            if (!target) {
+            if (reportedDialogs.has(target)) {
                 continue;
             }
             if (target.localName !== 'dialog') {
@@ -42,7 +44,7 @@ export default createRule({
             if (autofocusDescendants.length > 0) {
                 continue;
             }
-            reportedDialogIds.add(targetId);
+            reportedDialogs.add(target);
             report({
                 scope: target,
                 message: t('The "{0*}" element referenced by a "{1*}" command requires an element with the "{2*}" attribute', 'dialog', 'show-modal', 'autofocus'),

package/lib/require-h1/index.js

@@ -14,20 +14,16 @@ export default createRule({
     defaultOptions: {
         'in-document-fragment': false,
     },
-    async verify({ document, report, t }) {
-        const h1Stack = [];
+    verify({ document, report, t }) {
         if (document.nodeList.length === 0) {
             return;
         }
         if (!document.rule.options['in-document-fragment'] && document.isFragment) {
             return;
         }
-        await document.walkOn('Element', node => {
-            if (node.nodeName.toLowerCase() === 'h1') {
-                h1Stack.push(node);
-            }
-        });
-        if (h1Stack.length === 0) {
+        // The h1 of the document is required: what is in the content of a `template` element or in a
+        // declarative shadow root is a tree of its own, and where it is inserted is not known from the markup
+        if (!document.querySelector('h1')) {
             const message = t('Require {0}', t('the "{0*}" {1}', 'h1', 'element'));
             report({
                 message,

package/lib/require-landmark-label/index.js

@@ -1,5 +1,5 @@
 import { createRule } from '@markuplint/ml-core';
-import { computeLandmarkRoles } from '../landmark-roles/roles.js';
+import { computeLandmarkRolesOfEachTree } from '../landmark-roles/roles.js';
 import meta from './meta.js';
 /**
  * Split from the former `landmark-roles` rule (#3989): when a document has
@@ -17,22 +17,24 @@ export default createRule({
         if (document.isFragment) {
             return;
         }
-        const roles = computeLandmarkRoles(document);
-        for (const role of Object.keys(roles)) {
-            const roleEls = roles[role];
-            const duplicated = 1 < roleEls.length;
-            if (!duplicated) {
-                continue;
-            }
-            for (const el of roleEls) {
-                if (el.rule.disabled) {
+        // Landmarks are counted by tree: the content of a `template` element is a tree of its own
+        for (const roles of computeLandmarkRolesOfEachTree(document)) {
+            for (const role of Object.keys(roles)) {
+                const roleEls = roles[role];
+                const duplicated = 1 < roleEls.length;
+                if (!duplicated) {
                     continue;
                 }
-                if (!hasLabel(el)) {
-                    report({
-                        scope: el,
-                        message: t('Require {0}', t('unique {0}', 'accessible name')),
-                    });
+                for (const el of roleEls) {
+                    if (el.rule.disabled) {
+                        continue;
+                    }
+                    if (!hasLabel(el)) {
+                        report({
+                            scope: el,
+                            message: t('Require {0}', t('unique {0}', 'accessible name')),
+                        });
+                    }
                 }
             }
         }

package/lib/role-supports-aria-prop/index.js

@@ -2,7 +2,7 @@ import { createRule, getComputedRole, ariaSpecs, getSpec } from '@markuplint/ml-
 import { ARIA_RECOMMENDED_VERSION } from '@markuplint/ml-spec';
 import { checkingRoleSupportsAriaProp } from '../wai-aria/checkings/role-supports-aria-prop.js';
 import { defaultOptions } from '../wai-aria/default-options.js';
-import { isAriaAttr } from '../helpers.js';
+import { getAriaAttrs } from '../helpers.js';
 import meta from './meta.js';
 /**
  * Split from the former `wai-aria-disallowed-props` rule (#3989): the
@@ -21,7 +21,7 @@ export default createRule({
                 return;
             if (elSpec && !elSpec.globalAttrs['#ARIAAttrs'])
                 return;
-            const propAttrs = el.attributes.filter(attr => isAriaAttr(attr));
+            const propAttrs = getAriaAttrs(el);
             if (propAttrs.length === 0)
                 return;
             const ariaVersion = el.rule.options?.version ?? document.ruleCommonSettings?.ariaVersion ?? ARIA_RECOMMENDED_VERSION;