@yuneta/gobj-ui 7.26.33 → 7.26.35

package/src/window_stacking.wiring.test.js

@@ -0,0 +1,334 @@
+/***********************************************************************
+ *          window_stacking.wiring.test.js
+ *
+ *      Every window the library opens lives in the shell's WINDOW layer,
+ *      and every window -- docked or not -- is ordered by ONE number
+ *      (yui_shell_raise_window).
+ *
+ *      Up to 7.26.34 four places of the library put their windows in
+ *      the shell's POPUP layer -- the site map, the raw json of the
+ *      treedb graph and of the treedb topics, the gclass viewer opened
+ *      from no window, the json of a treedb topic form: above the
+ *      drawer, in the way of the toolbar's dropdowns (which opened
+ *      behind them where they met). And there were two orders: the
+ *      dock raised its windows to a counter of its own, a window with
+ *      no dock sat at 3 and was moved to the end of its parent to rise,
+ *      so a window opened later without a dock opened UNDER any docked
+ *      one, and no click brought it up.
+ *
+ *      The real gclasses on a document double, with doubles of what
+ *      draws (Tabulator, the treedb graph's engine) and of a backend.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, test, expect, beforeAll, beforeEach, vi} from "vitest";
+import {readFileSync} from "node:fs";
+import {dirname, join} from "node:path";
+import {fileURLToPath} from "node:url";
+import {install_dom_double} from "../test/dom_double.js";
+
+install_dom_double();
+
+/*  A laptop: a json opens in a window, not in a phone's sheet.  */
+globalThis.innerWidth = 1280;
+if(globalThis.window) {
+    globalThis.window.innerWidth = 1280;
+}
+
+if(typeof globalThis.ResizeObserver === "undefined") {
+    globalThis.ResizeObserver = class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+    };
+}
+if(typeof globalThis.matchMedia === "undefined") {
+    globalThis.matchMedia = () => ({matches: false, addEventListener() {}, removeEventListener() {}});
+}
+
+vi.mock("tabulator-tables", () => {
+    class FakeTabulator {
+        constructor($el, settings) {
+            this.element = $el;
+            this.options = settings;
+            this.externalEvents = {events: {}};
+            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, SDATA_END, data_type_t, gclass_create, gobj_write_attr,
+    gobj_start_up, gobj_create_yuno, gobj_create, gobj_create_service, gobj_create_pure_child,
+    gobj_start, gobj_read_attr, gobj_read_pointer_attr, gobj_subscribe_event, gobj_send_event,
+    gobj_change_state, gobj_full_name, set_log_callback,
+} = await import("@yuneta/gobj-js");
+const {register_c_yui_shell, yui_shell_window_layer} = await import("./c_yui_shell.js");
+const {register_c_yui_nav} = await import("./c_yui_nav.js");
+const {register_c_yui_window} = await import("./c_yui_window.js");
+const {register_c_yui_window_manager} = await import("./c_yui_window_manager.js");
+const {register_c_yui_json} = await import("./c_yui_json.js");
+const {register_c_yui_gclass} = await import("./c_yui_gclass.js");
+const {register_c_yui_treedb_topics} = await import("./c_yui_treedb_topics.js");
+const {register_c_yui_treedb_graph} = await import("./c_yui_treedb_graph.js");
+const {register_c_yui_treedb_topic_with_form} = await import("./c_yui_treedb_topic_with_form.js");
+const {yui_shell_show_route_map} = await import("./shell_route_map.js");
+const {open_gclass_view} = await import("./yui_gclass_view.js");
+
+const SRC = dirname(fileURLToPath(import.meta.url));
+const logged = [];
+let yuno = null;
+let shell = null;
+let seq = 0;
+
+beforeAll(async () => {
+    const i18next = (await import("i18next")).default;
+    await i18next.init({lng: "en", resources: {}});
+    gobj_start_up(null, null, null, null, null, null, null);
+    set_log_callback((level, msg) => {
+        logged.push({level: String(level), msg: String(msg)});
+    });
+    gclass_create("C_TEST_STACK_HOST", [], [["ST_IDLE", []]], {}, 0, [SDATA_END()], {}, 0, 0, 0, 0);
+    gclass_create(
+        "C_TEST_STACK_VIEW", [], [["ST_IDLE", []]], {
+            mt_create: (gobj) => {
+                gobj_write_attr(gobj, "$container", document.createElement("div"));
+            }
+        }, 0, [
+            SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "view root"),
+            SDATA_END()
+        ], {}, 0, 0, 0, 0
+    );
+    gclass_create(
+        "C_TEST_STACK_APP",
+        [["EV_RECORD_WRITTEN", 0], ["EV_TOPIC_SELECTED", 0], ["EV_OPERATION_MODE_CHANGED", 0]],
+        [["ST_IDLE", [
+            ["EV_RECORD_WRITTEN", () => 0, null],
+            ["EV_TOPIC_SELECTED", () => 0, null],
+            ["EV_OPERATION_MODE_CHANGED", () => 0, null],
+        ]]],
+        {}, 0, [SDATA_END()], {}, 0, 0, 0, 0
+    );
+    /*  A backend in session that answers nothing.  */
+    gclass_create("C_TEST_STACK_REMOTE", [], [["ST_SESSION", []]],
+        {mt_command_parser: () => null}, 0, [SDATA_END()], {}, 0, 0, 0, 0);
+    /*  The treedb graph's engine, silent: this is about its window.  */
+    const ENGINE_EVENTS = [
+        "EV_DESCS", "EV_CLEAR_DATA", "EV_LOAD_DATA", "EV_NODE_CREATED",
+        "EV_NODE_UPDATED", "EV_NODE_DELETED", "EV_GRAPHS_WRITE_REFUSED",
+        "EV_SHOW", "EV_HIDE", "EV_RESIZE", "EV_THEME", "EV_LANGUAGE_CHANGED",
+        "EV_SET_OPERATION_MODE", "EV_SET_LAYOUT"
+    ];
+    gclass_create(
+        "C_G6_NODES_TREE",
+        ENGINE_EVENTS.map((e) => [e, 0]).concat([["EV_UPDATE_NODE", 2]]),
+        [["ST_IDLE", ENGINE_EVENTS.map((e) => [e, () => 0, null])]],
+        {
+            mt_create: (gobj) => {
+                const subscriber = gobj_read_pointer_attr(gobj, "subscriber");
+                if(subscriber) {
+                    gobj_subscribe_event(gobj, null, {}, subscriber);
+                }
+            }
+        },
+        0,
+        [
+            SDATA(data_type_t.DTP_POINTER, "subscriber", 0, null, ""),
+            SDATA(data_type_t.DTP_POINTER, "$container", 0, null, ""),
+            SDATA(data_type_t.DTP_POINTER, "gobj_remote_yuno", 0, null, ""),
+            SDATA(data_type_t.DTP_STRING, "treedb_name", 0, "", ""),
+            SDATA(data_type_t.DTP_JSON, "layout_names", 0, "[]", ""),
+            SDATA(data_type_t.DTP_STRING, "layout", 0, "", ""),
+            SDATA_END()
+        ],
+        {}, 0, 0, 0, 0
+    );
+    register_c_yui_shell();
+    register_c_yui_nav();
+    register_c_yui_window();
+    register_c_yui_window_manager();
+    register_c_yui_json();
+    register_c_yui_gclass();
+    register_c_yui_treedb_topics();
+    register_c_yui_treedb_graph();
+    register_c_yui_treedb_topic_with_form();
+    yuno = gobj_create_yuno("stacking_yuno", "C_TEST_STACK_HOST", {});
+    gobj_start(yuno);
+
+    shell = gobj_create("stack_shell", "C_YUI_SHELL", {
+        config: {
+            shell: {
+                zones: {left: {host: "menu.primary"}, center: {host: "stage.main"}},
+                stages: {main: {zone: "center", default_route: "/home"}}
+            },
+            menu: {primary: {items: [
+                {id: "home", name: "home", route: "/home",
+                    target: {stage: "main", gclass: "C_TEST_STACK_VIEW", kw: {}}}
+            ]}}
+        },
+        use_hash: false
+    }, yuno);
+    gobj_start(shell);
+});
+
+beforeEach(() => {
+    logged.length = 0;
+});
+
+function errors()
+{
+    return logged.filter((l) => l.level === "error").map((l) => l.msg);
+}
+
+/*  Identity, asked as a boolean (a failing toBe() over a DOM double
+ *  makes vitest pretty-print it, and the double cannot be printed).  */
+function in_window_layer(win)
+{
+    return gobj_read_attr(win, "$container").parentNode === yui_shell_window_layer(shell);
+}
+
+function z_of(win)
+{
+    return Number(gobj_read_attr(win, "$container").style.zIndex);
+}
+
+function press(win)
+{
+    gobj_read_attr(win, "$container").dispatchEvent({type: "pointerdown"});
+}
+
+function remote()
+{
+    const r = gobj_create_service(`stack_remote${++seq}`, "C_TEST_STACK_REMOTE", {}, yuno);
+    gobj_change_state(r, "ST_SESSION");
+    return r;
+}
+
+describe("every window the library opens lives in the window layer", () => {
+    test("the site map", () => {
+        const win = yui_shell_show_route_map(shell);
+        expect(!!win).toBe(true);
+        expect(in_window_layer(win)).toBe(true);
+        yui_shell_show_route_map(shell);     // the second call closes it
+    });
+
+    test("the raw json of the treedb topics", () => {
+        const app = gobj_create(`stack_app${++seq}`, "C_TEST_STACK_APP", {}, shell);
+        const topics = gobj_create_service(`stack_topics${seq}`, "C_YUI_TREEDB_TOPICS", {
+            treedb_name: "treedb_test",
+            gobj_remote_yuno: remote(),
+            subscriber: app
+        }, app);
+        gobj_start(topics);
+        gobj_send_event(topics, "EV_OPEN_JSON", {}, topics);
+        const win = topics.priv.json_win;
+        expect(!!win).toBe(true);
+        expect(in_window_layer(win)).toBe(true);
+    });
+
+    test("the raw json of the treedb graph", () => {
+        const app = gobj_create(`stack_app${++seq}`, "C_TEST_STACK_APP", {}, shell);
+        const graph = gobj_create_service(`stack_graph${seq}`, "C_YUI_TREEDB_GRAPH", {
+            treedb_name: "treedb_test",
+            gobj_remote_yuno: remote(),
+            subscriber: app
+        }, app);
+        gobj_send_event(graph, "EV_OPEN_JSON", {}, graph);
+        const win = graph.priv.json_win;
+        expect(!!win).toBe(true);
+        expect(in_window_layer(win)).toBe(true);
+    });
+
+    test("the gclass viewer opened from no window", () => {
+        const host = gobj_create(`stack_host${++seq}`, "C_TEST_STACK_VIEW", {}, shell);
+        const handle = open_gclass_view(host, "C_YUI_WINDOW", {});
+        expect(!!(handle && handle.win)).toBe(true);
+        expect(in_window_layer(handle.win)).toBe(true);
+    });
+
+    test("the json of a treedb topic form (its schema)", () => {
+        const app = gobj_create(`stack_app${++seq}`, "C_TEST_STACK_APP", {}, shell);
+        const form = gobj_create_service(`stack_form${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"]}
+            ]}
+        }, app);
+        gobj_start(form);
+        gobj_send_event(form, "EV_SHOW_SCHEMA", {}, form);
+        const win = form.priv.schema_win;
+        expect(!!win).toBe(true);
+        expect(in_window_layer(win)).toBe(true);
+    });
+});
+
+describe("one z-order for every window, docked or not", () => {
+    test("a window opened later is on top; a press brings either up", () => {
+        const dock = gobj_create_service(`stack_dock${++seq}`, "C_YUI_WINDOW_MANAGER", {}, yuno);
+        gobj_start(dock);
+        const docked = gobj_create_service(`stack_docked${seq}`, "C_YUI_WINDOW",
+            {header: "d", body: ["div", {}, "d"], manager: dock}, yuno);
+        gobj_start(docked);
+        const floating = gobj_create_service(`stack_floating${seq}`, "C_YUI_WINDOW",
+            {header: "f", body: ["div", {}, "f"]}, yuno);
+        gobj_start(floating);
+
+        /*  Both in the window layer, the later one on top -- it opened
+         *  UNDER the docked one, whatever came first.  */
+        expect(in_window_layer(docked) && in_window_layer(floating)).toBe(true);
+        expect(z_of(floating) > z_of(docked)).toBe(true);
+
+        /*  A press on the docked one: the dock raises it, on the same
+         *  counter.  */
+        press(docked);
+        expect(z_of(docked) > z_of(floating)).toBe(true);
+
+        /*  A press on the floating one brings it up again: it crosses
+         *  the FSM as EV_SHOW.  */
+        press(floating);
+        expect(z_of(floating) > z_of(docked)).toBe(true);
+
+        /*  And the dock's chip, the same.  */
+        gobj_send_event(dock, "EV_FOCUS_WINDOW", {window: gobj_full_name(docked)}, docked);
+        expect(z_of(docked) > z_of(floating)).toBe(true);
+        expect(errors()).toEqual([]);
+    });
+});
+
+describe("the layers, as the stylesheet stacks them", () => {
+    /*  CSS read as text: the double has no layout. Every window is in the
+     *  window layer, inside the overlay layer; so the drawer (in the
+     *  overlay, above the window layer), the toolbar's dropdowns (popup
+     *  layer), the dialogs (modal) and the toasts (notification) are all
+     *  above every window, whatever number it takes.  */
+    test("the window layer is under the drawer, and every layer above it is above the overlay", () => {
+        const css = readFileSync(join(SRC, "c_yui_shell.css"), "utf8");
+        const z = (selector) => {
+            const m = css.match(new RegExp(selector + "\\s*\\{([^}]*)\\}"));
+            const v = m && m[1].match(/z-index:\s*(\d+)/);
+            return v ? Number(v[1]) : NaN;
+        };
+        expect(z("\\.yui-layer > \\.yui-window-layer") < z("\\.yui-drawer")).toBe(true);
+        const overlay = z("\\.yui-layer-overlay");
+        for(const layer of ["popup", "modal", "notification"]) {
+            expect(z(`\\.yui-layer-${layer}`) > overlay, layer).toBe(true);
+        }
+    });
+});

package/src/yui_badge.js

@@ -18,14 +18,26 @@
  *      ALWAYS RENDERED, hidden when empty, so the runtime setters have a
  *      node to write into and never rebuild the control that holds it.
  *
- *      role="status" and NOT aria-hidden, deliberately.  The control
- *      carries an explicit aria-label, and an explicit label REPLACES
- *      the element's content for a screen reader -- so a badge inside
- *      it would be silent.  As its own live region it is both read and
- *      announced when the count changes, which is the whole point of a
- *      badge that means "something needs you".  For the same reason a
- *      write that changes nothing touches no DOM: rewriting the same
- *      number would have it announced again on every tick.
+ *      PART OF THE CONTROL'S NAME (name_control_with_badge()).  The
+ *      control carries an explicit aria-label, and an explicit label
+ *      REPLACES the element's content for a screen reader -- so a badge
+ *      inside it is silent, and inside a <button> (the toolbar, an
+ *      accordion head) its children are not even in the tree.  The
+ *      control is labelled by ITSELF (its aria-label, which
+ *      refresh_language() re-translates) and by the badge: the name is
+ *      "Alarms 3" while there is a count, "Alarms" while there is none,
+ *      with nothing composed in javascript that a language switch would
+ *      leave behind.
+ *
+ *      NOT a live region any more.  Up to 7.26.34 the badge was its own
+ *      role="status", and that said "3" with no word of what has three;
+ *      hidden while empty, it was not in the tree when the first count
+ *      arrived, so 0 -> 1 was most likely never said; and inside a
+ *      <button> it was not there at all.  The change is said by the
+ *      shell, in one live region of its own that is always there, with
+ *      the name of the item: "Alarms, 3" (yui_shell_set_nav_item_badge,
+ *      yui_shell_set_toolbar_item_badge).  A write that changes nothing
+ *      still touches no DOM.
  *
  *      A TONE, optional: one of BADGE_TONES, drawn as Bulma's
  *      `is-<tone>` on the badge.  It says HOW BAD the count is -- the
@@ -52,6 +64,10 @@ export const BADGE_TONES = Object.freeze([
     "danger", "warning", "info", "success", "primary", "link"
 ]);
 
+/*  Unique ids for the badges and the controls they name: the
+ *  aria-labelledby of a control points at two of them.  */
+let __badge_seq__ = 0;
+
 
 /************************************************************
  *  The text a badge shows for `value`, "" when it shows none.
@@ -101,8 +117,7 @@ export function badge_node(value, tone, classes, who)
     let text = badge_text(value);
     let known = badge_tone(tone, who);
     let attrs = {
-        class: known ? `${classes} is-${known}` : classes,
-        role:  "status"
+        class: known ? `${classes} is-${known}` : classes
     };
     if(!text) {
         attrs.hidden = "hidden";
@@ -110,6 +125,35 @@ export function badge_node(value, tone, classes, who)
     return ["span", attrs, text_node(text)];
 }
 
+/************************************************************
+ *  Make the count part of the NAME of the control that carries
+ *  the badge: its `aria-labelledby` points at the control itself
+ *  and at the badge.
+ *
+ *  The control keeps its `aria-label` and its
+ *  data-i18n-aria-label: a self-reference reads the aria-label,
+ *  so the name is the translated label followed by the badge's
+ *  text -- "Alarms 3" -- or the label alone while the badge is
+ *  empty. A painted count is in the name at once, and a language
+ *  switch re-translates the label as it always did.
+ *
+ *  Both are createElement2() descriptions, before anything is
+ *  built: `control_attrs` (the attrs of the <a> or <button>, which
+ *  must carry its aria-label) gets an `id` when it has none, and
+ *  the `aria-labelledby`; `badge` (what badge_node() answered)
+ *  gets its `id`.
+ ************************************************************/
+export function name_control_with_badge(control_attrs, badge)
+{
+    let seq = ++__badge_seq__;
+    if(!control_attrs.id) {
+        control_attrs.id = `yui-badged-${seq}`;
+    }
+    let badge_attrs = badge[1];
+    badge_attrs.id = `yui-badge-${seq}`;
+    control_attrs["aria-labelledby"] = `${control_attrs.id} ${badge_attrs.id}`;
+}
+
 /************************************************************
  *  Write a badge that is already in the DOM, as badge_node()
  *  draws it.  `tone` is one badge_tone() answered: the setter
@@ -134,9 +178,10 @@ export function paint_badge($badge, value, tone)
         $badge.setAttribute("hidden", "hidden");
         return;
     }
-    /*  Do not touch the DOM when nothing changed: role="status" is a
-     *  live region, and rewriting the same number would have a screen
-     *  reader announce it again on every tick. */
+    /*  Do not touch the DOM when nothing changed: whatever feeds the
+     *  number ticks, and a rewrite is a mutation for every observer of
+     *  the tree (and was an announcement while the badge was a live
+     *  region). */
     if($badge.textContent === text && !$badge.hasAttribute("hidden")) {
         return;
     }

package/src/yui_badge.test.js

@@ -16,7 +16,7 @@ install_dom_double();
 
 const {createElement2, set_log_callback} = await import("@yuneta/gobj-js");
 const {
-    BADGE_TONES, badge_text, badge_tone, badge_node, paint_badge,
+    BADGE_TONES, badge_text, badge_tone, badge_node, paint_badge, name_control_with_badge,
 } = await import("./yui_badge.js");
 
 const logged = [];
@@ -83,10 +83,14 @@ describe("badge_tone", () => {
 });
 
 describe("badge_node", () => {
-    test("a live region with the host's classes, its tone and its text as text", () => {
+    test("the host's classes, its tone and its text as text; no live region of its own", () => {
+        /*  It said "3" with no context, missed the first count while
+         *  hidden, and was not in the tree inside a <button>: the shell
+         *  says the change now (REV-CLOUD V23.5.5).  */
         let $b = createElement2(badge_node(3, "warning", "X_BADGE yui-badge", "who"));
         expect($b.tagName).toBe("SPAN");
-        expect($b.getAttribute("role")).toBe("status");
+        expect($b.getAttribute("role")).toBe(null);
+        expect($b.getAttribute("aria-live")).toBe(null);
         expect($b.hasAttribute("hidden")).toBe(false);
         expect([...$b.classList]).toEqual(["X_BADGE", "yui-badge", "is-warning"]);
         expect($b.textContent).toBe("3");
@@ -146,3 +150,36 @@ describe("paint_badge", () => {
         expect($b.textContent).toBe("6");
     });
 });
+
+describe("name_control_with_badge", () => {
+    /*  The count is part of the control's NAME: it is labelled by itself
+     *  (its aria-label, re-translated by refresh_language) and by the
+     *  badge -- "alarms 3" -- with nothing composed in javascript.  */
+    test("the control is labelled by itself and by its badge", () => {
+        let attrs = {"aria-label": "alarms", "data-i18n-aria-label": "alarms"};
+        let badge = badge_node(3, "", "X_BADGE", "who");
+        name_control_with_badge(attrs, badge);
+        let $a = createElement2(["a", attrs, [badge]]);
+        let $b = $a.firstElementChild;
+
+        expect($a.id).toBeTruthy();
+        expect($b.id).toBeTruthy();
+        expect($a.getAttribute("aria-labelledby")).toBe(`${$a.id} ${$b.id}`);
+        /*  The aria-label stays, and with its key: the self-reference reads it  */
+        expect($a.getAttribute("aria-label")).toBe("alarms");
+        expect($a.getAttribute("data-i18n-aria-label")).toBe("alarms");
+    });
+
+    test("an id the control has is kept, and every pair is its own", () => {
+        let one = {id: "head-1", "aria-label": "a"};
+        let two = {"aria-label": "b"};
+        let b1 = badge_node(1, "", "X_BADGE", "who");
+        let b2 = badge_node(2, "", "X_BADGE", "who");
+        name_control_with_badge(one, b1);
+        name_control_with_badge(two, b2);
+        expect(one.id).toBe("head-1");
+        expect(one["aria-labelledby"]).toBe(`head-1 ${b1[1].id}`);
+        expect(two.id).not.toBe(one.id);
+        expect(b2[1].id).not.toBe(b1[1].id);
+    });
+});

package/src/yui_dev.js

@@ -1850,7 +1850,8 @@ function apply_dev_traces()
  *  Shell-agnostic: the legacy C_YUI_MAIN shell has a
  *  '#top-layer' stacking element; the new C_YUI_SHELL does not.
  *  We pass that element when present, otherwise null — C_YUI_WINDOW
- *  falls back to document.body by contract.
+ *  then takes the window layer of the shell (document.body while
+ *  there is none), and follows the shell across a logout.
  ************************************************************/
 function setup_dev(self, show)
 {

package/src/yui_file_field.js

@@ -266,6 +266,7 @@ function yui_file_control(gobj, {name, value, readonly, accept, on_pick})
     const $pick = createElement2(["button", {
         type: "button",
         class: "FILE_PICK button is-small",
+        title: t("choose a file"),
         "data-i18n-title": "choose a file",
         "aria-label": t("choose a file"),
         "data-i18n-aria-label": "choose a file"
@@ -280,6 +281,7 @@ function yui_file_control(gobj, {name, value, readonly, accept, on_pick})
     const $clear = createElement2(["button", {
         type: "button",
         class: "FILE_CLEAR button is-small",
+        title: t("remove the file"),
         "data-i18n-title": "remove the file",
         "aria-label": t("remove the file"),
         "data-i18n-aria-label": "remove the file"

package/src/yui_frontend_view.js

@@ -35,7 +35,8 @@ const WIN_NAME = "Frontend-View-Window";
  *  Shell-agnostic: the legacy C_YUI_MAIN shell has a
  *  '#top-layer' stacking element; the new C_YUI_SHELL does not.
  *  We pass that element when present, otherwise null — C_YUI_WINDOW
- *  falls back to document.body by contract.
+ *  then takes the window layer of the shell (document.body while
+ *  there is none), and follows the shell across a logout.
  *
  *  Returns the window gobj, or null.
  ************************************************************/

package/src/yui_gclass_view.js

@@ -42,7 +42,7 @@ import {
 
 import {describe_local_gclass} from "./gclass_describe.js";
 import {register_c_yui_gclass} from "./c_yui_gclass.js";
-import {yui_shell_show_error, yui_shell_show_modal, yui_shell_popup_layer} from "./shell_modals.js";
+import {yui_shell_show_error, yui_shell_show_modal} from "./shell_modals.js";
 import {yui_shell_of} from "./c_yui_shell.js";
 
 import {t} from "i18next";
@@ -205,7 +205,7 @@ function open_gclass_view(host, gclass_name, opts)
         return handle;
     }
 
-    let $win_parent = window_layer_of(host, shell);
+    let $win_parent = window_layer_of(host);
 
     handle.win = gobj_create_service(
         `gclass-win-${clean_name(gobj_name(host))}`,
@@ -307,8 +307,13 @@ function close_gclass_view(handle)
  *  window on `body` and mounted in the shell's popup layer
  *  lands BEHIND its opener whatever number it is given, and
  *  the button reads as one that did nothing.
+ *
+ *  Opened from no window: null -- the window layer of the
+ *  shell, where every window lives (the legacy '#top-layer'
+ *  when a page has one). It was the shell's popup layer: above
+ *  the drawer, in the way of the toolbar's dropdowns.
  ************************************************************/
-function window_layer_of(host, shell)
+function window_layer_of(host)
 {
     let $c = gobj_read_pointer_attr(host, "$container");
     if($c && typeof $c.closest === "function") {
@@ -319,9 +324,7 @@ function window_layer_of(host, shell)
     }
 
     return (typeof document !== "undefined" &&
-            document.getElementById("top-layer")) ||
-        (shell && yui_shell_popup_layer(shell)) ||
-        null;
+            document.getElementById("top-layer")) || null;
 }
 
 /************************************************************

package/src/yui_tabulator_i18n.js

@@ -195,6 +195,47 @@ function yui_tabulator_name_row_selects(table, t)
     }
 }
 
+/***************************************************************
+ *  Name the EDITOR of an editable column: the box Tabulator draws
+ *  in a cell while it is edited (input, number, textarea, list,
+ *  tickCross, date...).
+ *
+ *  Tabulator gives it nothing -- no label, no aria-label, no title
+ *  -- so a reader lands in an anonymous edit box. Its name is the
+ *  column's: a cell is edited under its column's title. Asked at
+ *  the MOMENT of editing: Tabulator takes `editorParams` as a
+ *  function of the cell, and every built-in editor writes the
+ *  `elementAttributes` it answers onto the element it draws. So
+ *  the name is in the language of that moment, with nothing to
+ *  re-apply after a language change or a rebuild of the columns
+ *  -- the twin of the header filters above, which have to be
+ *  renamed after every render.
+ *
+ *  `name_of(cell)` answers the column's title, TRANSLATED (the
+ *  view's own label: a cascade, a schema header); "" names
+ *  nothing. What `editorParams` the column had is kept, its own
+ *  `elementAttributes` too; a name it set itself wins.
+ ***************************************************************/
+function yui_tabulator_name_editor(column_def, name_of)
+{
+    if(!column_def || !column_def.editor || typeof name_of !== "function") {
+        return;
+    }
+    let base = column_def.editorParams;
+    column_def.editorParams = function(cell) {
+        let params = (typeof base === "function") ? base(cell) : (base || {});
+        let name = name_of(cell);
+        if(!name) {
+            return params;
+        }
+        let attrs = Object.assign(
+            {"aria-label": name, title: name},
+            params.elementAttributes || {}
+        );
+        return Object.assign({}, params, {elementAttributes: attrs});
+    };
+}
+
 function yui_tabulator_relocalize(table, t)
 {
     if(!table) {
@@ -243,4 +284,5 @@ export {
     yui_tabulator_relocalize,
     yui_tabulator_name_filters,
     yui_tabulator_name_row_selects,
+    yui_tabulator_name_editor,
 };