@markuplint/rules 5.4.0 → 5.5.0

package/lib/sizes-auto-requires-lazy-loading/index.d.ts

@@ -9,8 +9,10 @@
  * `auto` (`allowsAutoSizes`), not `loading="lazy"` alone.
  *
  * Gated on `srcset` being present, matching the source rule this was split
- * from: `sizes="auto"` has nothing to auto-size without candidates to choose
- * from.
+ * from. An `<img>` without `srcset` is left to the `@markuplint/html-spec`
+ * data of its `sizes`: the condition allows it only on a lazily loaded image
+ * (`no-disallowed-attr`) and the type only as the value `auto`
+ * (`no-invalid-attr-value`).
  */
 declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<boolean, undefined>>;
 export default _default;

package/lib/sizes-auto-requires-lazy-loading/index.js

@@ -13,8 +13,10 @@ import meta from './meta.js';
  * `auto` (`allowsAutoSizes`), not `loading="lazy"` alone.
  *
  * Gated on `srcset` being present, matching the source rule this was split
- * from: `sizes="auto"` has nothing to auto-size without candidates to choose
- * from.
+ * from. An `<img>` without `srcset` is left to the `@markuplint/html-spec`
+ * data of its `sizes`: the condition allows it only on a lazily loaded image
+ * (`no-disallowed-attr`) and the type only as the value `auto`
+ * (`no-invalid-attr-value`).
  */
 export default createRule({
     meta,

package/lib/usemap-references-map/index.js

@@ -1,4 +1,5 @@
 import { createRule } from '@markuplint/ml-core';
+import { getDOMValue, querySelectorAllInTree } from '../helpers.js';
 import meta from './meta.js';
 /**
  * Require the `usemap` attribute on an `<img>` element to be a valid
@@ -27,11 +28,19 @@ export default createRule({
                 return;
             if (usemapAttr.isDynamicValue)
                 return;
-            const value = usemapAttr.value;
+            // The character references are resolved on both sides, as the DOM has the strings
+            const value = getDOMValue(usemapAttr) ?? usemapAttr.value;
             if (!value.startsWith('#') || value.length <= 1)
                 return;
             const targetName = value.slice(1);
-            const target = [...document.querySelectorAll('map')].find(candidate => candidate.getAttribute('name') === targetName);
+            const target = querySelectorAllInTree(el, 'map').find(candidate => {
+                const name = candidate.getAttributeNode('name');
+                if (!name) {
+                    return false;
+                }
+                // A name that is not known until it is rendered may be the one that the reference means
+                return name.isDynamicValue || getDOMValue(name) === targetName;
+            });
             if (!target) {
                 report({
                     scope: usemapAttr,

package/lib/valid-speculation-rules/index.js

@@ -216,7 +216,7 @@ function validateUrls(urls, label, reportAt, t) {
  * Validate a document-rule `where` predicate. A predicate object must contain
  * exactly one of `and` / `or` / `not` / `href_matches` / `selector_matches`.
  *
- * @see https://wicg.github.io/nav-speculation/speculation-rules.html#document-rule-predicates
+ * @see https://html.spec.whatwg.org/multipage/speculative-loading.html#parse-a-document-rule-predicate
  */
 function validatePredicate(predicate, label, reportAt, t) {
     if (!isPlainObject(predicate)) {

package/lib/wai-aria/checkings/interaction-in-hidden.js

@@ -1,4 +1,4 @@
-import { mayBeFocusable } from '@markuplint/ml-spec';
+import { getComposedParentElement, mayBeFocusable } from '@markuplint/ml-spec';
 /**
  * Checks whether a focusable interactive element is inside an `aria-hidden=true` subtree.
  *
@@ -38,6 +38,10 @@ export const checkingInteractionInHidden = ({ el }) => t => {
 /**
  * Traverses the element's ancestor chain to find the closest element with `aria-hidden="true"`.
  *
+ * The chain is the one the accessibility tree is built from ({@link getComposedParentElement}): it ends at the
+ * top of the content of an ordinary `template` element, which is not rendered and whose placement is not known,
+ * and it goes on from a declarative shadow root to its host.
+ *
  * @param el - The element to start searching from (inclusive).
  * @returns The `aria-hidden` attribute node if found, or `null` if no ancestor is hidden.
  */
@@ -50,7 +54,7 @@ el) {
         if (ariaHidden?.value === 'true') {
             return ariaHidden;
         }
-        current = current.parentElement;
+        current = getComposedParentElement(current);
     }
     return null;
 }

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/required-accessibility-parent-role.js

@@ -23,7 +23,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;
     }

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

@@ -9,15 +9,14 @@
  * @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;
     }
@@ -35,10 +34,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 +53,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 +70,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 +87,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': {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/rules",
-	"version": "5.4.0",
+	"version": "5.5.0",
 	"description": "Built-in rules of markuplint",
 	"repository": {
 		"type": "git",
@@ -31,21 +31,21 @@
 		"./lib/permitted-contents/debug.js": "./lib/permitted-contents/debug.browser.js"
 	},
 	"dependencies": {
-		"@markuplint/html-spec": "5.4.0",
-		"@markuplint/ml-config": "5.4.0",
-		"@markuplint/ml-core": "5.4.0",
-		"@markuplint/ml-spec": "5.4.0",
-		"@markuplint/selector": "5.4.0",
-		"@markuplint/shared": "5.4.0",
-		"@markuplint/types": "5.4.0",
-		"@mdn/browser-compat-data": "^8.1.6",
+		"@markuplint/html-spec": "5.5.0",
+		"@markuplint/ml-config": "5.5.0",
+		"@markuplint/ml-core": "5.5.0",
+		"@markuplint/ml-spec": "5.5.0",
+		"@markuplint/selector": "5.5.0",
+		"@markuplint/shared": "5.5.0",
+		"@markuplint/types": "5.5.0",
+		"@mdn/browser-compat-data": "^8.1.8",
 		"@types/debug": "^4.1.13",
 		"ansi-colors": "^4.1.3",
-		"browserslist": "^4.29.3",
+		"browserslist": "^4.29.5",
 		"chrono-node": "^2.10.3",
 		"debug": "^4.4.3",
 		"image-size": "^2.0.4",
 		"type-fest": "^5.10.0"
 	},
-	"gitHead": "647f6fb5d5743f060678599c97e9c84b58970747"
+	"gitHead": "fedebcfd56eaec4642e68643b2f9e10750d810e1"
 }