@webround/editor 0.3.12 → 0.3.14

package/dist/check/producer-code.js

@@ -225,7 +225,7 @@ function fromJsx(el, config, file, options) {
     const children = el.isKind(SyntaxKind.JsxElement) ? nodesUnder(el, config, file, options) : [];
     // Plain components we know nothing about (`<Card>`) are only transparent: what they hold is what counts. A shared one is entered: what it renders is part of the page
     if (!wrKind && /^[A-Z]/.test(name))
-        return [...sharedNodesOf(el, name, options), ...children];
+        return [...sharedNodesOf(el, name, options), ...children].map(node => ({ ...node, viaComponent: true }));
     const attrs = {};
     const alt = inLang(json.alt, options) ?? str(attrOf(el, 'alt'));
     if (alt !== undefined)

package/dist/check/producer-dom.d.ts

@@ -6,6 +6,8 @@ export interface DomNode {
     tag: string;
     attrs: Record<string, string>;
     text: string;
+    /** The element's own `id` (what `aria-labelledby` points at), not its `data-wr-id`. */
+    htmlId?: string;
     /** A form field that has a `<label>`: it sits inside one, or one points at it (`for`). */
     labelled?: true;
     children: DomNode[];

package/dist/check/producer-dom.js

@@ -23,6 +23,7 @@ export function serializeDom(root) {
         const labelled = fields.includes(tag) && (el.closest?.('label') != null || (fieldId !== null && pointedAt.has(fieldId)));
         return {
             ...(id ? { id } : {}),
+            ...(fieldId ? { htmlId: fieldId } : {}),
             wrType: el.getAttribute('data-wr-type'),
             tag,
             attrs,
@@ -44,7 +45,11 @@ function toCheckNode(node) {
 }
 /** The tree a rule sees, from what `serializeDom` read (wherever it ran). */
 export function checkPageFromSerialized(name, nodes) {
-    return { name, source: 'dom', nodes: nodes.map(toCheckNode) };
+    const elementIds = [];
+    const collect = (list) => list.forEach(node => { if (node.htmlId)
+        elementIds.push(node.htmlId); collect(node.children); });
+    collect(nodes);
+    return { name, source: 'dom', nodes: nodes.map(toCheckNode), elementIds };
 }
 export function checkPageFromDom(name, root) {
     return checkPageFromSerialized(name, serializeDom(root));

package/dist/check/rules.js

@@ -49,6 +49,35 @@ export const RULES = [
                 report(null, `${problem.message} (${problem.file}:${problem.line})`);
         },
     },
+    {
+        name: 'html-structure',
+        severity: 'warning',
+        run(page, report) {
+            // What a tag may hold directly, and what it must sit in: the HTML content model, for the tags a WrSection can be. A node under a component
+            // we do not read (`viaComponent`) is not judged: that component may draw the list around it.
+            const OWN_CHILDREN = { ul: ['li'], ol: ['li'], menu: ['li'] };
+            const MUST_SIT_IN = { li: ['ul', 'ol', 'menu'], dt: ['dl', 'div'], dd: ['dl', 'div'], figcaption: ['figure'], summary: ['details'] };
+            const INTERACTIVE = new Set(['a', 'button']);
+            const visit = (node, parent, interactive) => {
+                if (!node.viaComponent) {
+                    const allowed = parent ? OWN_CHILDREN[parent.tag] : undefined;
+                    if (parent && allowed && !allowed.includes(node.tag))
+                        report(node, `A <${node.tag}> inside a <${parent.tag}>: a list holds only <${allowed.join('>, <')}>.`);
+                    const sits = MUST_SIT_IN[node.tag];
+                    if (parent && sits && !sits.includes(parent.tag) && !parent.children.some(c => c.viaComponent))
+                        report(node, `A <${node.tag}> must be inside ${sits.map(t => `a <${t}>`).join(' or ')}, not a <${parent.tag}>.`);
+                }
+                // Links and buttons cannot hold each other: a browser repairs it in a way that breaks the page
+                if (INTERACTIVE.has(node.tag) && interactive && !node.attrs['{spread}'])
+                    report(node, `A <${node.tag}> inside a <${interactive.tag}>: an interactive element cannot hold another.`);
+                const next = INTERACTIVE.has(node.tag) ? node : interactive;
+                for (const child of node.children)
+                    visit(child, node, next);
+            };
+            for (const node of page.nodes)
+                visit(node, null, null);
+        },
+    },
     {
         name: 'img-alt',
         severity: 'warning',
@@ -222,7 +251,8 @@ export const RULES = [
                 if (n.kind !== 'input')
                     continue;
                 const written = Object.values(n.values?.label ?? {}).some(text => text.trim() !== '');
-                if (!written && !n.attrs['aria-label']?.trim())
+                // A drawn page has no JSON: there the label is the `<label>` the field sits in or the one that points at it (`insideLabel`, as `form-label` reads it)
+                if (!written && !n.attrs['aria-label']?.trim() && !n.insideLabel)
                     report(n, 'A form field has no label: a placeholder is not one, and the owner reads this name in the email.');
             }
         },
@@ -304,7 +334,8 @@ export const RULES = [
         name: 'aria-reference',
         severity: 'warning',
         run(page, report) {
-            const ids = new Set(everyNode(page).map(n => n.id).filter((id) => !!id));
+            // The Wr elements' ids, and (a drawn page) every `id` of the HTML: a plain element can be pointed at too
+            const ids = new Set([...everyNode(page).map(n => n.id).filter((id) => !!id), ...(page.elementIds ?? [])]);
             for (const n of everyNode(page)) {
                 for (const attribute of ['aria-labelledby', 'aria-describedby']) {
                     const value = n.attrs[attribute];

package/dist/check/types.d.ts

@@ -26,6 +26,8 @@ export interface CheckNode {
         key: string;
         side: string;
     }[];
+    /** Only the code producer says it: the node sits under a component we do not read (`<Card>`), so what is around it may be drawn by that component; the nesting rules do not judge it. */
+    viaComponent?: true;
     /** Shown as hidden in the JSON: the checks do not count it (it does not render), an outline says so. */
     hidden?: true;
     /** What the element says in each language, for the fields that are translated (`content`, `alt`, `ariaLabel`): field → language key → value. */
@@ -53,6 +55,8 @@ export interface CheckPage {
     project?: CheckProject;
     /** The ids of the form fields some `<label htmlFor>` of the code points at. */
     labelledIds?: string[];
+    /** Every `id` the HTML of the page has (only the DOM producer knows them: in the code a plain element's id can be computed). */
+    elementIds?: string[];
     /** What the page tells search engines (only the code producer knows it: the DOM has no `config`): text by language key, `default` first. */
     seo?: {
         title: Record<string, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webround/editor",
-    "version": "0.3.12",
+    "version": "0.3.14",
     "type": "module",
     "main": "./dist/index.js",
     "module": "./dist/index.js",
@@ -75,7 +75,7 @@
         "@lexical/selection": "^0.51.0",
         "@lexical/utils": "^0.51.0",
         "@monaco-editor/react": "^4.7.0",
-        "@webround/core": "^0.3.12",
+        "@webround/core": "^0.3.14",
         "highlight.js": "^11.12.0",
         "hls.js": "^1.5.0",
         "lexical": "^0.51.0",