@markuplint/rules 5.4.0 → 5.6.0

package/lib/helpers.js

@@ -1,5 +1,100 @@
-import { escapeCSS } from '@markuplint/ml-spec';
-import { asciiLowerCase } from '@markuplint/shared';
+import { getDOMValue, getRenderedChildNodes } from '@markuplint/ml-core';
+import { asciiLowerCase, decodeEntities } from '@markuplint/shared';
+export { getDOMValue };
+/**
+ * The element that an id reference written in an attribute of `el` resolves to: the first element
+ * of the tree `el` is in whose id is the reference. The content of a `template` element and a
+ * declarative shadow root are trees of their own, so a reference there does not reach an id of the
+ * document, nor the other way around.
+ *
+ * The reference is compared with the character references in the markup resolved, as the id is.
+ *
+ * @template T - The rule configuration value type
+ * @template O - The rule options type
+ * @param el - The element that has the attribute
+ * @param reference - The value of the attribute, or one token of it, as written in the markup
+ * @param isExpression - Whether the value is written as code, which has no character reference in it
+ * @returns The element, or `null` when the tree has none, or `el` is in no tree
+ * @see https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
+ */
+export function getElementByIdInTree(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+el, reference, isExpression = false) {
+    const root = el.getRootNode();
+    if (root.is(root.DOCUMENT_NODE) || root.is(root.DOCUMENT_FRAGMENT_NODE)) {
+        return root.getElementById(isExpression ? reference : decodeEntities(reference));
+    }
+    return null;
+}
+/**
+ * Whether the element is not an element of the output, so that what is written in it is rendered in
+ * place of it:
+ *
+ * - a fragment (`<>` of JSX), which `childNodes` already flattens;
+ * - a `template` element with a directive attribute (Vue's `<template v-if>`, `v-for`, `v-slot`).
+ *   It is not an HTML `template` element: the template engine renders its children in place of it
+ *   and drops it. A spread attribute (`{...props}`) is not such a directive: it sets attributes of
+ *   the element, which stays.
+ *
+ * `isTransparent` of `@markuplint/ml-core` (`src/ml-dom/helper/tree-scope.ts`), which is not exported,
+ * decides the same of an element for the tree boundaries (`getRootNode()`, the shadow host): a kind
+ * added here belongs to it too.
+ *
+ * @template T - The rule configuration value type
+ * @template O - The rule options type
+ * @param el - An element
+ * @returns `true` if the output has no element for it
+ */
+export function isRenderedAway(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+el) {
+    if (el.isFragment) {
+        return true;
+    }
+    if (el.localName !== 'template') {
+        return false;
+    }
+    for (const attr of el.attributes) {
+        if (attr.isDirective && attr.localName !== '#spread') {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Whether the element is a component whose output is not known, so that it may render an element that
+ * a rule looks for among the ancestors (`MLElement#isUnresolvedComponent`). What the parser sees as a
+ * component but renders its children in place is not one: what {@link isRenderedAway} says (a
+ * fragment such as `React.Fragment` or Astro's `Fragment`, a `template` with a directive).
+ *
+ * @template T - The rule configuration value type
+ * @template O - The rule options type
+ * @param el - An ancestor of the element
+ * @returns `true` if the element may render what is not known
+ */
+export function isUnknownOutput(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+el) {
+    return !isRenderedAway(el) && el.isUnresolvedComponent();
+}
+/**
+ * The elements that match the selector in the tree `el` is in (see {@link getElementByIdInTree}).
+ *
+ * @template T - The rule configuration value type
+ * @template O - The rule options type
+ * @param el - An element of the tree
+ * @param selectors - A selector
+ * @returns The elements in the order of the markup, none when `el` is in no tree
+ */
+export function querySelectorAllInTree(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+el, selectors) {
+    const root = el.getRootNode();
+    if (root.is(root.DOCUMENT_NODE) || root.is(root.DOCUMENT_FRAGMENT_NODE)) {
+        return [...root.querySelectorAll(selectors)];
+    }
+    return [];
+}
 /** A `null`/`undefined` condition means the attribute applies unconditionally. */
 export function attrMatches(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
@@ -30,9 +125,11 @@ node, condition) {
             }
         }
     }
-    // Whether the attribute is the one that the selector names is up to the attribute (`isNamedBy`)
+    // Whether the attribute is the one that the selector names is up to the attribute (`isNamedBy`).
+    // An attribute that the framework does not output (`type={null}`) is known not to be there, so the
+    // condition is decided: it is not met.
     const names = [...referencedNames];
-    return node.attributes.some(attr => attr.isDynamicValue && names.some(name => attr.isNamedBy(name)));
+    return node.attributes.some(attr => attr.isDynamicValue && !attr.isAbsent && names.some(name => attr.isNamedBy(name)));
 }
 /**
  * Memoizes `fn` by the identity of its argument. Use it for an object that is one object for every
@@ -118,6 +215,20 @@ attr) {
 export function namespaceKeyOf(attr) {
     return attr.ownerElement.elementType === 'authored' ? asciiLowerCase(attr.name) : attr.nameKey;
 }
+/**
+ * The `aria-*` attributes that the element has. An attribute that the framework does not output
+ * (`aria-label={null}`, `MLAttr#isAbsent`) is not one of them: the DOM does not have it, so what a rule
+ * says of an attribute of the element (it is unsupported, deprecated, redundant, or its value is
+ * invalid) is not said of it.
+ *
+ * @param el - The element
+ * @returns The `aria-*` attributes that are output
+ */
+export function getAriaAttrs(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+el) {
+    return el.attributes.filter(attr => !attr.isAbsent && isAriaAttr(attr));
+}
 /**
  * Whether the attribute is an `aria-*` one, told by {@link namespaceKeyOf}.
  *
@@ -259,20 +370,60 @@ export function toNormalizedValue(value, spec) {
     }
     return normalized;
 }
-export function accnameMayBeMutable(
+/**
+ * Whether a child of an element may stand for children that are not known: a block of a preprocessor
+ * that has no `blockBehavior` (an output such as `{value}` or an `include`), a `slot`, or a component
+ * whose output is not known (`MLElement#isUnresolvedComponent`).
+ *
+ * It is for a rule that asks which children an element has (the required children, the elements that
+ * satisfy a query). It looks at the child alone: a descendant of the child is not a child of the
+ * element, so what it renders cannot become the child that the rule asks for, and the attributes of
+ * a child do not decide whether the child exists. `MLElement#hasMutableChildren` looks at every
+ * descendant, which is the question for a rule that asks what the descendants are or have.
+ * `require-datetime` asks about the text, which any descendant may change, and looks at every
+ * descendant for an unresolved component itself.
+ *
+ * @template T - The rule configuration value type
+ * @template O - The rule options type
+ * @param node - A child node of the element
+ * @param components - Whether a component whose output is not known counts. It does not when the
+ * rule evaluates the components by the name that they are written with
+ * @returns True if the node may stand for children that are not known
+ */
+export function mayRenderUnknownChildren(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-el, 
+node, components = true) {
+    if (node.is(node.MARKUPLINT_PREPROCESSOR_BLOCK)) {
+        return !node.blockBehavior;
+    }
+    return node.is(node.ELEMENT_NODE) && (node.localName === 'slot' || (components && node.isUnresolvedComponent()));
+}
+export function accnameMayBeMutable(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-document) {
-    if (el.hasMutableAttributes() || el.hasMutableChildren(true)) {
+el) {
+    if (el.hasMutableAttributes() || el.hasMutableChildren(true, isSlotOfUnknownAssignment)) {
         return true;
     }
-    const ownedLabel = getOwnedLabel(el, document);
-    if (ownedLabel && (ownedLabel.hasMutableAttributes() || ownedLabel.hasMutableChildren(true))) {
+    const ownedLabel = getOwnedLabel(el);
+    if (ownedLabel &&
+        (ownedLabel.hasMutableAttributes() || ownedLabel.hasMutableChildren(true, isSlotOfUnknownAssignment))) {
         return true;
     }
     return false;
 }
+/**
+ * Whether a `slot` renders what the markup does not tell: the nodes assigned to it, or its children, are
+ * not known (`MLElement#getAssignedNodes` is `null`). A slot whose assignment is known renders them, which
+ * the rule reads itself.
+ *
+ * @param slot - A `slot` element
+ * @returns `true` if what the slot renders is not known
+ */
+function isSlotOfUnknownAssignment(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+slot) {
+    return slot.getAssignedNodes() === null;
+}
 /**
  * Whether the accessible name of `el` may be rendered by content the pretender
  * does not know: an unknown entry (`{ dynamic: true }`) in the `contents` of
@@ -286,41 +437,48 @@ document) {
  */
 export function accnameMayComeFromUnknownContent(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-el, 
-// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-document) {
+el) {
     if (hasUnknownContent(el)) {
         return true;
     }
-    const labelledby = el.getAttribute('aria-labelledby');
+    const labelledbyAttr = el.getAttributeNode('aria-labelledby');
+    const labelledby = labelledbyAttr?.value;
     if (labelledby) {
         const referenced = labelledby
             .trim()
             .split(/\s+/)
-            .map(id => document.querySelector(`#${escapeCSS(id)}`));
+            .map(id => getElementByIdInTree(el, id, labelledbyAttr.isExpressionValue));
         if (referenced.some(target => target && hasUnknownContent(target))) {
             return true;
         }
     }
-    const ownedLabel = getOwnedLabel(el, document);
+    const ownedLabel = getOwnedLabel(el);
     return !!ownedLabel && hasUnknownContent(ownedLabel);
 }
 /**
- * Walks the same children the accname resolver of `@markuplint/ml-core` does:
- * for a pretended element, the children the component renders (`as.childNodes`,
- * placed into `contents`), so that a nested component contributes its own
- * `contents`; otherwise the children as written. A hidden child is skipped
- * because the name computation never reads it (`isHidden` in that resolver).
+ * Walks the children {@link getRenderedChildNodes} returns. A hidden child is
+ * skipped because the name computation never reads it (`isHidden` in that resolver).
+ *
+ * A `template` whose shadow root is only maybe attached returns `true` before
+ * that walk. Its content is omitted from the computed name, so an ancestor
+ * whose computed name is empty is not reported: the rule calls this only after
+ * the computed name is empty. Light DOM text that remains in the computed name
+ * is still a name, and the rule does not reach this function.
+ *
+ * Unknown `contents` of a pretended component count only when no declarative
+ * shadow root is attached to it: the shadow root is rendered in their place.
  */
 function hasUnknownContent(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
 el) {
     const context = el.pretenderContext;
-    if (context?.type === 'pretender' && context.slotContent?.mutable) {
+    if (context?.type === 'pretender' && context.slotContent?.mutable && !el.declarativeShadowRoot) {
         return true;
     }
-    const given = context?.type === 'pretender' ? [...context.as.childNodes] : [...el.childNodes];
-    const children = context?.type === 'pretender' && context.slotContent ? context.slotContent.fill(given) : given;
+    if (context?.type !== 'pretender' && el.isHTMLTemplateElement && el.declarativeShadowRootAttachment === 'unknown') {
+        return true;
+    }
+    const children = [...getRenderedChildNodes(el)];
     return children.some(child => child.is(child.ELEMENT_NODE) &&
         child.getAttribute('aria-hidden') !== 'true' &&
         !child.hasAttribute('hidden') &&
@@ -329,17 +487,17 @@ el) {
 export const labelable = ['button', 'input:not([type=hidden])', 'meter', 'output', 'progress', 'select', 'textarea'];
 export function getOwnedLabel(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-el, 
-// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-document) {
+el) {
     if (!labelable.some(cond => el.matches(cond))) {
         return null;
     }
     let ownedLabel = el.closest('label');
     if (!ownedLabel) {
-        const id = el.getAttribute('id');
+        const id = getDOMValue(el.getAttributeNode('id'));
         if (id) {
-            ownedLabel = document.querySelector(`label[for="${id}"]`);
+            // The label is looked for in the tree of the element, and the two values are compared as the DOM has them
+            ownedLabel =
+                querySelectorAllInTree(el, 'label[for]').find(label => getDOMValue(label.getAttributeNode('for')) === id) ?? null;
         }
     }
     return ownedLabel;

package/lib/input-list-references-datalist/index.js

@@ -1,4 +1,5 @@
 import { createRule } from '@markuplint/ml-core';
+import { getElementByIdInTree } from '../helpers.js';
 import meta from './meta.js';
 /**
  * Require the `list` attribute on an `<input>` element to reference an
@@ -28,8 +29,7 @@ export default createRule({
                 return;
             if (listAttr.isDynamicValue)
                 return;
-            const targetId = listAttr.value;
-            const target = [...document.querySelectorAll('[id]')].find(candidate => candidate.getAttribute('id') === targetId);
+            const target = getElementByIdInTree(el, listAttr.value, listAttr.isExpressionValue);
             // Existence is checked by `no-refer-to-non-existent-id`. If the ID does not resolve
             // here, leave that diagnostic to the dedicated rule and stay silent.
             if (!target)
@@ -40,7 +40,7 @@ export default createRule({
                     line: listAttr.valueNode?.startLine,
                     col: listAttr.valueNode?.startCol,
                     raw: listAttr.valueNode?.raw,
-                    message: t('The "{0}" attribute of the "{1}" element must reference a "{2}" element', 'list', 'input', 'datalist'),
+                    message: t('The "{0*}" attribute of the "{1*}" element must reference a "{2*}" element', 'list', 'input', 'datalist'),
                 });
             }
         });

package/lib/itemprop-requires-itemscope/index.js

@@ -1,4 +1,5 @@
 import { createRule } from '@markuplint/ml-core';
+import { getDOMValue } from '../helpers.js';
 import meta from './meta.js';
 /**
  * Rule that requires every `itemprop` to belong to an item.
@@ -28,24 +29,40 @@ export default createRule({
         // once and then check each `[itemprop]` against the union set.
         // `itemref="  "` (whitespace-only) yields zero tokens and contributes
         // no entries to the set; orphans referencing such a host stay orphans.
-        const itemrefIds = new Set();
-        const itemrefHosts = document.querySelectorAll('[itemscope][itemref]');
+        // The ids are collected by tree: the content of a `template` element and a declarative shadow
+        // root are trees of their own, which an `itemref` does not reach out of, and the elements of
+        // every tree are checked.
+        // An `itemref` that is not known until it is rendered may reach any element of its tree, so
+        // that tree is not checked.
+        const itemrefIdsOfTree = new Map();
+        const treesWithDynamicItemref = new Set();
+        const itemrefHosts = document.deepQuerySelectorAll('[itemscope][itemref]');
         for (const host of itemrefHosts) {
-            const value = host.getAttribute('itemref') ?? '';
-            for (const token of value.split(/\s+/)) {
-                if (token)
-                    itemrefIds.add(token);
+            const root = host.getRootNode();
+            let itemrefIds = itemrefIdsOfTree.get(root);
+            if (!itemrefIds) {
+                itemrefIds = new Set();
+                itemrefIdsOfTree.set(root, itemrefIds);
+            }
+            const itemref = host.getAttributeNode('itemref');
+            if (itemref?.isDynamicValue) {
+                treesWithDynamicItemref.add(root);
+            }
+            for (const token of itemref?.value.split(/\s+/) ?? []) {
+                const id = token ? getDOMValue(itemref, token) : null;
+                if (id != null)
+                    itemrefIds.add(id);
             }
         }
-        const itempropEls = document.querySelectorAll('[itemprop]');
+        const itempropEls = document.deepQuerySelectorAll('[itemprop]');
         for (const el of itempropEls) {
             const hasAncestorScope = el.closest('[itemscope]') != null;
-            const id = el.getAttribute('id');
-            const isItemrefTarget = id != null && id !== '' && itemrefIds.has(id);
-            if (!hasAncestorScope && !isItemrefTarget) {
+            const id = getDOMValue(el.getAttributeNode('id'));
+            const isItemrefTarget = id != null && id !== '' && !!itemrefIdsOfTree.get(el.getRootNode())?.has(id);
+            if (!hasAncestorScope && !isItemrefTarget && !treesWithDynamicItemref.has(el.getRootNode())) {
                 report({
                     scope: el,
-                    message: t('{0} must {1}', t('the {0}', 'element'), 'belong to an item via an ancestor `itemscope` or be referenced by an `itemref`'),
+                    message: t('{0} must belong to an item via an ancestor `itemscope` or be referenced by an `itemref`', t('the {0}', 'element')),
                 });
             }
         }

package/lib/label-for-references-labelable/index.js

@@ -1,4 +1,5 @@
 import { createRule } from '@markuplint/ml-core';
+import { getElementByIdInTree } from '../helpers.js';
 import meta from './meta.js';
 /**
  * Labelable elements per HTML LS §4.10.2 *Categories: Labelable elements*.
@@ -51,8 +52,7 @@ export default createRule({
                 return;
             if (forAttr.isDynamicValue)
                 return;
-            const targetId = forAttr.value;
-            const target = [...document.querySelectorAll('[id]')].find(candidate => candidate.getAttribute('id') === targetId);
+            const target = getElementByIdInTree(el, forAttr.value, forAttr.isExpressionValue);
             // Existence is checked by `no-refer-to-non-existent-id`. If the ID does not resolve
             // here, leave that diagnostic to the dedicated rule and stay silent.
             if (!target)
@@ -63,7 +63,7 @@ export default createRule({
                     line: forAttr.valueNode?.startLine,
                     col: forAttr.valueNode?.startCol,
                     raw: forAttr.valueNode?.raw,
-                    message: t('The "{0}" attribute of the "{1}" element must reference a labelable element', 'for', 'label'),
+                    message: t('The "{0*}" attribute of the "{1*}" element must reference a labelable element', 'for', 'label'),
                 });
             }
         });

package/lib/label-has-control/index.d.ts

@@ -4,6 +4,23 @@
  * this rule performs — a `<label>` with an excess of descendant controls is
  * `label-no-multiple-controls`'s responsibility, which also accounts for the
  * `for`-references-an-external-control case that this rule does not see.
+ *
+ * An element inside a conditional preprocessor block counts, because the
+ * branch that renders it puts that element in the label's tree:
+ *
+ * > If the `for` attribute is not specified, but the `label` element has a labelable element descendant, then the first such descendant in tree order is the `label` element's labeled control.
+ *
+ * @see https://html.spec.whatwg.org/multipage/forms.html#labeled-control
+ *
+ * `children` does not list that element, because a conditional block is not
+ * flattened into `childNodes`. This rule still treats any element in
+ * `children` or in a `conditionalChildNodes()` branch as enough; it does not
+ * check that the element is labelable.
+ *
+ * A block that is not a fragment and has no `blockBehavior` is neither
+ * flattened nor a branch, so an element that exists only inside it is not
+ * counted. A Svelte `{#snippet}` is that kind of block: its body is a
+ * definition, not a branch rendered where the block is written.
  */
 declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<import("@markuplint/ml-core").RuleConfigValue, undefined>>;
 export default _default;

package/lib/label-has-control/index.js

@@ -6,6 +6,23 @@ import meta from './meta.js';
  * this rule performs — a `<label>` with an excess of descendant controls is
  * `label-no-multiple-controls`'s responsibility, which also accounts for the
  * `for`-references-an-external-control case that this rule does not see.
+ *
+ * An element inside a conditional preprocessor block counts, because the
+ * branch that renders it puts that element in the label's tree:
+ *
+ * > If the `for` attribute is not specified, but the `label` element has a labelable element descendant, then the first such descendant in tree order is the `label` element's labeled control.
+ *
+ * @see https://html.spec.whatwg.org/multipage/forms.html#labeled-control
+ *
+ * `children` does not list that element, because a conditional block is not
+ * flattened into `childNodes`. This rule still treats any element in
+ * `children` or in a `conditionalChildNodes()` branch as enough; it does not
+ * check that the element is labelable.
+ *
+ * A block that is not a fragment and has no `blockBehavior` is neither
+ * flattened nor a branch, so an element that exists only inside it is not
+ * counted. A Svelte `{#snippet}` is that kind of block: its body is a
+ * definition, not a branch rendered where the block is written.
  */
 export default createRule({
     meta: meta,
@@ -21,7 +38,17 @@ export default createRule({
             if (el.pretenderContext?.type === 'pretender' && !el.hasAttribute('as')) {
                 return;
             }
-            if (el.children.length === 0 && !el.hasAttribute('for')) {
+            // `for` already associates the label, so the branch walk is wasted there.
+            // `children` already includes elements of an `each` block. A conditional
+            // block is not flattened, so look through its branches only when
+            // `children` is empty. One branch that contains an element is enough:
+            // the branches that never render together stay out of `children`.
+            if (el.hasAttribute('for')) {
+                return;
+            }
+            const hasElementInSomeBranch = el.children.length > 0 ||
+                el.conditionalChildNodes().some(branch => [...branch].some(node => node.is(node.ELEMENT_NODE)));
+            if (!hasElementInSomeBranch) {
                 report({
                     scope: el,
                     message: t('{0} should associate with {1}', t('The "{0*}" {1}', 'label', 'element'), t('a {0}', 'control')),

package/lib/label-no-multiple-controls/index.d.ts

@@ -21,11 +21,10 @@
  * `label-for-references-labelable`. This rule only inspects the label
  * subtree once the target's category has been classified.
  *
- * The `for` target lookup uses `document.querySelectorAll('[id]')` per
- * matching label, not a cached id map. Kept in sync with
- * `label-for-references-labelable` on purpose — the number of `<label>`
- * elements per document is typically small, so a shared id-index would
- * amortize poorly and split rule ownership across a helper module.
+ * The `for` target is resolved as `label-for-references-labelable` does it: in the tree of the
+ * label, so an id in the content of a `template` element is not the target of a label outside of
+ * it. The controls under the label are the ones of its own tree as well: what is in the content of
+ * a `template` element under the label is not a descendant of it.
  */
 declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<boolean, null>>;
 export default _default;

package/lib/label-no-multiple-controls/index.js

@@ -1,4 +1,5 @@
 import { createRule } from '@markuplint/ml-core';
+import { getElementByIdInTree } from '../helpers.js';
 import meta from './meta.js';
 /**
  * The HTML LS list of form-control descendants that may appear under a
@@ -48,11 +49,10 @@ const LABELABLE_SELECTOR = [
  * `label-for-references-labelable`. This rule only inspects the label
  * subtree once the target's category has been classified.
  *
- * The `for` target lookup uses `document.querySelectorAll('[id]')` per
- * matching label, not a cached id map. Kept in sync with
- * `label-for-references-labelable` on purpose — the number of `<label>`
- * elements per document is typically small, so a shared id-index would
- * amortize poorly and split rule ownership across a helper module.
+ * The `for` target is resolved as `label-for-references-labelable` does it: in the tree of the
+ * label, so an id in the content of a `template` element is not the target of a label outside of
+ * it. The controls under the label are the ones of its own tree as well: what is in the content of
+ * a `template` element under the label is not a descendant of it.
  */
 export default createRule({
     meta: meta,
@@ -72,7 +72,7 @@ export default createRule({
             const hasExternalLabeledControl = (() => {
                 if (!forAttr || forAttr.isDynamicValue)
                     return false;
-                const target = [...document.querySelectorAll('[id]')].find(candidate => candidate.getAttribute('id') === forAttr.value);
+                const target = getElementByIdInTree(el, forAttr.value, forAttr.isExpressionValue);
                 if (!target)
                     return false;
                 // A descendant with a matching id is still the label's labeled control
@@ -86,7 +86,7 @@ export default createRule({
                 for (const control of controls) {
                     report({
                         scope: control,
-                        message: t('The "{0}" element must not contain a form-control descendant when the "{1}" attribute references an external labelable element', 'label', 'for'),
+                        message: t('The "{0*}" element must not contain a form-control descendant when the "{1*}" attribute references an external labelable element', 'label', 'for'),
                     });
                 }
                 return;
@@ -96,7 +96,7 @@ export default createRule({
             for (const control of controls.slice(1)) {
                 report({
                     scope: control,
-                    message: t('The "{0}" element may contain at most one form-control descendant ({1})', 'label', 'button, input, meter, output, progress, select, or textarea'),
+                    message: t('The "{0*}" element may contain at most one form-control descendant ({1})', 'label', 'button, input, meter, output, progress, select, or textarea'),
                 });
             }
         });

package/lib/landmark-roles/roles.d.ts

@@ -1,4 +1,4 @@
-import type { Element } from '@markuplint/ml-core';
+import type { Document, Element } from '@markuplint/ml-core';
 import type { PlainData } from '@markuplint/ml-config';
 /**
  * Shared by the two rules split out of the former `landmark-roles` rule:
@@ -23,6 +23,18 @@ export type RoleSet<O extends PlainData> = {
 export declare function computeLandmarkRoles<O extends PlainData>(document: {
     querySelectorAll(selector: string): Iterable<Element<boolean, O>>;
 }): RoleSet<O>;
+/**
+ * Collects the landmark-role elements of every tree of the document: the document itself, and the
+ * content of each `template` element and each declarative shadow root, which are trees of their own.
+ * Where the content of a `template` ends up in a document is not known from the markup, so its
+ * landmarks are not counted with the ones of the document, nor does an ancestor of the document make
+ * them nested.
+ *
+ * @template O - The rule options type
+ * @param document - The document to search.
+ * @returns The mapping from role to its matched elements, one for each tree.
+ */
+export declare function computeLandmarkRolesOfEachTree<O extends PlainData>(document: Document<boolean, O>): RoleSet<O>[];
 /**
  * Collects all UUIDs of elements that have landmark roles.
  *

package/lib/landmark-roles/roles.js

@@ -60,6 +60,28 @@ document) {
     roles.contentinfo.push(...footers);
     return roles;
 }
+/**
+ * Collects the landmark-role elements of every tree of the document: the document itself, and the
+ * content of each `template` element and each declarative shadow root, which are trees of their own.
+ * Where the content of a `template` ends up in a document is not known from the markup, so its
+ * landmarks are not counted with the ones of the document, nor does an ancestor of the document make
+ * them nested.
+ *
+ * @template O - The rule options type
+ * @param document - The document to search.
+ * @returns The mapping from role to its matched elements, one for each tree.
+ */
+export function computeLandmarkRolesOfEachTree(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+document) {
+    const trees = [document];
+    for (const template of document.deepQuerySelectorAll('template')) {
+        if (template.content) {
+            trees.push(template.content);
+        }
+    }
+    return trees.map(tree => computeLandmarkRoles(tree));
+}
 /**
  * An element already collected through its explicit `role` attribute (e.g.
  * `<header role="banner">`) must not be added a second time by the implicit

package/lib/link-types/index.js

@@ -122,28 +122,28 @@ function validateWhatwgKeyword(def, context, t) {
     switch (context) {
         case 'link': {
             if (def.link === 'not allowed') {
-                return t('The "{0*}" {1} is not allowed on the {2}', def.keyword, 'keyword', '"link" element');
+                return t('The "{0*}" {1} is not allowed on {2}', def.keyword, 'keyword', t('the "{0*}" {1}', 'link', 'element'));
             }
             return null;
         }
         case 'body-link': {
             if (def.link === 'not allowed') {
-                return t('The "{0*}" {1} is not allowed on the {2}', def.keyword, 'keyword', '"link" element');
+                return t('The "{0*}" {1} is not allowed on {2}', def.keyword, 'keyword', t('the "{0*}" {1}', 'link', 'element'));
             }
             if (def.bodyOk !== 'Yes') {
-                return t('The "{0*}" {1} is not allowed on the {2} inside the {3}', def.keyword, 'keyword', '"link" element', '"body" element');
+                return t('The "{0*}" {1} is not allowed on {2} inside {3}', def.keyword, 'keyword', t('the "{0*}" {1}', 'link', 'element'), t('the "{0*}" {1}', 'body', 'element'));
             }
             return null;
         }
         case 'a-area': {
             if (def.a === 'not allowed') {
-                return t('The "{0*}" {1} is not allowed on the {2}', def.keyword, 'keyword', '"a" element');
+                return t('The "{0*}" {1} is not allowed on {2}', def.keyword, 'keyword', t('the "{0*}" {1}', 'a', 'element'));
             }
             return null;
         }
         case 'form': {
             if (def.form === 'not allowed') {
-                return t('The "{0*}" {1} is not allowed on the {2}', def.keyword, 'keyword', '"form" element');
+                return t('The "{0*}" {1} is not allowed on {2}', def.keyword, 'keyword', t('the "{0*}" {1}', 'form', 'element'));
             }
             return null;
         }
@@ -161,19 +161,19 @@ function validateMicroformatContext(def, context, t) {
         case 'link':
         case 'body-link': {
             if (!def.link) {
-                return t('The "{0*}" {1} is not allowed on the {2}', def.keyword, 'keyword', '"link" element');
+                return t('The "{0*}" {1} is not allowed on {2}', def.keyword, 'keyword', t('the "{0*}" {1}', 'link', 'element'));
             }
             return null;
         }
         case 'a-area': {
             if (!def.a) {
-                return t('The "{0*}" {1} is not allowed on the {2}', def.keyword, 'keyword', '"a" element');
+                return t('The "{0*}" {1} is not allowed on {2}', def.keyword, 'keyword', t('the "{0*}" {1}', 'a', 'element'));
             }
             return null;
         }
         case 'form': {
             // Microformats don't define form context; reject
-            return t('The "{0*}" {1} is not allowed on the {2}', def.keyword, 'keyword', '"form" element');
+            return t('The "{0*}" {1} is not allowed on {2}', def.keyword, 'keyword', t('the "{0*}" {1}', 'form', 'element'));
         }
     }
 }