@yuneta/gobj-ui 7.26.33 → 7.26.35

package/src/nav_item_badge.wiring.test.js

@@ -209,6 +209,38 @@ function errors()
     return logged.filter((l) => l.level === "error" || l.level === "warning").map((l) => l.msg);
 }
 
+/*  The NAME a reader computes for a control from its aria-labelledby,
+ *  as the accessible-name algorithm does: a reference to the control
+ *  itself reads its aria-label, any other the text of the element it
+ *  points at (a hidden one too, it is referenced directly), joined by
+ *  spaces. Without one, its aria-label.  */
+function name_of($control)
+{
+    const ids = ($control.getAttribute("aria-labelledby") || "").split(/\s+/).filter(Boolean);
+    if(ids.length === 0) {
+        return $control.getAttribute("aria-label");
+    }
+    /*  An id is looked up in the control's own tree: a nav made on its
+     *  own in a test is not on the page.  */
+    let $top = $control;
+    while($top.parentNode) {
+        $top = $top.parentNode;
+    }
+    return ids.map((id) => {
+        if(id === $control.id) {
+            return $control.getAttribute("aria-label") || "";
+        }
+        const $el = $top.querySelector(`#${id}`);
+        expect(!!$el, `aria-labelledby points at '${id}', which is not in its tree`).toBe(true);
+        return $el.textContent;
+    }).join(" ").trim();
+}
+
+function said(shell)
+{
+    return root(shell).querySelector(".SHELL_BADGE_STATUS").textContent;
+}
+
 
 describe("a badge declared in app_config.json", () => {
     test("renders: after the label in the rail, on the icon in the icon bar", () => {
@@ -216,7 +248,7 @@ describe("a badge declared in app_config.json", () => {
 
         const $rail = badge_in(zone(shell, "left"), "alarms");
         expect(shows($rail)).toEqual({text: "2", tones: ["warning"]});
-        expect($rail.getAttribute("role")).toBe("status");
+        expect($rail.getAttribute("role")).toBe(null);      // the shell says it now
         expect($rail.classList.contains("yui-badge")).toBe(true);
         expect($rail.classList.contains("yui-nav-badge-pinned")).toBe(false);
         expect($rail.parentNode.tagName).toBe("A");
@@ -562,3 +594,152 @@ describe("the toolbar badge takes a tone too", () => {
         expect(e[0]).toContain("yui_shell_set_toolbar_item_badge('bell')");
     });
 });
+
+/*
+ *  REV-CLOUD V23.5.5: what a READER gets. Up to 7.26.34 the badge was its
+ *  own live region: the count was never part of the item's name, the
+ *  region said a bare number, it was hidden while empty (so 0 -> 1 was
+ *  most likely never said), and inside a <button> (the toolbar, an
+ *  accordion head) it was not in the tree at all.
+ */
+describe("a reader gets the count with the name of what it counts", () => {
+    function control_of($badge)
+    {
+        return $badge.closest("a, button");
+    }
+
+    test("the count is part of the item's name, in every layout that draws one", () => {
+        const shell = new_shell();
+        for(const $b of badges_in(root(shell), "alarms")) {
+            const $a = control_of($b);
+            /*  rail and icon bar seed 2; the drawer's entry declares none  */
+            const expected = shows($b).text ? `alarms ${shows($b).text}` : "alarms";
+            expect(name_of($a)).toBe(expected);
+        }
+        yui_shell_set_nav_item_badge(shell, "alarms", 7);
+        for(const $b of badges_in(root(shell), "alarms")) {
+            expect(name_of(control_of($b))).toBe("alarms 7");
+        }
+        yui_shell_set_nav_item_badge(shell, "alarms", 0);
+        for(const $b of badges_in(root(shell), "alarms")) {
+            expect(name_of(control_of($b))).toBe("alarms");
+        }
+    });
+
+    test("tabs, cards and an accordion head -- a <button> -- too", () => {
+        let $c = root(new_nav({layout: "tabs", menu_id: "lab",
+            menu_items: [{id: "t", name: "t", icon: "yi-eye", route: "/t", badge: 2}]}));
+        expect(name_of(control_of(badge_in($c, "t")))).toBe("t 2");
+
+        $c = root(new_nav({layout: "cards", menu_id: "lab",
+            menu_items: [{id: "c", name: "c", icon: "yi-eye", route: "/c", badge: 3}]}));
+        expect(name_of(control_of(badge_in($c, "c")))).toBe("c 3");
+
+        $c = root(new_nav({layout: "accordion", menu_id: "lab",
+            menu_items: [{id: "s", name: "section", route: "/s", badge: 4, submenu: {items: []}}]}));
+        const $head = $c.querySelector(".yui-accordion-head");
+        expect($head.tagName).toBe("BUTTON");
+        expect(name_of($head)).toBe("section 4");
+    });
+
+    test("the toolbar's button too", () => {
+        const shell = new_shell();
+        const $btn = root(shell).querySelector('[data-toolbar-item-id="bell"]');
+        expect($btn.tagName).toBe("BUTTON");
+        expect(name_of($btn)).toBe("alarms 4");
+        yui_shell_set_toolbar_item_badge(shell, "bell", 9);
+        expect(name_of($btn)).toBe("alarms 9");
+    });
+
+    test("the name changes language with the app, the count stays", async () => {
+        const i18next = (await import("i18next")).default;
+        i18next.addResourceBundle("es", "translation", {"alarms": "alarmas"}, true, true);
+        const shell = new_shell();
+        yui_shell_set_nav_item_badge(shell, "alarms", 5);
+        yui_shell_set_translator(shell, i18next.getFixedT("es"));
+        yui_shell_language_changed(shell);
+        const $a = zone(shell, "left").querySelector('a[data-item-id="alarms"]');
+        expect(name_of($a)).toBe("alarmas 5");
+    });
+
+    test("one live region, always in the tree: not hidden, inside no control", () => {
+        const shell = new_shell();
+        const $status = root(shell).querySelector(".SHELL_BADGE_STATUS");
+        expect($status.getAttribute("role")).toBe("status");
+        expect($status.getAttribute("aria-live")).toBe("polite");
+        expect($status.getAttribute("aria-atomic")).toBe("true");
+        expect($status.hasAttribute("hidden")).toBe(false);
+        expect($status.classList.contains("is-sr-only")).toBe(true);
+        expect($status.closest("a, button")).toBe(null);
+        expect(said(shell)).toBe("");
+    });
+
+    test("the first count is said, with the item's name -- once, though three navs draw it", async () => {
+        const i18next = (await import("i18next")).default;
+        i18next.addResourceBundle("en", "translation",
+            {"{{name}}, {{n}}": "{{name}}, {{n}}", "alarms": "Alarms", "home": "Home"}, true, true);
+        const shell = new_shell();
+        yui_shell_set_translator(shell, i18next.getFixedT("en"));
+
+        /*  "home" has no badge: its first count is a change from nothing  */
+        yui_shell_set_nav_item_badge(shell, "home", 1);
+        expect(said(shell)).toBe("Home, 1");
+
+        const writes = [];
+        const $status = root(shell).querySelector(".SHELL_BADGE_STATUS");
+        const real = Object.getOwnPropertyDescriptor(Object.getPrototypeOf($status), "textContent");
+        Object.defineProperty($status, "textContent", {
+            get() {
+                return real.get.call(this);
+            },
+            set(v) {
+                writes.push(v);
+                real.set.call(this, v);
+            },
+            configurable: true
+        });
+        yui_shell_set_nav_item_badge(shell, "alarms", 3);
+        expect(writes).toEqual(["Alarms, 3"]);
+    });
+
+    test("the same count is no news, a count going away is not either, one coming back is", async () => {
+        const i18next = (await import("i18next")).default;
+        i18next.addResourceBundle("en", "translation",
+            {"{{name}}, {{n}}": "{{name}}, {{n}}", "alarms": "Alarms"}, true, true);
+        const shell = new_shell();
+        yui_shell_set_translator(shell, i18next.getFixedT("en"));
+        const $status = root(shell).querySelector(".SHELL_BADGE_STATUS");
+
+        /*  The seed is 2: setting 2 changes nothing a reader sees  */
+        yui_shell_set_nav_item_badge(shell, "alarms", 2);
+        expect(said(shell)).toBe("");
+
+        yui_shell_set_nav_item_badge(shell, "alarms", 3);
+        expect(said(shell)).toBe("Alarms, 3");
+        const node = $status.firstChild;
+
+        yui_shell_set_nav_item_badge(shell, "alarms", 3, "danger");     // only the tone
+        expect($status.firstChild).toBe(node);
+
+        yui_shell_set_nav_item_badge(shell, "alarms", 0);
+        expect($status.firstChild).toBe(node);                          // not said
+
+        yui_shell_set_nav_item_badge(shell, "alarms", 3);
+        expect(said(shell)).toBe("Alarms, 3");
+        expect($status.firstChild).not.toBe(node);                      // said again
+    });
+
+    test("the toolbar's count is said with the button's name", async () => {
+        const i18next = (await import("i18next")).default;
+        i18next.addResourceBundle("en", "translation",
+            {"{{name}}, {{n}}": "{{name}}, {{n}}", "alarms": "Alarms"}, true, true);
+        const shell = new_shell();
+        yui_shell_set_translator(shell, i18next.getFixedT("en"));
+
+        yui_shell_set_toolbar_item_badge(shell, "bell", 4);     // the seed: no news
+        expect(said(shell)).toBe("");
+        yui_shell_set_toolbar_item_badge(shell, "bell", 120);
+        expect(said(shell)).toBe("Alarms, 99+");
+        expect(errors()).toEqual([]);
+    });
+});

package/src/shell_route_map.js

@@ -32,7 +32,7 @@ import {
     log_error,
 } from "@yuneta/gobj-js";
 
-import {yui_shell_show_modal, yui_shell_popup_layer} from "./shell_modals.js";
+import {yui_shell_show_modal} from "./shell_modals.js";
 import {yui_shell_nav_map} from "./c_yui_shell.js";
 import {attach_clear} from "./yui_inputs.js";
 
@@ -86,7 +86,7 @@ function render_node(node)
     let row = [];
     if(node.icon && /^yi-[a-z0-9-]+$/.test(node.icon)) {
         row.push(["span", {class: "icon ROUTEMAP_ICON"},
-            [["i", {class: node.icon}]]]);
+            [["i", {class: node.icon, "aria-hidden": "true"}]]]);
     }
     row.push(["span", {class: "ROUTEMAP_NAME", i18n: node.label},
         text_node(node.label)]);
@@ -123,10 +123,22 @@ function render_node(node)
                     (node.ref ? " ROUTEMAP_IS_REF" : "");
     let $row;
     if(node.route) {
-        $row = createElement2(
-            ["a", {class: "ROUTEMAP_LINK ROUTEMAP_ROW" + row_class,
-                   href: "#" + node.route,
-                   title: node.route}, row]);
+        /*  Its NAME is the node's label, with its key (build_body()
+         *  translates it with the rest): taken from its content, a link
+         *  read the label, the route, the gclass, the event and "shown
+         *  above" as one name. The title stays the route, data shown
+         *  where the reader points; "you are here" is aria-current.  */
+        let a_attrs = {class: "ROUTEMAP_LINK ROUTEMAP_ROW" + row_class,
+                       href: "#" + node.route,
+                       title: node.route};
+        if(node.label) {
+            a_attrs["aria-label"] = node.label;
+            a_attrs["data-i18n-aria-label"] = node.label;
+        }
+        if(node.current) {
+            a_attrs["aria-current"] = "page";
+        }
+        $row = createElement2(["a", a_attrs, row]);
     } else {
         $row = createElement2(
             ["span", {class: "ROUTEMAP_ROW ROUTEMAP_STRUCT" + row_class}, row]);
@@ -497,8 +509,13 @@ export function yui_shell_show_route_map(shell, opts)
          *  `keep_on_navigate` gives it the same survives-navigation
          *  behaviour there. */
         let $body = build_body(shell, t);
-        let $parent = yui_shell_popup_layer(shell) ||
-            (typeof document !== "undefined" &&
+        /*  The WINDOW layer, where every window lives (the legacy
+         *  '#top-layer' when a page has one): no `$parent` takes it. It was
+         *  the popup layer, above the drawer and in the way of the
+         *  toolbar's dropdowns, which opened BEHIND the map where they
+         *  met it, and in an order of its own that no other window could
+         *  rise above.  */
+        let $parent = (typeof document !== "undefined" &&
                 document.getElementById("top-layer")) || null;
         let win = gobj_create_service(WIN_NAME, "C_YUI_WINDOW", {
             $parent:    $parent,

package/src/table_editor_name.wiring.test.js

@@ -0,0 +1,201 @@
+/***********************************************************************
+ *          table_editor_name.wiring.test.js
+ *
+ *      The box Tabulator draws in a cell while it is edited had no
+ *      name: no label, no aria-label, no title (REV-CLOUD V23.5.6, seen
+ *      in the alarms of an estadodelaire device). Both tables of the
+ *      library that edit in place -- a table field of C_YUI_FORM and
+ *      the inline editing of C_YUI_TREEDB_TOPIC_WITH_FORM -- now name
+ *      it after its column, asked at the moment of editing: Tabulator
+ *      calls a function `editorParams` with the cell, and its built-in
+ *      editors write the `elementAttributes` it answers.
+ *
+ *      Driven through the real gclasses on a document double, with a
+ *      Tabulator double that keeps the settings it was built with.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, test, expect, beforeAll, afterEach, vi} from "vitest";
+import {install_dom_double} from "../test/dom_double.js";
+
+install_dom_double();
+
+if(typeof globalThis.ResizeObserver === "undefined") {
+    globalThis.ResizeObserver = class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+    };
+}
+
+const tables = vi.hoisted(() => []);
+vi.mock("tabulator-tables", () => {
+    class FakeTabulator {
+        constructor($el, settings) {
+            this.$el = $el;
+            this.element = $el;
+            this.settings = settings;
+            this.options = settings;
+            this.externalEvents = {events: {}};
+            this.initialized = true;
+            tables.push(this);
+            return new Proxy(this, {
+                get(target, prop) {
+                    if(prop in target) {
+                        return target[prop];
+                    }
+                    return () => [];
+                }
+            });
+        }
+        on(ev, fn) {
+            (this.externalEvents.events[ev] = this.externalEvents.events[ev] || []).push(fn);
+        }
+        off(ev) {
+            delete this.externalEvents.events[ev];
+        }
+        getRows() {
+            return [];
+        }
+        destroy() {
+        }
+    }
+    return {TabulatorFull: FakeTabulator, Tabulator: FakeTabulator};
+});
+
+/*  No json field is opened here, but the form imports the editor.  */
+vi.mock("vanilla-jsoneditor", () => ({
+    createJSONEditor: () => ({
+        get() {
+            return {text: ""};
+        },
+        set() {},
+        destroy() {},
+    }),
+}));
+
+const {
+    SDATA_END, gclass_create,
+    gobj_start_up, gobj_create_yuno, gobj_create_pure_child, gobj_create_service,
+    gobj_start, gobj_write_bool_attr,
+} = await import("@yuneta/gobj-js");
+const {register_c_yui_form} = await import("./c_yui_form.js");
+const {register_c_yui_treedb_topic_with_form} = await import("./c_yui_treedb_topic_with_form.js");
+
+let i18next = null;
+let yuno = null;
+let seq = 0;
+
+beforeAll(async () => {
+    i18next = (await import("i18next")).default;
+    await i18next.init({
+        lng: "en",
+        resources: {
+            en: {translation: {"threshold": "Threshold", "users.name": "User name"}},
+            es: {translation: {"threshold": "Umbral", "users.name": "Nombre del usuario"}}
+        }
+    });
+    gobj_start_up(null, null, null, null, null, null, null);
+    gclass_create("C_TEST_EDITOR_HOST", [], [["ST_IDLE", []]], {}, 0, [SDATA_END()], {}, 0, 0, 0, 0);
+    gclass_create(
+        "C_TEST_EDITOR_APP",
+        [["EV_RECORD_CHANGED", 0]],
+        [["ST_IDLE", [["EV_RECORD_CHANGED", () => 0, null]]]],
+        {}, 0, [SDATA_END()], {}, 0, 0, 0, 0
+    );
+    register_c_yui_form();
+    register_c_yui_treedb_topic_with_form();
+    yuno = gobj_create_yuno("editor_name_yuno", "C_TEST_EDITOR_HOST", {});
+    gobj_start(yuno);
+});
+
+afterEach(async () => {
+    tables.length = 0;
+    await i18next.changeLanguage("en");
+});
+
+function column(table, field)
+{
+    return (table.settings.columns || []).find((c) => c.field === field);
+}
+
+/*  What Tabulator hands the editor when a cell of `col` starts editing.  */
+function editor_params(col)
+{
+    return (typeof col.editorParams === "function")
+        ? col.editorParams({getValue: () => ""})
+        : (col.editorParams || {});
+}
+
+describe("a table field of C_YUI_FORM", () => {
+    test("names the editor of an editable cell after its column, in the language of the moment", async () => {
+        const app = gobj_create_pure_child(`eapp${++seq}`, "C_TEST_EDITOR_APP", {}, yuno);
+        gobj_start(app);
+        const form = gobj_create_pure_child(`eform${seq}`, "C_YUI_FORM", {
+            template: {
+                triggers: {
+                    type: "array",
+                    flag: ["persistent", "writable", "table"],
+                    table: {
+                        id:    {type: "string", flag: ["writable", "persistent", "required"]},
+                        value: {type: "string", header: "threshold", flag: ["writable", "persistent"]},
+                        note:  {type: "string", flag: ["persistent"]}      // not writable
+                    }
+                }
+            },
+            record: {triggers: []},
+            editable: true,
+        }, app);
+        gobj_start(form);
+        expect(tables.length).toBe(1);
+
+        const value = column(tables[0], "value");
+        expect(value.editor).toBe("input");
+        expect(editor_params(value).elementAttributes).toEqual(
+            {"aria-label": "Threshold", title: "Threshold"});
+
+        await i18next.changeLanguage("es");
+        expect(editor_params(value).elementAttributes).toEqual(
+            {"aria-label": "Umbral", title: "Umbral"});
+
+        /*  A column nobody edits has no editor to name: what params it
+         *  had for one are left as they were.  */
+        const note = column(tables[0], "note");
+        expect(note.editor).toBe(undefined);
+        expect(typeof note.editorParams).not.toBe("function");
+    });
+});
+
+describe("the inline editing of C_YUI_TREEDB_TOPIC_WITH_FORM", () => {
+    test("names the editor after the header's own cascade, in the language of the moment", async () => {
+        const form = gobj_create_service(`etopic${++seq}`, "C_YUI_TREEDB_TOPIC_WITH_FORM", {
+            treedb_name: "treedb_test",
+            topic_name: "users",
+            desc: {
+                id: "users",
+                pkey: "id",
+                cols: [
+                    {id: "id", header: "Id", type: "string", flag: ["persistent", "required"]},
+                    {id: "name", header: "Name", type: "string", flag: ["persistent", "writable"]}
+                ]
+            }
+        }, yuno);
+        gobj_write_bool_attr(form, "editable", true);
+        gobj_start(form);
+        expect(tables.length > 0).toBe(true);
+        const table = tables[tables.length - 1];
+
+        const name = column(table, "name");
+        expect(name.editor).toBe("input");
+        expect(editor_params(name).elementAttributes).toEqual(
+            {"aria-label": "User name", title: "User name"});
+
+        await i18next.changeLanguage("es");
+        expect(editor_params(name).elementAttributes).toEqual(
+            {"aria-label": "Nombre del usuario", title: "Nombre del usuario"});
+
+        /*  The pkey is never edited in place.  */
+        expect(column(table, "id").editor).toBe(undefined);
+    });
+});

package/src/treedb_column_title.wiring.test.js

@@ -0,0 +1,151 @@
+/***********************************************************************
+ *          treedb_column_title.wiring.test.js
+ *
+ *      The header of a column of C_YUI_TREEDB_TOPIC_WITH_FORM is
+ *      translated by a CASCADE -- '<topic>.<col>', then '<col>', then
+ *      the schema's header -- and carries the key a language change
+ *      re-translates it by (data-i18n). Up to 7.26.34 that key was
+ *      always the bare '<col>', whatever key had translated it:
+ *
+ *        (a) a header translated by '<topic>.<col>' alone carried no
+ *            key, and stayed in its language;
+ *        (b) one translated by both went to the bare column's text.
+ *
+ *      The apps with a shell did not show it: the view rebuilds its
+ *      columns on EV_LANGUAGE_CHANGED, after refresh_language(), and
+ *      the formatter runs the cascade again. A refresh_language() alone
+ *      did. The twin of C_YUI_FORM's field labels
+ *      (form_label_i18n.wiring.test.js).
+ *
+ *      The real gclass on a document double, with a Tabulator double
+ *      that keeps the columns it was built with.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, test, expect, beforeAll, afterEach, vi} from "vitest";
+import {install_dom_double} from "../test/dom_double.js";
+
+install_dom_double();
+
+if(typeof globalThis.ResizeObserver === "undefined") {
+    globalThis.ResizeObserver = class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+    };
+}
+
+const tables = vi.hoisted(() => []);
+vi.mock("tabulator-tables", () => {
+    class FakeTabulator {
+        constructor($el, settings) {
+            this.element = $el;
+            this.options = settings;
+            this.externalEvents = {events: {}};
+            tables.push(this);
+            return new Proxy(this, {
+                get(target, prop) {
+                    if(prop in target) {
+                        return target[prop];
+                    }
+                    return () => [];
+                }
+            });
+        }
+        on(ev, fn) {
+            (this.externalEvents.events[ev] = this.externalEvents.events[ev] || []).push(fn);
+        }
+        off(ev) {
+            delete this.externalEvents.events[ev];
+        }
+        destroy() {}
+    }
+    return {TabulatorFull: FakeTabulator, Tabulator: FakeTabulator};
+});
+
+const {
+    SDATA_END, gclass_create,
+    gobj_start_up, gobj_create_yuno, gobj_create_service, gobj_start,
+} = await import("@yuneta/gobj-js");
+const {register_c_yui_treedb_topic_with_form} = await import("./c_yui_treedb_topic_with_form.js");
+
+let i18next = null;
+let yuno = null;
+let seq = 0;
+
+beforeAll(async () => {
+    i18next = (await import("i18next")).default;
+    await i18next.init({
+        lng: "en",
+        resources: {
+            en: {translation: {
+                "users.alias": "User alias",                        // (a)
+                "users.title": "User title", "title": "Title",      // (b)
+                "email": "E-mail"                                   // the column alone
+            }},
+            es: {translation: {
+                "users.alias": "Alias del usuario",
+                "users.title": "Título del usuario", "title": "Título",
+                "email": "Correo"
+            }}
+        }
+    });
+    gobj_start_up(null, null, null, null, null, null, null);
+    gclass_create("C_TEST_TITLE_HOST", [], [["ST_IDLE", []]], {}, 0, [SDATA_END()], {}, 0, 0, 0, 0);
+    register_c_yui_treedb_topic_with_form();
+    yuno = gobj_create_yuno("column_title_yuno", "C_TEST_TITLE_HOST", {});
+    gobj_start(yuno);
+});
+
+afterEach(async () => {
+    tables.length = 0;
+    await i18next.changeLanguage("en");
+});
+
+/*  The header a column draws, as Tabulator asks its formatter.  */
+function header_of(field)
+{
+    const view = gobj_create_service(`title_view${++seq}`, "C_YUI_TREEDB_TOPIC_WITH_FORM", {
+        treedb_name: "treedb_test",
+        topic_name: "users",
+        desc: {id: "users", pkey: "id", cols: [
+            {id: "id", header: "Id", type: "string", flag: ["persistent", "required"]},
+            {id: field, header: field, type: "string", flag: ["persistent"]}
+        ]}
+    }, yuno);
+    gobj_start(view);
+    const col = tables[tables.length - 1].options.columns.find((c) => c.field === field);
+    expect(typeof col.titleFormatter).toBe("function");
+    return col.titleFormatter({});
+}
+
+describe("the header of a column changes language by the key that translated it", () => {
+    test("(a) translated by '<topic>.<col>' alone", async () => {
+        const $h = header_of("alias");
+        expect($h.textContent).toBe("User alias");
+        expect($h.getAttribute("data-i18n")).toBe("users.alias");
+        await i18next.changeLanguage("es");
+        expect(i18next.t($h.getAttribute("data-i18n"))).toBe("Alias del usuario");
+    });
+
+    test("(b) translated by both: the topic's key, before and after", async () => {
+        const $h = header_of("title");
+        expect($h.textContent).toBe("User title");
+        expect($h.getAttribute("data-i18n")).toBe("users.title");
+        await i18next.changeLanguage("es");
+        expect(i18next.t($h.getAttribute("data-i18n"))).toBe("Título del usuario");
+    });
+
+    test("translated by '<col>' alone, as before", () => {
+        const $h = header_of("email");
+        expect($h.textContent).toBe("E-mail");
+        expect($h.getAttribute("data-i18n")).toBe("email");
+    });
+
+    test("translated by nothing: the schema's header, with no key, as before", () => {
+        const $h = header_of("zone");
+        expect($h.textContent).toBe("zone");
+        expect($h.getAttribute("data-i18n")).toBe(null);
+    });
+});