@markuplint/rules 5.4.0 → 5.6.0

package/lib/wai-aria/checkings/presentational-children.js

@@ -1,5 +1,5 @@
-import { isAriaAttr, labelable, memoizeByObject, namespaceKeyOf } from '../../helpers.js';
-import { ARIA_RECOMMENDED_VERSION, EMBEDDED_CONTROL_ROLES, getComputedRole, getImplicitRole, isExposedAsPresentational, isNativeEmbeddedControl, } from '@markuplint/ml-spec';
+import { getDOMValue, getElementByIdInTree, isAriaAttr, labelable, memoizeByObject, namespaceKeyOf, } from '../../helpers.js';
+import { ARIA_RECOMMENDED_VERSION, EMBEDDED_CONTROL_ROLES, getComposedParentElement, getComputedRole, getImplicitRole, isExposedAsPresentational, isNativeEmbeddedControl, } from '@markuplint/ml-spec';
 /**
  * Checks whether an ARIA attribute or `role` is applied to a descendant of an
  * element whose role has the `childrenArePresentational` characteristic.
@@ -75,6 +75,9 @@ const getContext = memoizeByObject(
  * Finds the closest ancestor whose computed role has the
  * `childrenArePresentational` characteristic.
  *
+ * The ancestors are those of the accessibility tree ({@link getComposedParentElement}): the search ends at the
+ * top of the content of an ordinary `template` element, and it goes on from a declarative shadow root to its host.
+ *
  * @param el - The element to start searching from (exclusive, starts from parent).
  * @param ariaVersion - The ARIA version to compute the roles with.
  * @returns The role of that ancestor, or `null` if none is found.
@@ -82,13 +85,13 @@ const getContext = memoizeByObject(
 function getClosestPresentationalChildrenRole(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
 el, ariaVersion) {
-    let current = el.parentElement;
+    let current = getComposedParentElement(el);
     while (current) {
         const role = getComputedRole(el.ownerMLDocument.specs, current, ariaVersion).role;
         if (role?.childrenPresentational) {
             return role;
         }
-        current = current.parentElement;
+        current = getComposedParentElement(current);
     }
     return null;
 }
@@ -104,6 +107,10 @@ el, ariaVersion) {
  * - the accessible name of every control that a `label` ancestor can name: the
  *   element its `for` refers to, and its labelable descendants (HTML-AAM)
  *
+ * The ancestors are those of the accessibility tree ({@link getComposedParentElement}): an ancestor
+ * outside of the content of an ordinary `template` element reads nothing in it, as the content is not
+ * rendered there.
+ *
  * @see https://w3c.github.io/accname/#comp_name_from_content
  * @see https://w3c.github.io/accname/#comp_labelledby_traversal
  * @see https://w3c.github.io/html-aam/#accessible-name-and-description-computation
@@ -128,13 +135,17 @@ el, ariaVersion) {
         if (current !== el) {
             add(current);
         }
-        if (current.id && referenced.has(current.id) && document.getElementById(current.id) === current) {
+        // An `aria-labelledby` refers to an element of its own tree
+        const idValue = getDOMValue(current.getAttributeNode('id'));
+        if (idValue &&
+            referenced.get(current.getRootNode())?.has(idValue) &&
+            getElementByIdInTree(current, idValue, true) === current) {
             add(current, true);
         }
         for (const control of getLabeledControls(current)) {
             add(control);
         }
-        current = current.parentElement;
+        current = getComposedParentElement(current);
     }
     return visits;
 }
@@ -151,27 +162,36 @@ const getLabeledControls = memoizeByObject(
     if (el.localName !== 'label' || el.namespaceURI !== 'http://www.w3.org/1999/xhtml') {
         return [];
     }
-    const htmlFor = el.getAttribute('for');
-    const target = htmlFor == null ? null : el.ownerMLDocument.getElementById(htmlFor);
+    const forAttr = el.getAttributeNode('for');
+    const target = forAttr == null ? null : getElementByIdInTree(el, forAttr.value, forAttr.isExpressionValue);
     return [...(target ? [target] : []), ...el.querySelectorAll(labelable.join(', '))];
 });
 /**
- * The IDs that an `aria-labelledby` or `aria-describedby` of the document refers to.
+ * The IDs that an `aria-labelledby` or `aria-describedby` refers to, by the tree of the referrer: an
+ * id is resolved in the tree of the element that refers to it.
  */
 const getReferencedIds = memoizeByObject(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
 (document) => {
-    const ids = new Set();
-    for (const referrer of document.querySelectorAll('[aria-labelledby], [aria-describedby]')) {
+    const idsOfTree = new Map();
+    for (const referrer of document.deepQuerySelectorAll('[aria-labelledby], [aria-describedby]')) {
+        const root = referrer.getRootNode();
+        let ids = idsOfTree.get(root);
+        if (!ids) {
+            ids = new Set();
+            idsOfTree.set(root, ids);
+        }
         for (const name of ['aria-labelledby', 'aria-describedby']) {
-            for (const id of referrer.getAttribute(name)?.split(/\s+/) ?? []) {
-                if (id !== '') {
-                    ids.add(id);
+            const attr = referrer.getAttributeNode(name);
+            for (const id of attr?.value.split(/\s+/) ?? []) {
+                const domId = id === '' ? null : getDOMValue(attr, id);
+                if (domId != null) {
+                    ids.add(domId);
                 }
             }
         }
     }
-    return ids;
+    return idsOfTree;
 });
 /**
  * Whether the attribute changes what its element contributes to a text
@@ -275,11 +295,12 @@ el, computed) {
 function labelledbyGivesText(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
 el, ariaVersion) {
-    return (el.getAttribute('aria-labelledby')?.split(/\s+/) ?? []).some(id => {
+    const labelledbyAttr = el.getAttributeNode('aria-labelledby');
+    return (labelledbyAttr?.value.split(/\s+/) ?? []).some(id => {
         if (id === '') {
             return false;
         }
-        const referenced = el.ownerMLDocument.getElementById(id);
+        const referenced = getElementByIdInTree(el, id, labelledbyAttr?.isExpressionValue);
         return referenced != null && referenced.getReferencedTextAlternative(ariaVersion) !== '';
     });
 }

package/lib/wai-aria/checkings/redundant-aria-prop.js

@@ -44,7 +44,7 @@ export const checkingRedundantAriaProp = ({ attr, propSpecs, attrSpecs }) => t =
         if ((equivalentHtmlAttr.value == null && targetAttrValue === value) || equivalentHtmlAttr.value === value) {
             return {
                 scope: attr,
-                message: t('{0} has {1}', t('the "{0*}" {1}', attr.name, `ARIA ${propSpec.type}`), t('the same {0} as {1}', 'semantics', t('{0} or {1}', t('the current "{0}" {1}', equivalentHtmlAttr.htmlAttrName, 'attribute'), t('the implicit "{0}" {1}', equivalentHtmlAttr.htmlAttrName, 'attribute')))),
+                message: t('{0} has {1}', t('the "{0*}" {1}', attr.name, `ARIA ${propSpec.type}`), t('the same {0} as {1}', 'semantics', t('{0} or {1}', t('the current "{0*}" {1}', equivalentHtmlAttr.htmlAttrName, 'attribute'), t('the implicit "{0*}" {1}', equivalentHtmlAttr.htmlAttrName, 'attribute')))),
             };
         }
     }

package/lib/wai-aria/checkings/required-accessibility-parent-role.js

@@ -1,4 +1,5 @@
 import { ARIA_RECOMMENDED_VERSION, ariaSpecs } from '@markuplint/ml-spec';
+import { noTranslate } from '../../no-translate.js';
 /**
  * Checks whether an element with an explicit role satisfies its
  * "Required Accessibility Parent Role" (called "Required Context Role" in ARIA 1.2).
@@ -23,7 +24,8 @@ export const checkingRequiredAccessibilityParentRole = ({ el, computed }) => t =
         (computed.errorType !== 'INVALID_REQUIRED_CONTEXT_ROLE' &&
             // NO_OWNER with role: null means all ancestors were transparent
             // and no valid context could be found. NO_OWNER with role kept
-            // (parentElement === null) is a root fragment — skip.
+            // (no parent in the accessibility tree) is a root fragment, or the top
+            // of the content of an ordinary `template` element — skip.
             !(computed.errorType === 'NO_OWNER' && !computed.role))) {
         return;
     }
@@ -49,7 +51,7 @@ export const checkingRequiredAccessibilityParentRole = ({ el, computed }) => t =
                 message: t('{0} requires {1}', t('the "{0*}" {1}', roleSpec.name, 'role'), parentRoles.length === 1 && parentRoles[0]
                     ? t('an accessibility parent with the "{0*}" {1}', parentRoles[0], 'role')
                     : t('an accessibility parent with one of the {0}', 'roles') +
-                        `: ${t(parentRoles)}`),
+                        `: ${t(parentRoles.map(noTranslate))}`),
             };
         }
     }

package/lib/wai-aria/checkings/required-owned-elements.d.ts

@@ -11,6 +11,8 @@ import type { ARIARole } from '@markuplint/ml-spec';
  * preprocessor blocks, and mutable children from template engines.
  * For a pretended component, the owned elements are the ones the component renders
  * itself (`contents`) together with the children given to it, not the usage site alone.
+ * For a shadow host, they are the elements of its declarative shadow root, which is
+ * rendered in place of its light children (see `getOwnedChildNodes`).
  *
  * @see https://w3c.github.io/aria/#mustContain
  * @param el - The element node to inspect for allowed accessibility child roles.

package/lib/wai-aria/checkings/required-owned-elements.js

@@ -1,5 +1,6 @@
-import { ARIA_RECOMMENDED_VERSION, getComputedRole, isRequiredOwnedElement, isTransparentForOwnership, } from '@markuplint/ml-spec';
+import { ARIA_RECOMMENDED_VERSION, getComposedParentElement, getComputedRole, isRequiredOwnedElement, isSlotElement, isTransparentForOwnership, } from '@markuplint/ml-spec';
 import { expandChildren, isContentMutable } from '../../permitted-contents/slot-content.js';
+import { noTranslate } from '../../no-translate.js';
 /**
  * Checks whether an element with a role that has "Allowed Accessibility Child Roles"
  * (called "Required Owned Elements" in ARIA 1.2) actually contains children
@@ -10,6 +11,8 @@ import { expandChildren, isContentMutable } from '../../permitted-contents/slot-
  * preprocessor blocks, and mutable children from template engines.
  * For a pretended component, the owned elements are the ones the component renders
  * itself (`contents`) together with the children given to it, not the usage site alone.
+ * For a shadow host, they are the elements of its declarative shadow root, which is
+ * rendered in place of its light children (see `getOwnedChildNodes`).
  *
  * @see https://w3c.github.io/aria/#mustContain
  * @param el - The element node to inspect for allowed accessibility child roles.
@@ -37,10 +40,12 @@ export const checkingRequiredOwnedElements = ({ el, role }) => t => {
         return;
     }
     // TODO: Needs to resolve `aria-owns` references to include virtually owned elements.
-    // Currently, only DOM-tree children are checked. Elements referenced via `aria-owns`
-    // should also be considered as owned elements per the ARIA specification.
+    // Currently, only the child nodes (those of the shadow root for a shadow host) are checked.
+    // Elements referenced via `aria-owns` should also be considered as owned elements per the
+    // ARIA specification.
     const ariaVersion = el.rule.options?.version ?? el.ownerMLDocument.ruleCommonSettings?.ariaVersion ?? ARIA_RECOMMENDED_VERSION;
-    const children = classifyChildren(el, role, ariaVersion);
+    const ownedChildNodes = getOwnedChildNodes(el);
+    const children = classifyChildren(el, ownedChildNodes, role, ariaVersion);
     if (children.some(([, type]) => type === 'BUSY' || type === 'UNKNOWN')) {
         return;
     }
@@ -71,30 +76,30 @@ export const checkingRequiredOwnedElements = ({ el, role }) => t => {
      */
     // A virtual slot wrapper stands for the component, whose nodes are the ones given to it.
     const component = el.pretenderContext?.type === 'origin' ? el.pretenderContext.origin : el;
-    if (component.hasMutableChildren(true) || isContentMutable(component, 'pretended')) {
+    if (isOwnedContentMutable(component)) {
         return;
     }
-    if (mayBeBeforeCreated(getOwnedChildNodes(el) ?? [])) {
+    if (mayBeBeforeCreated(ownedChildNodes ?? [])) {
         return {
             scope: component,
             message: t('{0}. Or, {1}', t('{0} requires {1}', t('the {0}', 'child element'), role.allowedAccessibilityChildRoles.length === 1 && role.allowedAccessibilityChildRoles[0]
                 ? t('the "{0*}" {1}', role.allowedAccessibilityChildRoles[0], 'role')
-                : t('the {0}', 'roles') + `: ${t(role.allowedAccessibilityChildRoles)}`), t('require {0}', 'aria-busy="true"')),
+                : t('the {0}', 'roles') + `: ${t(role.allowedAccessibilityChildRoles.map(noTranslate))}`), t('require {0*}', 'aria-busy="true"')),
         };
     }
     return {
         scope: component,
         message: t('{0} expects {1}', t('the "{0*}" {1}', role.name, 'role'), role.allowedAccessibilityChildRoles.length === 1 && role.allowedAccessibilityChildRoles[0]
             ? t('the "{0*}" {1}', role.allowedAccessibilityChildRoles[0], 'role')
-            : t('the {0}', 'roles') + `: ${t(role.allowedAccessibilityChildRoles)}`),
+            : t('the {0}', 'roles') + `: ${t(role.allowedAccessibilityChildRoles.map(noTranslate))}`),
     };
 };
 /**
- * Determines whether the element's children may not yet exist (e.g., empty or
+ * Determines whether the owned child nodes may not yet exist (e.g., empty or
  * containing only `<script>` / `<template>` elements that could dynamically create content).
  *
- * @param el - The element to inspect.
- * @returns `true` if the element is empty or only contains script/template children.
+ * @param childNodes - The child nodes the element owns (see `getOwnedChildNodes`).
+ * @returns `true` if the nodes are empty or only contain script/template elements.
  */
 function mayBeBeforeCreated(childNodes) {
     if (childNodes.every(child => child.is(child.TEXT_NODE) && child.textContent?.trim() === '')) {
@@ -112,14 +117,14 @@ function mayBeBeforeCreated(childNodes) {
  * are evaluated as if they were direct children of the owning element.
  *
  * @param el - The parent element whose children to classify.
+ * @param childNodes - The child nodes `el` owns, from `getOwnedChildNodes`.
  * @param role - The ARIA role of the parent, which defines allowed child roles.
  * @param version - The WAI-ARIA version for version-gated transparency behavior.
  * @returns An array of classified child nodes.
  */
 function classifyChildren(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-el, role, version) {
-    const childNodes = getOwnedChildNodes(el);
+el, childNodes, role, version) {
     if (!childNodes) {
         return [[el, 'UNKNOWN']];
     }
@@ -130,24 +135,30 @@ el, role, version) {
                 result.push([child, 'BUSY']);
                 continue;
             }
+            if (isSlotElement(child)) {
+                result.push(...classifySlot(child, role, version));
+                continue;
+            }
             /**
-             * The role of a child is resolved against its DOM parent. A child that a pretender
-             * places somewhere other than under its DOM parent (a node given at the usage site
-             * that the component renders inside its slot wrapper, or an element a fragment
-             * component renders in place) would be judged against the wrong parent and lose
-             * its role, so it is resolved on its own.
+             * The role of a child is resolved against its parent in the accessibility tree,
+             * which is the host for a child at the top of a declarative shadow root. A child
+             * that a pretender places somewhere other than under that parent (a node given at
+             * the usage site that the component renders inside its slot wrapper, or an element
+             * a fragment component renders in place) would be judged against the wrong parent
+             * and lose its role, so it is resolved on its own.
              */
-            const computedChild = getComputedRole(child.ownerMLDocument.specs, child, version, child.parentElement !== el);
+            const computedChild = getComputedRole(child.ownerMLDocument.specs, child, version, getComposedParentElement(child) !== el);
             if (role.allowedAccessibilityChildRoles.some(ownedRole => isRequiredOwnedElement(computedChild.el, computedChild.role, ownedRole, child.ownerMLDocument.specs, version))) {
                 result.push([child, 'REQUIRED']);
                 continue;
             }
             if (isTransparentForOwnership(computedChild.role?.name, version)) {
-                if (isContentMutable(child, 'pretended')) {
+                const shadowRootTemplate = getShadowRootTemplate(child);
+                if (shadowRootTemplate !== 'unknown' && isContentMutable(shadowRootTemplate ?? child, 'pretended')) {
                     result.push([child, 'UNKNOWN']);
                     continue;
                 }
-                result.push(...classifyChildren(child, role, version));
+                result.push(...classifyChildren(child, getOwnedChildNodes(child), role, version));
                 continue;
             }
             result.push([child, 'OTHER']);
@@ -161,6 +172,45 @@ el, role, version) {
     }
     return result;
 }
+/**
+ * Classifies what a `slot` that the owned elements are looked for through renders: the nodes assigned to
+ * it, or its own children when none is, in its place. A slot is not an element of the accessibility tree.
+ *
+ * The slot is reached only through the elements that are transparent for ownership, so what it renders
+ * is owned by the element as if it were written in place of the slot. A slot that is not reached (one
+ * in a `p`, or in the content of a nested `template`) places nothing as an owned element, and is not
+ * looked at. Where the assignment is not known (a slot that is not in a shadow root, a framework's, manual
+ * assignment, template syntax among the light children), what it renders is not known: `UNKNOWN`.
+ *
+ * The light children assigned to the slot are not in the shadow root that the mutability gate reads
+ * (`isOwnedContentMutable`), so the template syntax and the mutable attributes in them are looked at
+ * here: a node that may not be what it is written as keeps the rule from deciding.
+ *
+ * > If slottables is the empty list, then append each slottable child of slot, in tree order, to slottables.
+ *
+ * @see https://dom.spec.whatwg.org/#find-flattened-slotables
+ * @param slot - The `slot` element
+ * @param role - The ARIA role of the owner, which defines allowed child roles.
+ * @param version - The WAI-ARIA version for version-gated transparency behavior.
+ * @returns The classified nodes the slot renders.
+ */
+function classifySlot(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+slot, role, version) {
+    const assigned = slot.getAssignedNodes();
+    if (!assigned) {
+        return [[slot, 'UNKNOWN']];
+    }
+    if (assigned.length === 0) {
+        return classifyChildren(slot, getOwnedChildNodes(slot), role, version);
+    }
+    const mutable = assigned.some(node => node.is(node.ELEMENT_NODE) &&
+        (node.hasMutableAttributes() || node.hasMutableChildren(true, isFlattenedSlot)));
+    if (mutable) {
+        return [[slot, 'UNKNOWN']];
+    }
+    return classifyChildren(slot, assigned, role, version);
+}
 /**
  * The child nodes that `el` owns as the page renders them.
  *
@@ -174,12 +224,37 @@ el, role, version) {
  * - Several slot wrappers leave the owner of each node unknown, so `null` is returned
  *   and nothing is claimed about the element.
  *
+ * A shadow host owns the child nodes of its declarative shadow root, of either mode, and
+ * nothing else: the shadow root is rendered in place of the light children, which include
+ * the `template` that declares it and what a pretended component renders itself. This
+ * comes first, as ml-core attaches the root to a pretended host that renders the children
+ * written in it in itself. A `template` written in a block or a `template` with a directive
+ * may not be rendered, so `null` is returned for it (`getShadowRootTemplate`). The light children
+ * are rendered only where a `slot` in the shadow root places them: the nodes assigned to it
+ * (`MLElement#getAssignedNodes`) are classified in its place, and the light children that
+ * no slot takes are not owned (`classifySlot`).
+ *
+ * `getRenderedChildNodes` of `@markuplint/ml-core` (the accessible name computation)
+ * resolves the rendered children in the same order, but does not expand fragment
+ * components.
+ *
+ * > […] the flat tree is the top-level DOM tree, but shadow hosts are filled with their shadow tree children instead of their light tree children […]
+ *
+ * @see https://drafts.csswg.org/css-shadow-1/#flattening
  * @param el - The element, or the virtual slot wrapper of a pretended component.
  * @returns The child nodes, or `null` when they cannot be known.
  */
 function getOwnedChildNodes(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
 el) {
+    // The content of the `template` is the shadow root, and holds the same nodes as its children.
+    const shadowRootTemplate = getShadowRootTemplate(el);
+    if (shadowRootTemplate === 'unknown') {
+        return null;
+    }
+    if (shadowRootTemplate) {
+        return expandChildren(shadowRootTemplate, [...shadowRootTemplate.childNodes], 'pretended');
+    }
     const context = el.pretenderContext;
     if (context?.type === 'pretender') {
         const wrapper = context.slotContent?.wrapper;
@@ -201,3 +276,82 @@ el) {
     }
     return expandChildren(el, [...el.childNodes], 'pretended');
 }
+/**
+ * Whether a `slot` is one that `classifyChildren` cannot see: a parser that makes the `slot` of its
+ * framework a fragment (Vue, Astro) has it flattened out of the child nodes, and what it renders is
+ * not known. Any other `slot` is classified where the owned elements reach it (`classifySlot`), and
+ * one that is not reached places nothing as an owned element.
+ *
+ * @param slot - A `slot` element
+ * @returns `true` if the slot is flattened out of the child nodes
+ */
+function isFlattenedSlot(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+slot) {
+    return slot.isFragment;
+}
+/**
+ * Whether the nodes `el` owns may be rendered by something the markup does not show:
+ * template syntax, a mutable attribute or a component that no pretender resolved among them
+ * (`hasMutableChildren`), or a pretender whose `contents` are unknown (`isContentMutable`).
+ * For a shadow host they are read in the shadow root, as that is what it owns: a light
+ * child that no `slot` places is not rendered, mutable or not.
+ *
+ * A `slot` is not counted here unless it is flattened out of the child nodes (`isFlattenedSlot`):
+ * `classifySlot` reads what it renders where the owned elements are looked for through it, and a slot
+ * that is not reached places nothing as an owned element.
+ *
+ * @param el - The element, or the component a virtual slot wrapper stands for.
+ * @returns `true` when the owned nodes may differ from the markup.
+ */
+function isOwnedContentMutable(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+el) {
+    const template = getShadowRootTemplate(el);
+    if (template === 'unknown') {
+        return true;
+    }
+    const scope = template ?? el;
+    return scope.hasMutableChildren(true, isFlattenedSlot) || isContentMutable(scope, 'pretended');
+}
+/**
+ * The `template` element whose content is the declarative shadow root of `host`, which ml-core
+ * exposes without the element.
+ *
+ * ml-core finds the `template` through what a template engine renders away (a block, a
+ * `template` with a directive such as `v-if`), as the id lookups need a tree either way. Such
+ * a wrapper, or a conditional branch that leaves the `template` out, may render it or not,
+ * and the host owns the shadow root or its light children accordingly. So what the host owns
+ * is unknown unless the `template` is written right in the host and in every branch of its
+ * children (`conditionalChildNodes`), and no block among them has a range that the syntax
+ * tree does not give.
+ *
+ * @param host - An element.
+ * @returns The `template` element; `'unknown'` when it is written in such a wrapper; `null`
+ *   when no shadow root is attached to `host`.
+ */
+function getShadowRootTemplate(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+host) {
+    const shadowRoot = host.declarativeShadowRoot;
+    if (!shadowRoot) {
+        return null;
+    }
+    // A block without a behavior may be a marker of a language whose blocks the syntax tree does
+    // not nest (`{% if %}` … `{% endif %}`), so whether it encloses the `template` is not known.
+    for (const child of host.getPureChildNodes()) {
+        if (child.is(child.MARKUPLINT_PREPROCESSOR_BLOCK) && !child.blockBehavior) {
+            return 'unknown';
+        }
+    }
+    for (const child of host.childNodes) {
+        if (child.is(child.ELEMENT_NODE) && child.content === shadowRoot) {
+            if (child.syntacticalParentNode !== host) {
+                return 'unknown';
+            }
+            const branches = host.conditionalChildNodes();
+            return branches.every(branch => [...branch].includes(child)) ? child : 'unknown';
+        }
+    }
+    return 'unknown';
+}

package/lib/wai-aria/checkings/required-prop.js

@@ -34,7 +34,8 @@ export const checkingRequiredProp = ({ el, role, propSpecs }) => t => {
         return true;
     });
     for (const { name: requiredProp } of requiredProps) {
-        const has = el.attributes.some(attr => attr.nameKey === requiredProp);
+        // An attribute that the framework does not output (`aria-checked={null}`) is not there
+        const has = el.attributes.some(attr => !attr.isAbsent && attr.nameKey === requiredProp);
         if (!has) {
             const propSpec = propSpecs.find(p => p.name === requiredProp);
             const ariaVersion = el.rule.options?.version ??

package/lib/wai-aria/checkings/tab-requires-tabpanel.js

@@ -1,4 +1,5 @@
 import { ARIA_RECOMMENDED_VERSION, getComputedRole } from '@markuplint/ml-spec';
+import { getDOMValue, getElementByIdInTree, querySelectorAllInTree } from '../../helpers.js';
 /**
  * Checks that an active `tab` role element has a corresponding `tabpanel` role element.
  *
@@ -30,21 +31,24 @@ export const checkingTabRequiresTabpanel = ({ el, role }) => t => {
             .split(/\s+/)
             .filter(Boolean)
             .some(id => {
-            const target = document.getElementById(id);
+            const target = getElementByIdInTree(el, id, controlsAttr.isExpressionValue);
             return !!target && isTabpanel(target);
         });
         if (hasControlledTabpanel) {
             return;
         }
     }
-    const idAttr = el.getAttributeNode('id');
-    if (idAttr && !idAttr.isDynamicValue) {
-        const tabId = idAttr.value;
-        const hasLabellingTabpanel = [...document.querySelectorAll('[aria-labelledby]')].some(candidate => {
+    // The tabpanel refers to the tab in the tree of the tab, and the ids are compared as the DOM has them
+    const tabId = getDOMValue(el.getAttributeNode('id'));
+    if (tabId != null) {
+        const hasLabellingTabpanel = querySelectorAllInTree(el, '[aria-labelledby]').some(candidate => {
             const labelledbyAttr = candidate.getAttributeNode('aria-labelledby');
             if (!labelledbyAttr || labelledbyAttr.isDynamicValue)
                 return false;
-            return labelledbyAttr.value.split(/\s+/).includes(tabId) && isTabpanel(candidate);
+            return (labelledbyAttr.value
+                .split(/\s+/)
+                .map(id => getDOMValue(labelledbyAttr, id))
+                .includes(tabId) && isTabpanel(candidate));
         });
         if (hasLabellingTabpanel) {
             return;

package/lib/wai-aria/checkings/value.d.ts

@@ -12,13 +12,11 @@ import type { ARIAProperty, ARIARole } from '@markuplint/ml-spec';
  * @param attr - The ARIA attribute node to inspect.
  * @param role - The computed ARIA role, used to resolve conditional value types.
  * @param propSpecs - The list of ARIA property specifications for value type lookup.
- * @param booleanish - Whether the document supports booleanish attribute values (e.g., JSX).
  * @returns A violation if the attribute value does not match the expected type.
  */
 export declare const checkingValue: AttrChecker<boolean, Options, {
     role?: ARIARole | null;
     propSpecs: readonly ARIAProperty[];
-    booleanish?: boolean;
 }>;
 /**
  * Validates a raw ARIA value against the expected value type defined in the specification.
@@ -30,7 +28,6 @@ export declare const checkingValue: AttrChecker<boolean, Options, {
  * @param type - The ARIA value type (e.g., `"token"`, `"true/false"`, `"integer"`).
  * @param value - The raw attribute value to validate.
  * @param tokenEnum - The list of allowed token values for token-based types.
- * @param booleanish - Whether empty string is accepted as a boolean `true` value.
  * @returns `true` if the value is valid for the given type, `false` otherwise.
  */
-export declare function checkAriaValue(type: string, value: string, tokenEnum: readonly string[], booleanish?: boolean): boolean;
+export declare function checkAriaValue(type: string, value: string, tokenEnum: readonly string[]): boolean;

package/lib/wai-aria/checkings/value.js

@@ -1,3 +1,4 @@
+import { noTranslate } from '../../no-translate.js';
 /**
  * Checks whether the value of an ARIA property or state conforms to its expected type.
  *
@@ -9,23 +10,22 @@
  * @param attr - The ARIA attribute node to inspect.
  * @param role - The computed ARIA role, used to resolve conditional value types.
  * @param propSpecs - The list of ARIA property specifications for value type lookup.
- * @param booleanish - Whether the document supports booleanish attribute values (e.g., JSX).
  * @returns A violation if the attribute value does not match the expected type.
  */
-export const checkingValue = ({ attr, role, propSpecs, booleanish }) => t => {
+export const checkingValue = ({ attr, role, propSpecs }) => t => {
     if (attr.isDynamicValue) {
         return;
     }
     const propSpec = propSpecs.find(p => p.name === attr.nameKey);
-    const result = checkAria(propSpec, attr.value, role?.name, booleanish);
+    const result = checkAria(propSpec, attr.value, role?.name);
     if (result.isValid) {
         return;
     }
     return {
         scope: attr,
-        message: t('{0:c} on {1}', t('{0} is {1:c}', t('the "{0}"', attr.value), 'disallowed'), t('the "{0*}" {1}', attr.name, `ARIA ${propSpec?.type ?? 'property'}`)) +
+        message: t('{0:c} on {1}', t('{0} is {1:c}', t('the "{0*}"', attr.value), 'disallowed'), t('the "{0*}" {1}', attr.name, `ARIA ${propSpec?.type ?? 'property'}`)) +
             ('enum' in result && result.enum.length > 0
-                ? t('. ') + t('Allowed values are: {0}', t(result.enum))
+                ? t('. ') + t('Allowed values are: {0}', t(result.enum.map(noTranslate)))
                 : ''),
     };
 };
@@ -35,10 +35,9 @@ export const checkingValue = ({ attr, role, propSpecs, booleanish }) => t => {
  * @param propSpec - The ARIA property specification, or `undefined` if the property is unknown.
  * @param currentValue - The current attribute value to validate.
  * @param role - The name of the computed role, used to resolve conditional value types.
- * @param booleanish - Whether booleanish values (empty string as `true`) are accepted.
  * @returns An object containing the validation result and, for enum types, the allowed values.
  */
-function checkAria(propSpec, currentValue, role, booleanish) {
+function checkAria(propSpec, currentValue, role) {
     if (!propSpec) {
         return {
             currentValue,
@@ -55,7 +54,7 @@ function checkAria(propSpec, currentValue, role, booleanish) {
             }
         }
     }
-    const isValid = checkAriaValue(valueType, currentValue, propSpec.enum, booleanish);
+    const isValid = checkAriaValue(valueType, currentValue, propSpec.enum);
     return {
         ...propSpec,
         currentValue,
@@ -72,10 +71,9 @@ function checkAria(propSpec, currentValue, role, booleanish) {
  * @param type - The ARIA value type (e.g., `"token"`, `"true/false"`, `"integer"`).
  * @param value - The raw attribute value to validate.
  * @param tokenEnum - The list of allowed token values for token-based types.
- * @param booleanish - Whether empty string is accepted as a boolean `true` value.
  * @returns `true` if the value is valid for the given type, `false` otherwise.
  */
-export function checkAriaValue(type, value, tokenEnum, booleanish) {
+export function checkAriaValue(type, value, tokenEnum) {
     switch (type) {
         case 'token': {
             return tokenEnum.includes(value);
@@ -90,21 +88,12 @@ export function checkAriaValue(type, value, tokenEnum, booleanish) {
             return true;
         }
         case 'true/false': {
-            if (booleanish && value === '') {
-                return true;
-            }
             return ['true', 'false'].includes(value);
         }
         case 'tristate': {
-            if (booleanish && value === '') {
-                return true;
-            }
             return ['mixed', 'true', 'false', 'undefined'].includes(value);
         }
         case 'true/false/undefined': {
-            if (booleanish && value === '') {
-                return true;
-            }
             return ['true', 'false', 'undefined'].includes(value);
         }
         case 'integer': {