@markuplint/rules 5.1.1 → 5.3.0

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

@@ -1,4 +1,5 @@
 import { createRule } from '@markuplint/ml-core';
+import { decodeEntities } from '@markuplint/shared';
 import meta from './meta.js';
 /**
  * HTML LS §4.10.7 The select element:
@@ -7,9 +8,9 @@ import meta from './meta.js';
  * > multiple attribute specified, and has a display size of 1, then the
  * > select element must have a placeholder label option.
  *
- * `hasPlaceholderLabelOption` decides whether an existing option already
- * satisfies the requirement; `needPlaceholderLabelOption` gates whether the
- * requirement applies to this `<select>`.
+ * `needPlaceholderLabelOption` gates whether the requirement applies to this
+ * `<select>`; `hasPlaceholderLabelOption` then decides whether an existing
+ * option already satisfies it.
  *
  * @see https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element
  */
@@ -17,10 +18,10 @@ export default createRule({
     meta: meta,
     verify({ document, report, t }) {
         for (const select of document.querySelectorAll('select')) {
-            if (hasPlaceholderLabelOption(select)) {
+            if (!needPlaceholderLabelOption(select)) {
                 continue;
             }
-            if (!needPlaceholderLabelOption(select)) {
+            if (hasPlaceholderLabelOption(select)) {
                 continue;
             }
             report({
@@ -50,54 +51,179 @@ select) {
     if (hasMultiple) {
         return false;
     }
-    const size = select.getAttribute('size') ?? '1';
-    if (size !== '1') {
-        return false;
-    }
-    return true;
+    return displaySize(select) === 1;
 }
 /**
  * HTML LS §4.10.7 The select element — placeholder label option definition:
  *
- * > If a select element has a required attribute specified, and has a
- * > display size of 1; and if the value of the first option element in the
- * > select element's list of options (if any) is the empty string, and that
- * > option element's parent node is the select element (and not an optgroup
- * > element), then that option is the select element's placeholder label
- * > option.
+ * > If a select element has a required attribute specified, and has a display size of 1; and if the value of the first
+ * > option element in the select element's list of options (if any) is the empty string, and that option element does
+ * > not have an ancestor optgroup in between itself and the select element, then that option is the select element's
+ * > placeholder label option.
  *
- * The "(if any)" clause requires a first option to exist for the placeholder
- * label option to exist at all; an empty `<select>` therefore has no
- * placeholder label option and must be reported by `verify`.
+ * The conditions on the `<select>` itself (required, display size) are
+ * `needPlaceholderLabelOption`'s, which `verify` asks first; this decides the
+ * rest. The "(if any)" clause requires a first option to exist for the
+ * placeholder label option to exist at all; an empty `<select>` therefore has
+ * no placeholder label option and must be reported by `verify`.
  *
  * @see https://html.spec.whatwg.org/multipage/form-elements.html#placeholder-label-option
  */
 function hasPlaceholderLabelOption(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
 select) {
-    // > has a required attribute specified
-    if (!select.hasAttribute('required')) {
+    // > the first option element in the select element's list of options (if any)
+    // No first option → no placeholder label option exists.
+    const first = firstOption(select, false);
+    if (!first) {
         return false;
     }
-    // > does not have a multiple attribute specified
-    if (select.hasAttribute('multiple')) {
+    // > does not have an ancestor optgroup in between itself and the select element
+    if (first.insideOptgroup) {
         return false;
     }
-    // > has a display size of 1
-    const size = select.getAttribute('size') ?? '1';
-    if (size !== '1') {
-        return false;
+    // > the value of [it] is the empty string
+    // An option whose value cannot be known (a template interpolation as its text) is not reported.
+    const value = optionValue(first.option);
+    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.
+ *
+ * `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
+select) {
+    const size = select.getAttributeNode('size');
+    if (size?.isDynamicValue) {
+        return null;
     }
-    // > the value of the first option element in the select element's list of options … is the empty string
-    // No first option → no placeholder label option exists.
-    const firstOption = select.querySelector('option');
-    if (!firstOption) {
-        return false;
+    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;
     }
-    // > that option element's parent node is the select element (and not an optgroup element)
-    if (firstOption.parentElement?.localName === 'optgroup') {
-        return false;
+    const value = Number(match[2]);
+    return match[1] === '-' && value !== 0 ? null : value;
+}
+/**
+ * The first option of a select's list of options, and whether an optgroup lies
+ * between it and the select.
+ *
+ * Following the algorithm literally, an `option` found while descending is
+ * appended and its subtree is skipped; so are the subtrees of a nested `select`,
+ * `hr` or `datalist`, and of an `optgroup` that has an `optgroup` ancestor below
+ * the select. Any other element, such as the wrapper that a customizable select
+ * allows, is looked through.
+ *
+ * @see https://html.spec.whatwg.org/multipage/form-elements.html#concept-select-option-list
+ */
+function firstOption(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+parent, insideOptgroup) {
+    for (const child of parent.childNodes) {
+        if (!child.is(child.ELEMENT_NODE)) {
+            continue;
+        }
+        switch (child.localName) {
+            case 'option': {
+                return { option: child, insideOptgroup };
+            }
+            case 'select':
+            case 'hr':
+            case 'datalist': {
+                continue;
+            }
+            case 'optgroup': {
+                if (insideOptgroup) {
+                    continue;
+                }
+                const found = firstOption(child, true);
+                if (found) {
+                    return found;
+                }
+                continue;
+            }
+            default: {
+                const found = firstOption(child, insideOptgroup);
+                if (found) {
+                    return found;
+                }
+            }
+        }
     }
-    const value = firstOption.getAttribute('value');
-    return value === '' || value === null;
+    return null;
+}
+/**
+ * The value of an `<option>`, or `null` when it cannot be known statically.
+ *
+ * > The value of an option element is the value of the value content attribute, if there is one, or, if there is not,
+ * > the result of get HTML-aware text content given this and false.
+ *
+ * @see https://html.spec.whatwg.org/multipage/form-elements.html#attr-option-value
+ */
+function optionValue(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+option) {
+    const valueAttr = option.getAttributeNode('value');
+    if (valueAttr) {
+        // A value given by an expression (`:value="v"`, `value={v}`) is not known until the template runs.
+        return valueAttr.isDynamicValue ? null : valueAttr.value;
+    }
+    const text = htmlAwareTextContent(option);
+    return text === null ? null : stripAndCollapseAsciiWhitespace(text);
+}
+/**
+ * Get HTML-aware text content with `includeAltText` false: the data of the
+ * Text descendants. The algorithm also skips `script` and `img` subtrees; that
+ * changes nothing here, because the HTML parser's tree does not expose a
+ * script's source as a Text node and an `img` has no text descendants.
+ * `null` when a template construct stands where text would be.
+ *
+ * @see https://html.spec.whatwg.org/multipage/form-elements.html#get-html-aware-text-content
+ */
+function htmlAwareTextContent(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+element) {
+    let text = '';
+    for (const child of element.childNodes) {
+        if (child.is(child.TEXT_NODE)) {
+            // The node holds the source text; a character reference such as `&#32;` has to be decoded first.
+            text += decodeEntities(child.textContent ?? '');
+        }
+        else if (child.is(child.ELEMENT_NODE)) {
+            const inner = htmlAwareTextContent(child);
+            if (inner === null) {
+                return null;
+            }
+            text += inner;
+        }
+        else if (child.is(child.MARKUPLINT_PREPROCESSOR_BLOCK)) {
+            return null;
+        }
+    }
+    return text;
+}
+/** ASCII whitespace only: `trim()` would also strip a no-break space, which is part of the text. */
+function stripAndCollapseAsciiWhitespace(text) {
+    return text.replaceAll(/[\t\n\f\r ]+/g, ' ').replaceAll(/^ | $/g, '');
 }

package/lib/progress-value-bounds/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Enforce HTML LS §4.10.14 inequalities for `<progress>`:
+ * Enforce HTML LS §4.10.13 inequalities for `<progress>`:
  * `value ≤ max` when both attributes are present, and `value ≤ 1` when
  * `max` is absent. Authored-but-unparsable values, out-of-range `max`
  * (≤ 0), and negative `value` are deferred to `no-invalid-attr-value`.

package/lib/progress-value-bounds/index.js

@@ -11,7 +11,7 @@ function parseFloatAttr(raw) {
     return Number.isFinite(n) ? n : null;
 }
 /**
- * Enforce HTML LS §4.10.14 inequalities for `<progress>`:
+ * Enforce HTML LS §4.10.13 inequalities for `<progress>`:
  * `value ≤ max` when both attributes are present, and `value ≤ 1` when
  * `max` is absent. Authored-but-unparsable values, out-of-range `max`
  * (≤ 0), and negative `value` are deferred to `no-invalid-attr-value`.

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

@@ -13,7 +13,12 @@ type Attr = {
  * Configuration options for the `require-attr` rule.
  */
 type Options = {
-    /** Attribute names to exclude from require-attribute checks. */
+    /**
+     * Attribute names to exclude from require-attribute checks, compared as the DOM compares attribute
+     * names.
+     *
+     * @see https://markuplint.dev/docs/rules/no-unknown-attr#attribute-name-case
+     */
     readonly ignoreAttrs?: readonly string[];
 };
 declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<RequiredAttributes, Options>>;

package/lib/require-attr/index.js

@@ -12,7 +12,8 @@ export default createRule({
             }
             const customRequiredAttrs = typeof el.rule.value === 'string' ? [el.rule.value] : el.rule.value;
             const attrSpec = getAttrSpecs(el, document.specs);
-            const ignoreAttrs = new Set(el.rule.options.ignoreAttrs);
+            const ignoreAttrs = el.rule.options.ignoreAttrs ?? [];
+            const isIgnored = (name) => ignoreAttrs.some(ignored => el.isSameAttrName(ignored, name));
             const attributeSpecs = {};
             if (attrSpec && el.elementType === 'html') {
                 for (const spec of attrSpec) {
@@ -39,6 +40,13 @@ export default createRule({
                         values.push(req.value);
                     }
                 }
+                // A name of the rule value that the spec table names too is one requirement, and the
+                // rule value's is the one that counts
+                for (const specName of Object.keys(attributeSpecs)) {
+                    if (el.isSameAttrName(specName, name)) {
+                        delete attributeSpecs[specName];
+                    }
+                }
                 attributeSpecs[name] = {
                     name,
                     values,
@@ -46,9 +54,9 @@ export default createRule({
                 };
             }
             for (const spec of Object.values(attributeSpecs)) {
-                if (ignoreAttrs.has(spec.name)) {
+                if (isIgnored(spec.name)) {
                     if (spec.requiredEither) {
-                        const activeCandidates = spec.requiredEither.filter(n => !ignoreAttrs.has(n));
+                        const activeCandidates = spec.requiredEither.filter(n => !isIgnored(n));
                         if (activeCandidates.length > 0) {
                             const invalid = !activeCandidates.some(attrName => el.hasAttribute(attrName));
                             if (invalid) {
@@ -71,7 +79,7 @@ export default createRule({
                 let invalid = false;
                 if (spec.requiredEither) {
                     candidate.push(...spec.requiredEither);
-                    const activeCandidates = candidate.filter(n => !ignoreAttrs.has(n));
+                    const activeCandidates = candidate.filter(n => !isIgnored(n));
                     invalid = !activeCandidates.some(attrName => el.hasAttribute(attrName));
                 }
                 else if (spec.required === true) {
@@ -81,7 +89,7 @@ export default createRule({
                     const selector = typeof spec.required === 'string' ? spec.required : spec.required.join(',');
                     invalid = el.matches(selector) && didntHave;
                 }
-                const sortedCandidate = candidate.filter(n => !ignoreAttrs.has(n)).toSorted();
+                const sortedCandidate = candidate.filter(n => !isIgnored(n)).toSorted();
                 if (invalid) {
                     const expects = sortedCandidate.length === 1
                         ? t('the "{0*}" {1}', spec.name, 'attribute')

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

@@ -11,7 +11,7 @@ export interface Options {
  * technique, not the criterion itself, so this rule's default severity is
  * `warning`.
  *
- * @see https://www.w3.org/WAI/WCAG21/Techniques/html/H42
+ * @see https://www.w3.org/WAI/WCAG22/Techniques/html/H42
  */
 declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<boolean, Options>>;
 export default _default;

package/lib/require-h1/index.js

@@ -6,7 +6,7 @@ import meta from './meta.js';
  * technique, not the criterion itself, so this rule's default severity is
  * `warning`.
  *
- * @see https://www.w3.org/WAI/WCAG21/Techniques/html/H42
+ * @see https://www.w3.org/WAI/WCAG22/Techniques/html/H42
  */
 export default createRule({
     meta: meta,

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

@@ -2,6 +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 meta from './meta.js';
 /**
  * Split from the former `wai-aria-disallowed-props` rule (#3989): the
@@ -20,7 +21,7 @@ export default createRule({
                 return;
             if (elSpec && !elSpec.globalAttrs['#ARIAAttrs'])
                 return;
-            const propAttrs = el.attributes.filter(attr => /^aria-/i.test(attr.name));
+            const propAttrs = el.attributes.filter(attr => isAriaAttr(attr));
             if (propAttrs.length === 0)
                 return;
             const ariaVersion = el.rule.options?.version ?? document.ruleCommonSettings?.ariaVersion ?? ARIA_RECOMMENDED_VERSION;

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

@@ -4,7 +4,9 @@
  * image starts loading — so it only makes sense together with
  * `loading="lazy"`, which the spec requires. Split out of the former
  * `srcset-sizes-constraint` rule's Checks 3 (`<img>`) and 4 (`<source>`, which
- * checks the following sibling `<img>` instead of itself).
+ * checks the following sibling `<img>` instead of itself). For the `<source>`,
+ * the sibling `<img>` must allow auto-sizes: `loading="lazy"` and a `sizes` of
+ * `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

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

@@ -1,6 +1,6 @@
 import { createRule } from '@markuplint/ml-core';
 import { hasSizesAuto } from '../srcset-sizes-constraint/parse-srcset.js';
-import { findFollowingImg } from '../srcset-sizes-constraint/sibling-helpers.js';
+import { findFollowingImg, isAutoSizes, isLazyLoading } from '../srcset-sizes-constraint/sibling-helpers.js';
 import meta from './meta.js';
 /**
  * HTML LS § the img element / the source element: `sizes="auto"` defers
@@ -8,7 +8,9 @@ import meta from './meta.js';
  * image starts loading — so it only makes sense together with
  * `loading="lazy"`, which the spec requires. Split out of the former
  * `srcset-sizes-constraint` rule's Checks 3 (`<img>`) and 4 (`<source>`, which
- * checks the following sibling `<img>` instead of itself).
+ * checks the following sibling `<img>` instead of itself). For the `<source>`,
+ * the sibling `<img>` must allow auto-sizes: `loading="lazy"` and a `sizes` of
+ * `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
@@ -38,28 +40,40 @@ export default createRule({
             const sizesValue = sizesAttr?.value ?? null;
             const sizesIsDynamic = sizesAttr?.isDynamicValue;
             // img[sizes=auto] → loading=lazy required
-            if (localName === 'img' && sizesValue != null && !sizesIsDynamic && hasSizesAuto(sizesValue)) {
-                const loading = el.getAttribute('loading');
-                if (loading !== 'lazy') {
-                    report({
-                        scope: el,
-                        line: sizesAttr.valueNode?.startLine,
-                        col: sizesAttr.valueNode?.startCol,
-                        raw: sizesAttr.valueNode?.raw,
-                        message: 'The "sizes" attribute with "auto" requires the "loading" attribute to be "lazy"',
-                    });
-                }
+            // The keyword is matched ASCII case-insensitively; a dynamic
+            // `loading` is not known and is not reported.
+            if (localName === 'img' &&
+                sizesValue != null &&
+                !sizesIsDynamic &&
+                hasSizesAuto(sizesValue) &&
+                isLazyLoading(el) === false) {
+                report({
+                    scope: el,
+                    line: sizesAttr.valueNode?.startLine,
+                    col: sizesAttr.valueNode?.startCol,
+                    raw: sizesAttr.valueNode?.raw,
+                    message: 'The "sizes" attribute with "auto" requires the "loading" attribute to be "lazy"',
+                });
             }
-            // source[sizes=auto] → following sibling img must have loading=lazy
+            // source[sizes=auto] → the following sibling img must allow
+            // auto-sizes: loading=lazy and sizes=auto (HTML LS §
+            // allows-auto-sizes, see `allowsAutoSizes`). A dynamic loading / sizes on the img is not known.
             if (localName === 'source' && sizesValue != null && !sizesIsDynamic && hasSizesAuto(sizesValue)) {
                 const img = findFollowingImg(el);
-                if (!img || img.getAttribute('loading') !== 'lazy') {
+                const lazy = img ? isLazyLoading(img) : false;
+                const auto = img ? isAutoSizes(img) : false;
+                if (lazy === false || auto === false) {
+                    // Say everything that is missing at once, so that fixing
+                    // one does not reveal the other.
+                    const missing = [lazy === false && 'loading="lazy"', auto === false && 'sizes="auto"'].filter(Boolean);
                     report({
                         scope: el,
                         line: sizesAttr.valueNode?.startLine,
                         col: sizesAttr.valueNode?.startCol,
                         raw: sizesAttr.valueNode?.raw,
-                        message: 'The "source" element with sizes="auto" requires the following sibling "img" element to have loading="lazy"',
+                        message: !img || (missing.length === 1 && lazy === false)
+                            ? 'The "source" element with sizes="auto" requires the following sibling "img" element to have loading="lazy"'
+                            : `The "source" element with sizes="auto" requires the following sibling "img" element to have ${missing.join(' and ')}`,
                     });
                 }
             }

package/lib/srcset-sizes-constraint/parse-srcset.d.ts

@@ -33,14 +33,15 @@ type ParseResult = {
  */
 export declare function parseSrcset(value: string): ParseResult;
 /**
- * Check whether a `sizes` attribute value starts with `auto`.
+ * Check whether a `sizes` attribute value is `auto` or starts with `auto,`.
  *
- * Per the spec, `auto` is only valid as the first entry in a sizes list.
- * Examples: `"auto"`, `"auto, 100vw"`, `"AUTO"`.
+ * HTML LS § allows-auto-sizes: the value is "auto" (ASCII case-insensitive),
+ * or starts with "auto," (ASCII case-insensitive). The value is not trimmed.
+ * Examples: `"auto"`, `"auto, 100vw"`, `"AUTO,100vw"`. Not: `"auto 100vw"`.
  *
  * @param value - The raw `sizes` attribute value string
- * @returns `true` if the value starts with `auto` (case-insensitive)
- * @see https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element
+ * @returns `true` if the value is `auto` or starts with `auto,`
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#allows-auto-sizes
  */
 export declare function hasSizesAuto(value: string): boolean;
 export {};

package/lib/srcset-sizes-constraint/parse-srcset.js

@@ -47,16 +47,17 @@ export function parseSrcset(value) {
     return { candidates, hasWidth, hasDensity, hasImplied };
 }
 /**
- * Check whether a `sizes` attribute value starts with `auto`.
+ * Check whether a `sizes` attribute value is `auto` or starts with `auto,`.
  *
- * Per the spec, `auto` is only valid as the first entry in a sizes list.
- * Examples: `"auto"`, `"auto, 100vw"`, `"AUTO"`.
+ * HTML LS § allows-auto-sizes: the value is "auto" (ASCII case-insensitive),
+ * or starts with "auto," (ASCII case-insensitive). The value is not trimmed.
+ * Examples: `"auto"`, `"auto, 100vw"`, `"AUTO,100vw"`. Not: `"auto 100vw"`.
  *
  * @param value - The raw `sizes` attribute value string
- * @returns `true` if the value starts with `auto` (case-insensitive)
- * @see https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element
+ * @returns `true` if the value is `auto` or starts with `auto,`
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#allows-auto-sizes
  */
 export function hasSizesAuto(value) {
-    const v = value.trim().toLowerCase();
-    return v === 'auto' || /^auto[\s,]/.test(v);
+    const v = value.toLowerCase();
+    return v === 'auto' || v.startsWith('auto,');
 }

package/lib/srcset-sizes-constraint/sibling-helpers.d.ts

@@ -19,3 +19,34 @@ export declare function followingElementSiblings(el: Element<boolean>): Generato
  * @returns The first following sibling `<img>` element, or `null` if none found
  */
 export declare function findFollowingImg(el: Element<boolean>): Element<boolean> | null;
+/**
+ * Whether an `<img>`'s `loading` attribute is in the Lazy state.
+ *
+ * @param img - The `<img>` element
+ * @returns `true` / `false`, or `null` when it cannot be known statically (a
+ *   dynamic `loading` value, or spread attributes that may supply it)
+ */
+export declare function isLazyLoading(img: Element<boolean>): boolean | null;
+/**
+ * Whether an `<img>` "allows auto-sizes".
+ *
+ * HTML LS § allows-auto-sizes: its `loading` attribute is in the Lazy state,
+ * and its `sizes` attribute's value is `auto` (ASCII case-insensitive) or
+ * starts with `auto,`. `loading="lazy"` alone is not enough: that is what
+ * the `<source>` direction of `no-unpaired-srcset-sizes` and
+ * `sizes-auto-requires-lazy-loading` both depend on.
+ *
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#allows-auto-sizes
+ * @param img - The `<img>` element
+ * @returns `true` / `false`, or `null` when it cannot be known statically
+ */
+export declare function allowsAutoSizes(img: Element<boolean>): boolean | null;
+/**
+ * Whether an `<img>`'s `sizes` attribute is `auto` or starts with `auto,`
+ * (the `sizes` half of "allows auto-sizes"; see `hasSizesAuto`).
+ *
+ * @param img - The `<img>` element
+ * @returns `true` / `false`, or `null` when it cannot be known statically (a
+ *   dynamic `sizes` value, or spread attributes that may supply it)
+ */
+export declare function isAutoSizes(img: Element<boolean>): boolean | null;

package/lib/srcset-sizes-constraint/sibling-helpers.js

@@ -1,3 +1,4 @@
+import { hasSizesAuto } from './parse-srcset.js';
 /**
  * Iterate the element's following element siblings in document order.
  *
@@ -35,3 +36,60 @@ el) {
     }
     return null;
 }
+/**
+ * Whether an `<img>`'s `loading` attribute is in the Lazy state.
+ *
+ * @param img - The `<img>` element
+ * @returns `true` / `false`, or `null` when it cannot be known statically (a
+ *   dynamic `loading` value, or spread attributes that may supply it)
+ */
+export function isLazyLoading(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+img) {
+    const loading = img.getAttributeNode('loading');
+    if (loading?.isDynamicValue || (!loading && img.hasSpreadAttr)) {
+        return null;
+    }
+    // The keyword is matched ASCII case-insensitively (HTML LS § lazy-loading attributes).
+    return loading?.value.toLowerCase() === 'lazy';
+}
+/**
+ * Whether an `<img>` "allows auto-sizes".
+ *
+ * HTML LS § allows-auto-sizes: its `loading` attribute is in the Lazy state,
+ * and its `sizes` attribute's value is `auto` (ASCII case-insensitive) or
+ * starts with `auto,`. `loading="lazy"` alone is not enough: that is what
+ * the `<source>` direction of `no-unpaired-srcset-sizes` and
+ * `sizes-auto-requires-lazy-loading` both depend on.
+ *
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#allows-auto-sizes
+ * @param img - The `<img>` element
+ * @returns `true` / `false`, or `null` when it cannot be known statically
+ */
+export function allowsAutoSizes(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+img) {
+    const lazy = isLazyLoading(img);
+    const auto = isAutoSizes(img);
+    if (lazy === false || auto === false) {
+        return false;
+    }
+    return lazy === null || auto === null ? null : true;
+}
+/**
+ * Whether an `<img>`'s `sizes` attribute is `auto` or starts with `auto,`
+ * (the `sizes` half of "allows auto-sizes"; see `hasSizesAuto`).
+ *
+ * @param img - The `<img>` element
+ * @returns `true` / `false`, or `null` when it cannot be known statically (a
+ *   dynamic `sizes` value, or spread attributes that may supply it)
+ */
+export function isAutoSizes(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+img) {
+    const sizes = img.getAttributeNode('sizes');
+    if (sizes?.isDynamicValue || (!sizes && img.hasSpreadAttr)) {
+        return null;
+    }
+    return sizes != null && hasSizesAuto(sizes.value);
+}

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

@@ -16,7 +16,7 @@ function isPlainObject(value) {
  * corpus. When the spec changes, update this set/the SR_* sets below, the error
  * message strings, and the README tables.
  *
- * @see https://html.spec.whatwg.org/multipage/speculative-loading.html
+ * @see https://html.spec.whatwg.org/multipage/speculative-loading.html#speculation-rules
  */
 // Valid keys per HTML LS § 7.6.1.2 "parse a speculation rule" / the rule-set
 // object grammar. Unknown keys are rejected by the spec (the rule returns null),

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

@@ -22,7 +22,7 @@ export const checkingContradictoryAriaProp = ({ attr, propSpecs, attrSpecs }) =>
     if (attr.isDynamicValue) {
         return;
     }
-    const propSpec = propSpecs.find(p => p.name === attr.name);
+    const propSpec = propSpecs.find(p => p.name === attr.nameKey);
     if (!propSpec?.equivalentHtmlAttrs) {
         return;
     }
@@ -30,13 +30,11 @@ export const checkingContradictoryAriaProp = ({ attr, propSpecs, attrSpecs }) =>
         const htmlAttrSpec = attrSpecs.find(a => a.name === equivalentHtmlAttr.htmlAttrName);
         const eligibility = resolveAttrEligibility(equivalentHtmlAttr.htmlAttrName, attr.ownerElement, attrSpecs);
         // Skip only when the native attribute doesn't apply to this element at all
-        // (unknown name, case mismatch, or an unmet condition) — mirrors the old
+        // (unknown name or an unmet condition) — mirrors the old
         // `invalidType === 'non-existent'` check. `noUse` still proceeds: an
         // explicitly-forbidden native attribute can still be "implicit" for
         // equivalence purposes.
-        if (eligibility.status === 'unknown' ||
-            eligibility.status === 'case-mismatch' ||
-            eligibility.status === 'condition-not-met') {
+        if (eligibility.status === 'unknown' || eligibility.status === 'condition-not-met') {
             continue;
         }
         const value = attr.value.trim().toLowerCase();