@markuplint/rules 5.3.0 → 5.5.0

package/lib/no-invalid-aria-prop-value/index.js

@@ -2,7 +2,7 @@ import { createRule, getComputedRole, ariaSpecs, getSpec } from '@markuplint/ml-
 import { ARIA_RECOMMENDED_VERSION } from '@markuplint/ml-spec';
 import { checkingValue } from '../wai-aria/checkings/value.js';
 import { defaultOptions } from '../wai-aria/default-options.js';
-import { isAriaAttr } from '../helpers.js';
+import { getAriaAttrs } from '../helpers.js';
 import meta from './meta.js';
 export default createRule({
     meta,
@@ -14,14 +14,14 @@ export default createRule({
                 return;
             if (!elSpec.globalAttrs['#ARIAAttrs'])
                 return;
-            const propAttrs = el.attributes.filter(attr => isAriaAttr(attr));
+            const propAttrs = getAriaAttrs(el);
             if (propAttrs.length === 0)
                 return;
             const ariaVersion = el.rule.options?.version ?? document.ruleCommonSettings?.ariaVersion ?? ARIA_RECOMMENDED_VERSION;
             const computed = getComputedRole(document.specs, el, ariaVersion);
             const { props: propSpecs } = ariaSpecs(document.specs, ariaVersion);
             for (const attr of propAttrs) {
-                report(checkingValue({ attr, role: computed.role, propSpecs, booleanish: document.booleanish }));
+                report(checkingValue({ attr, role: computed.role, propSpecs }));
             }
         });
     },

package/lib/no-invalid-attr-value/index.js

@@ -53,6 +53,18 @@ export default createRule({
                 if (one === false || one.invalidType !== 'invalid-value') {
                     continue;
                 }
+                // The value of an expression is what the code results in, so a position in it is not a position
+                // in the source (an escape, a quote): the whole value that is written is reported
+                if (attr.isExpressionValue && valueNode) {
+                    report({
+                        scope: attr,
+                        message: one.message,
+                        line: valueNode.startLine,
+                        col: valueNode.startCol,
+                        raw: valueNode.raw,
+                    });
+                    continue;
+                }
                 report({
                     scope: attr,
                     message: one.message,

package/lib/no-nested-top-level-landmark/index.js

@@ -1,5 +1,5 @@
 import { createRule } from '@markuplint/ml-core';
-import { computeLandmarkRoles, landmarkRoleElementUUIDList } from '../landmark-roles/roles.js';
+import { computeLandmarkRolesOfEachTree, landmarkRoleElementUUIDList } from '../landmark-roles/roles.js';
 import meta from './meta.js';
 /**
  * Roles this rule requires to be top-level landmarks — not nested inside any
@@ -29,22 +29,25 @@ export default createRule({
         if (document.isFragment) {
             return;
         }
-        const roles = computeLandmarkRoles(document);
-        const uuidList = landmarkRoleElementUUIDList(roles);
-        for (const role of topLevelRoles) {
-            const elements = roles[role];
-            for (const el of elements) {
-                if (el.rule.disabled) {
-                    continue;
-                }
-                if (el.rule.options.ignoreRoles?.includes(role)) {
-                    continue;
-                }
-                if (el.isDescendantByUUIDList(uuidList)) {
-                    report({
-                        scope: el,
-                        message: t('{0} should be {1}', t('the "{0*}" {1}', role, 'role'), 'top level'),
-                    });
+        // Landmarks are nested in a landmark of their own tree: the content of a `template` element is
+        // a tree of its own, so a landmark outside of it does not make what is in it nested
+        for (const roles of computeLandmarkRolesOfEachTree(document)) {
+            const uuidList = landmarkRoleElementUUIDList(roles);
+            for (const role of topLevelRoles) {
+                const elements = roles[role];
+                for (const el of elements) {
+                    if (el.rule.disabled) {
+                        continue;
+                    }
+                    if (el.rule.options.ignoreRoles?.includes(role)) {
+                        continue;
+                    }
+                    if (el.isDescendantByUUIDList(uuidList)) {
+                        report({
+                            scope: el,
+                            message: t('{0} should be {1}', t('the "{0*}" {1}', role, 'role'), 'top level'),
+                        });
+                    }
                 }
             }
         }

package/lib/no-prohibited-naming/index.js

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

package/lib/no-redundant-accessible-name/index.js

@@ -1,6 +1,6 @@
 import { createRule, getComputedRole } from '@markuplint/ml-core';
 import { ARIA_RECOMMENDED_VERSION, isExposed } from '@markuplint/ml-spec';
-import { accnameMayBeMutable, getOwnedLabel } from '../helpers.js';
+import { accnameMayBeMutable, getElementByIdInTree, getOwnedLabel } from '../helpers.js';
 import meta from './meta.js';
 export default createRule({
     meta,
@@ -13,7 +13,7 @@ export default createRule({
         await document.walkOn('Element', el => {
             const ariaVersion = ARIA_RECOMMENDED_VERSION;
             // Skip mutable elements (template expressions etc.)
-            if (accnameMayBeMutable(el, document)) {
+            if (accnameMayBeMutable(el)) {
                 return;
             }
             // Skip hidden elements
@@ -61,13 +61,14 @@ computed) {
     //
     // Known limitation: step 2C (Embedded Control) is not modeled, so a self-referencing
     // textbox, combobox, listbox or range is treated like any other element.
-    const ariaLabelledby = el.getAttribute('aria-labelledby');
-    if (ariaLabelledby && ariaLabelledby.trim()) {
+    const ariaLabelledbyAttr = el.getAttributeNode('aria-labelledby');
+    const ariaLabelledby = ariaLabelledbyAttr?.value;
+    if (ariaLabelledbyAttr && ariaLabelledby && ariaLabelledby.trim()) {
         const ids = ariaLabelledby.trim().split(/\s+/);
         // An IDREF resolves to the first element with that id, so with duplicate ids a
         // reference only counts as self-referencing when this element is that first match.
-        const isSelfReferencing = ids.some(id => id === el.id && document.querySelector(`[id="${id}"]`) === el);
-        const hasResolvableId = ids.some(id => document.querySelector(`[id="${id}"]`));
+        const isSelfReferencing = ids.some(id => getElementByIdInTree(el, id, ariaLabelledbyAttr.isExpressionValue) === el);
+        const hasResolvableId = ids.some(id => getElementByIdInTree(el, id, ariaLabelledbyAttr.isExpressionValue));
         if (hasResolvableId && !isSelfReferencing) {
             sources.push({ label: 'aria-labelledby' });
         }
@@ -78,7 +79,7 @@ computed) {
         sources.push({ label: 'aria-label' });
     }
     // 3. label (explicit or implicit) — only for labelable elements
-    const ownedLabel = getOwnedLabel(el, document);
+    const ownedLabel = getOwnedLabel(el);
     if (ownedLabel) {
         sources.push({ label: 'label' });
     }

package/lib/no-redundant-aria-prop/index.js

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

package/lib/no-refer-to-non-existent-id/index.d.ts

@@ -1,4 +1,19 @@
 import type { ARIAVersion } from '@markuplint/ml-spec';
+/**
+ * Reports a reference (an attribute of the `DOMID` type, or an ARIA property of the ID reference
+ * type) to an id that does not exist.
+ *
+ * An id is resolved in the tree of the reference: the document, the content of a `template` element
+ * and a declarative shadow root are trees of their own. The reference and the id are compared with
+ * the character references in the markup resolved.
+ *
+ * What it cannot tell it does not report: a document with a template-language block is skipped, an id
+ * that is not known until it is rendered (a dynamic value) suppresses the report in its tree only, and
+ * a `template` that is in no tree (a declarative shadow root is attached to its parent, or may be)
+ * refers to nothing.
+ *
+ * @see https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
+ */
 declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<import("@markuplint/ml-core").RuleConfigValue, {
     ariaVersion: ARIAVersion | undefined;
 }>>;

package/lib/no-refer-to-non-existent-id/index.js

@@ -1,35 +1,55 @@
 import { createRule, getAttrSpecs, ariaSpecs } from '@markuplint/ml-core';
 import { ARIA_RECOMMENDED_VERSION } from '@markuplint/ml-spec';
-import { decodeEntities } from '@markuplint/shared';
-import { findAttrSpec } from '../helpers.js';
+import { findAttrSpec, getDOMValue } from '../helpers.js';
 import meta from './meta.js';
+/**
+ * Reports a reference (an attribute of the `DOMID` type, or an ARIA property of the ID reference
+ * type) to an id that does not exist.
+ *
+ * An id is resolved in the tree of the reference: the document, the content of a `template` element
+ * and a declarative shadow root are trees of their own. The reference and the id are compared with
+ * the character references in the markup resolved.
+ *
+ * What it cannot tell it does not report: a document with a template-language block is skipped, an id
+ * that is not known until it is rendered (a dynamic value) suppresses the report in its tree only, and
+ * a `template` that is in no tree (a declarative shadow root is attached to its parent, or may be)
+ * refers to nothing.
+ *
+ * @see https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
+ */
 export default createRule({
     meta: meta,
     defaultOptions: {
         ariaVersion: undefined,
     },
     async verify({ document, report, t }) {
-        const idList = new Set();
-        let hasDynamicId = false;
+        // An id is resolved in the tree of the reference: the document, the content of a `template`
+        // element and a declarative shadow root are trees of their own
+        const idListOfTree = new Map();
+        const treesWithDynamicId = new Set();
         const isMutable = document.nodeList.some(node => node.is(node.MARKUPLINT_PREPROCESSOR_BLOCK));
         if (isMutable) {
             return;
         }
-        for (const el of document.querySelectorAll('[id]')) {
+        for (const el of document.deepQuerySelectorAll('[id]')) {
             const attr = el.getAttributeNode('id');
             if (!attr) {
                 continue;
             }
+            const root = el.getRootNode();
             if (attr.isDynamicValue) {
-                hasDynamicId = true;
+                treesWithDynamicId.add(root);
             }
-            if (attr.valueType !== 'code') {
-                idList.add(decodeEntities(attr.value));
+            const id = attr.valueType === 'code' ? null : getDOMValue(attr);
+            if (id != null) {
+                let idList = idListOfTree.get(root);
+                if (!idList) {
+                    idList = new Set();
+                    idListOfTree.set(root, idList);
+                }
+                idList.add(id);
             }
         }
-        if (hasDynamicId) {
-            return;
-        }
         await document.walkOn('Attr', attr => {
             const attrSpec = getAttrSpecs(attr.ownerElement, document.specs);
             if (!attrSpec) {
@@ -41,7 +61,16 @@ export default createRule({
             if (attr.nameKey === 'id') {
                 return;
             }
-            const value = attr.value;
+            const root = attr.ownerElement.getRootNode();
+            // An element in no tree (a `template` that a declarative shadow root is attached to) refers
+            // to nothing, and an id that is not known until it is rendered may be what the reference means
+            if (root === attr.ownerElement || treesWithDynamicId.has(root)) {
+                return;
+            }
+            const idList = idListOfTree.get(root) ?? new Set();
+            // The value is split before the character references are resolved: ` ` is not a separator
+            const decode = (id) => getDOMValue(attr, id) ?? id;
+            const value = decode(attr.value);
             const spec = findAttrSpec(attrSpec, attr);
             if (spec) {
                 // DOMID and DOMID List do not become in the array type.
@@ -58,10 +87,11 @@ export default createRule({
                     });
                 }
                 if (typeof spec.type !== 'string' && 'separator' in spec.type && spec.type.token === 'DOMID') {
-                    const refs = value
+                    const refs = attr.value
                         .split(spec.type.separator === 'space' ? /\s/ : ',')
                         .map(id => id.trim())
-                        .filter(Boolean);
+                        .filter(Boolean)
+                        .map(id => decode(id));
                     for (const ref of refs) {
                         if (!idList.has(ref)) {
                             report({
@@ -88,10 +118,11 @@ export default createRule({
                     });
                 }
                 else if (aria.value === 'ID reference list') {
-                    const refs = value
+                    const refs = attr.value
                         .split(/\s/)
                         .map(id => id.trim())
-                        .filter(Boolean);
+                        .filter(Boolean)
+                        .map(id => decode(id));
                     for (const ref of refs) {
                         if (!idList.has(ref)) {
                             report({

package/lib/no-restricted-element/index.js

@@ -4,8 +4,10 @@ export default createRule({
     meta: meta,
     defaultValue: [],
     async verify({ document, report, t }) {
+        // A restricted element is restricted wherever it is: the content of a `template` element and a
+        // declarative shadow root are searched as well
         for (const query of document.rule.value) {
-            const elements = document.querySelectorAll(query);
+            const elements = document.deepQuerySelectorAll(query);
             for (const el of elements) {
                 const message = t('{0} is disallowed', t('the "{0*}" {1}', query, 'element'));
                 report({
@@ -19,7 +21,7 @@ export default createRule({
                 return;
             }
             for (const query of el.rule.value) {
-                const elements = el.querySelectorAll(query);
+                const elements = el.deepQuerySelectorAll(query);
                 for (const found of elements) {
                     const message = t('{0} is disallowed', t('the "{0*}" {1}', query, 'element'));
                     report({

package/lib/no-skipped-heading-level/index.js

@@ -15,17 +15,22 @@ export default createRule({
     meta: meta,
     defaultOptions: null,
     verify({ document, report, t }) {
-        const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
-        let prevLevel = null;
+        // The content of a `template` element and a declarative shadow root are trees of their own, and
+        // where they are inserted is not known from the markup: the headings of each tree are the
+        // sequence that the heading lead is judged in, as the headings of the document are.
+        const headings = document.deepQuerySelectorAll('h1, h2, h3, h4, h5, h6');
+        const prevLevelOfTree = new Map();
         for (const heading of headings) {
             const level = Number.parseInt(heading.nodeName.slice(1));
-            if (prevLevel !== null && prevLevel + 1 < level) {
+            const root = heading.getRootNode();
+            const prevLevel = prevLevelOfTree.get(root);
+            if (prevLevel !== undefined && prevLevel + 1 < level) {
                 report({
                     scope: heading,
                     message: t('{0} must not be skipped', t('Heading levels')),
                 });
             }
-            prevLevel = level;
+            prevLevelOfTree.set(root, level);
         }
     },
 });

package/lib/no-stray-head-or-body-tag/index.d.ts

@@ -4,7 +4,8 @@
  * > A start tag whose tag name is "body": Parse error. If the stack of open
  * > elements has only one node on it, or if the second element on the stack
  * > of open elements is not a body element, or if there is a template
- * > element on the stack of open elements, then ignore the token. […]
+ * > element on the stack of open elements, or if the parser's fragment parser
+ * > abort requested is true, then ignore the token. […]
  * > Otherwise: Set the frameset-ok flag to "not ok" […]
  *
  * "in body" insertion mode, "Any other end tag":

package/lib/no-stray-head-or-body-tag/index.js

@@ -19,7 +19,8 @@ const DUPLICATE_BODY_START_TAG = /<body(?=[\s/>])/i;
  * > A start tag whose tag name is "body": Parse error. If the stack of open
  * > elements has only one node on it, or if the second element on the stack
  * > of open elements is not a body element, or if there is a template
- * > element on the stack of open elements, then ignore the token. […]
+ * > element on the stack of open elements, or if the parser's fragment parser
+ * > abort requested is true, then ignore the token. […]
  * > Otherwise: Set the frameset-ok flag to "not ok" […]
  *
  * "in body" insertion mode, "Any other end tag":

package/lib/no-table-cell-overlap/index.js

@@ -14,7 +14,7 @@ import meta from './meta.js';
 export default createRule({
     meta,
     verify({ document, report, t }) {
-        const tables = document.querySelectorAll('table');
+        const tables = document.deepQuerySelectorAll('table');
         for (const table of tables) {
             const grid = new Grid(table);
             if (grid.hasOverlapped()) {

package/lib/no-table-span-overflow/index.js

@@ -14,7 +14,7 @@ import meta from './meta.js';
 export default createRule({
     meta,
     verify({ document, report, t }) {
-        const tables = document.querySelectorAll('table');
+        const tables = document.deepQuerySelectorAll('table');
         for (const table of tables) {
             const grid = new Grid(table);
             if (grid.hasOverlapped()) {

package/lib/no-unescaped-char/index.js

@@ -49,7 +49,7 @@ export default createRule({
             const ms = severity === 'error' ? 'must' : 'should';
             const message = t(`{0} ${ms} {1}`, 'Illegal characters', 'escape in character reference');
             for (const attr of node.attributes) {
-                if (attr.isDynamicValue || attr.isDirective) {
+                if (attr.isExpressionValue || attr.isDirective) {
                     continue;
                 }
                 const valueNode = attr.valueNode;

package/lib/permitted-contents/index.js

@@ -121,7 +121,8 @@ export default createRule({
 /**
  * Generates a localized, human-readable name for a child node based on its type.
  * Used in error messages to describe the offending node (e.g., 'the "div" element',
- * 'the text node', 'the comment', 'the doctype', 'the code block').
+ * 'the text node', 'the doctype', 'the code block'). A comment is not named: it is
+ * ignored when a content model is evaluated.
  *
  * In `'origin'` mode, uses {@link MLElement.rawName} so that the diagnostic refers
  * to the original AST identity (e.g. the component name `"Breadcrumbs"`) rather
@@ -143,9 +144,6 @@ scope, t, mode) {
     if (scope.is(scope.TEXT_NODE)) {
         return t('the {0}', 'text node');
     }
-    if (scope.is(scope.CDATA_SECTION_NODE)) {
-        return t('the {0}', 'comment');
-    }
     if (scope.is(scope.DOCUMENT_TYPE_NODE)) {
         return t('the {0}', 'doctype');
     }

package/lib/permitted-contents/matches-selector.js

@@ -1,4 +1,5 @@
 import { contentModelCategoryToTagNames } from '@markuplint/ml-spec';
+import { contentModelFirstChildBase, isContentModelFirstChild, isInterElementWhitespace } from '@markuplint/selector';
 import { depthLog } from './debug.js';
 import { cleanObject, matches } from './utils.js';
 /**
@@ -20,7 +21,7 @@ export function matchesSelector(query,
 childNode, specs, depth, mode) {
     const nodeLog = depthLog('node', depth);
     const nodeEnabled = nodeLog.enabled;
-    const { selector, hasText, hasNonEmptyText, hasCustom } = optCondition(query, specs);
+    const { selector, selectorAsFirstChild, hasText, hasNonEmptyText, hasCustom } = optCondition(query, specs);
     if (childNode == null) {
         if (hasText) {
             if (nodeEnabled) {
@@ -47,7 +48,7 @@ childNode, specs, depth, mode) {
     }
     if (childNode.is(childNode.TEXT_NODE)) {
         if (hasNonEmptyText) {
-            if (childNode.isWhitespace()) {
+            if (isInterElementWhitespace(childNode.raw)) {
                 if (nodeEnabled) {
                     nodeLog('<#nonEmptyText>.matches(%s) => WHITESPACE (rejected)', query);
                 }
@@ -85,7 +86,7 @@ childNode, specs, depth, mode) {
                 hint: {},
             };
         }
-        if (childNode.isWhitespace()) {
+        if (isInterElementWhitespace(childNode.raw)) {
             if (nodeEnabled) {
                 nodeLog('<#text>.matches(%s) => WHITESPACE', query);
             }
@@ -135,7 +136,14 @@ childNode, specs, depth, mode) {
                 hint: {},
             };
         }
-        const result = matches(selector, childNode, specs, mode);
+        let result = matches(selector, childNode, specs, mode);
+        // The siblings are looked at only for an element that the rest does not take.
+        // The first child is that of the element's own parent, also inside a transparent
+        // element, whose content model is derived from its parent's: `style` in
+        // `<div><p></p><noscript><style>` is the first child of the noscript.
+        if (!result.matched && selectorAsFirstChild != null && isContentModelFirstChild(childNode)) {
+            result = matches(selectorAsFirstChild, childNode, specs, mode);
+        }
         if (nodeEnabled) {
             nodeLog('%s.matches(%s) => %s', childNode.raw, query, result.matched);
         }
@@ -220,18 +228,21 @@ element, mode) {
 const conditionWithoutSpecs = {
     '#custom': {
         selector: '#custom',
+        selectorAsFirstChild: null,
         hasCustom: true,
         hasText: false,
         hasNonEmptyText: false,
     },
     '#text': {
         selector: '#text',
+        selectorAsFirstChild: null,
         hasCustom: false,
         hasText: true,
         hasNonEmptyText: false,
     },
     '#nonEmptyText': {
         selector: '#nonEmptyText',
+        selectorAsFirstChild: null,
         hasCustom: false,
         hasText: false,
         hasNonEmptyText: true,
@@ -271,7 +282,9 @@ function optCondition(query, specs) {
     let hasCustom = false;
     let hasText = false;
     let hasNonEmptyText = false;
-    const selector = query.replace(/^:model\(([^)]+)\)|^#([a-z-]+)/, (_, $model, _model) => {
+    let asFirstChild = null;
+    const categoryPattern = /^:model\(([^)]+)\)|^#([a-z-]+)/;
+    const selector = query.replace(categoryPattern, (_, $model, _model) => {
         const tag = `#${$model ?? _model}`;
         if (tag === '#nonEmptyText') {
             hasNonEmptyText = true;
@@ -282,6 +295,7 @@ function optCondition(query, specs) {
             throw new Error(`${$model ?? _model} is empty`);
         }
         const selectors = [];
+        const firstChildBases = [];
         for (const selector of _selectors) {
             if (selector === '#custom') {
                 hasCustom = true;
@@ -291,12 +305,21 @@ function optCondition(query, specs) {
                 hasText = true;
                 continue;
             }
+            const firstChildBase = contentModelFirstChildBase(selector);
+            if (firstChildBase != null) {
+                firstChildBases.push(firstChildBase);
+                continue;
+            }
             selectors.push(selector);
         }
+        if (firstChildBases.length > 0) {
+            asFirstChild = `:is(${firstChildBases.join(',')})`;
+        }
         return `:is(${selectors.join(',')})`;
     });
     const result = {
         selector,
+        selectorAsFirstChild: asFirstChild == null ? null : query.replace(categoryPattern, () => asFirstChild ?? ''),
         hasCustom,
         hasText,
         hasNonEmptyText,