@yuneta/gobj-ui 7.26.26 → 7.26.28

package/src/lib_graph.js

@@ -3,7 +3,7 @@
  *
  *          Utilities for graph, using Bulma
  *
- *          Copyright (c) 2025, ArtGins.
+ *          Copyright (c) 2025-2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
 import {
@@ -55,11 +55,38 @@ function removeChildElements($element)
 
 /************************************************************
  *  Disable/Enable elements
+ *
+ *  A disabled control says so to the keyboard and to a screen
+ *  reader too, not only to the pointer:
+ *    - `disabled`, what the stylesheets and the click guards
+ *      read (on a `div` drawn as a button it means nothing to
+ *      the browser itself);
+ *    - `aria-disabled="true"`, what a reader announces -- without
+ *      it a disabled toolbar item was heard as a button that
+ *      works;
+ *    - `tabindex="-1"`, so Tab does not stop on a control that
+ *      does nothing.
+ *
+ *  Enabled again, it gets back the tabindex it had, kept in
+ *  `data-enabled-tabindex` while it is disabled (empty: it had
+ *  none, and it gets none). Whoever BUILDS a control disabled
+ *  writes that attribute itself, with the tabindex the control
+ *  takes once enabled (see toolbar_item_html in
+ *  c_g6_nodes_tree.js). An element that keeps the focus while it
+ *  is disabled keeps it: tabindex -1 still takes a focus, it is
+ *  only left out of the Tab order.
  ************************************************************/
+const ENABLED_TABINDEX = 'data-enabled-tabindex';
+
 function disableElements($container, selector)
 {
     $container.querySelectorAll(selector).forEach(el => {
         el.setAttribute('disabled', '');
+        el.setAttribute('aria-disabled', 'true');
+        if(!el.hasAttribute(ENABLED_TABINDEX)) {
+            el.setAttribute(ENABLED_TABINDEX, el.getAttribute('tabindex') ?? '');
+        }
+        el.setAttribute('tabindex', '-1');
     });
 }
 
@@ -69,6 +96,16 @@ function enableElements($container, selector)
         if(el.hasAttribute('disabled')) {
             el.removeAttribute('disabled');
         }
+        el.removeAttribute('aria-disabled');
+        if(el.hasAttribute(ENABLED_TABINDEX)) {
+            let tabindex = el.getAttribute(ENABLED_TABINDEX);
+            el.removeAttribute(ENABLED_TABINDEX);
+            if(tabindex === '') {
+                el.removeAttribute('tabindex');
+            } else {
+                el.setAttribute('tabindex', tabindex);
+            }
+        }
     });
 }
 

package/src/nav_backbar_name.wiring.test.js

@@ -0,0 +1,82 @@
+/***********************************************************************
+ *          nav_backbar_name.wiring.test.js
+ *
+ *      The back arrow of a C_YUI_NAV `backbar` is a control, and a
+ *      control is named twice -- `title` and `aria-label` -- each through
+ *      t() and each with its key. With no `nav_label` it took the literal
+ *      "back" as its aria-label: no t(), no key, so it read "back" in
+ *      every language and no locale could change that; with one, it
+ *      carried the raw key until something re-translated it, and no
+ *      title at all.
+ *
+ *      Driven through the real gclass on a document double.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {test, expect, beforeAll} from "vitest";
+import {install_dom_double} from "../test/dom_double.js";
+
+install_dom_double();
+
+const {
+    SDATA_END, gclass_create, gobj_start_up, gobj_create_yuno, gobj_create,
+    gobj_read_attr, refresh_language,
+} = await import("@yuneta/gobj-js");
+const {register_c_yui_nav} = await import("./c_yui_nav.js");
+
+let i18next = null;
+let yuno = null;
+let seq = 0;
+
+beforeAll(async () => {
+    i18next = (await import("i18next")).default;
+    await i18next.init({lng: "es", resources: {
+        es: {translation: {"back": "Atrás", "settings": "Ajustes"}},
+        en: {translation: {"back": "Back", "settings": "Settings"}},
+    }});
+    gobj_start_up(null, null, null, null, null, null, null);
+    gclass_create("C_TEST_NAV_HOST", [], [["ST_IDLE", []]], {}, 0, [SDATA_END()], {}, 0, 0, 0, 0);
+    register_c_yui_nav();
+    yuno = gobj_create_yuno("nav_backbar_yuno", "C_TEST_NAV_HOST", {});
+});
+
+/*  The back arrow of a new backbar  */
+function back_arrow(kw)
+{
+    const nav = gobj_create(`backbar_${++seq}`, "C_YUI_NAV",
+        Object.assign({layout: "backbar", back_route: "/home"}, kw), yuno);
+    const $container = gobj_read_attr(nav, "$container");
+    return {$container, $a: $container.querySelector(".yui-nav-back")};
+}
+
+function names($a)
+{
+    return {
+        title: $a.getAttribute("title"),
+        aria: $a.getAttribute("aria-label"),
+        title_key: $a.getAttribute("data-i18n-title"),
+        aria_key: $a.getAttribute("data-i18n-aria-label"),
+    };
+}
+
+test("with no nav_label it is named \"back\", translated, with its keys", () => {
+    const {$a} = back_arrow({});
+    expect(names($a)).toEqual({title: "Atrás", aria: "Atrás", title_key: "back", aria_key: "back"});
+});
+
+test("with a nav_label it is named by it, translated, with its keys", () => {
+    const {$a} = back_arrow({nav_label: "settings"});
+    expect(names($a)).toEqual({title: "Ajustes", aria: "Ajustes", title_key: "settings", aria_key: "settings"});
+});
+
+test("a language change renames it", async () => {
+    const {$container, $a} = back_arrow({});
+    await i18next.changeLanguage("en");
+    try {
+        refresh_language($container, i18next.t.bind(i18next));
+        expect(names($a)).toEqual({title: "Back", aria: "Back", title_key: "back", aria_key: "back"});
+    } finally {
+        await i18next.changeLanguage("es");
+    }
+});

package/src/schema_flags.js

@@ -114,6 +114,53 @@ const FLAG_CATALOG = [
      desc: "drawn as a table"},
 ];
 
+/*  The keys the schema editor hands to t() as data: the name of every
+ *  group (`other` holds the flags the catalogue does not know) and the
+ *  description of every flag. No scan of the source reads them there, so
+ *  they are published for a consumer's validate-locales, which asks the
+ *  app's locales for every key of an exported `*_I18N_KEYS` array. A
+ *  flag or a group added to the catalogue adds its key here (a test
+ *  checks it).  */
+export const SCHEMA_FLAGS_I18N_KEYS = [
+    "storage", "validation", "access", "relation", "key", "stats", "format", "other",
+    "saved to disk; a column without it lives only while the yuno runs",
+    "convert a value of another type instead of refusing it",
+    "copied from the primary record to its other instances",
+    "the field must be present when the record is written",
+    "the field may be absent, but never null",
+    "the value must be one of the `enum` list",
+    "the value is built from the `template` field",
+    "may be changed after the record is created",
+    "may be read back",
+    "left out of listings",
+    "holds the children this record owns; needs a `hook` mapping",
+    "holds the reference to a parent; written by the parent's hook",
+    "key generated as a counter when none is given",
+    "key generated as a uuid when none is given",
+    "key composed as the parent's id plus this record's name",
+    "the value is an identifier of something else",
+    "a counter, reported in the yuno statistics",
+    "a counter read through mt_reading when it is asked for",
+    "a counter kept across restarts",
+    "the value is a timestamp",
+    "stamped with the current time when the record is created",
+    "a date",
+    "shown masked, and never echoed back",
+    "an email address",
+    "a url",
+    "a telephone number",
+    "a colour",
+    "an image",
+    "a geographic position",
+    "an amount of money",
+    "a percentage",
+    "written in hexadecimal",
+    "binary content",
+    "encoded in base64",
+    "carried as a gbuffer",
+    "drawn as a table"
+];
+
 /*  Flags that decide the SHAPE of the record and cannot both be on the
  *  same column: the treedb writes one half of a link, never both.  */
 const EXCLUSIVE = [["hook", "fkey"], ["rowid", "uuid", "qualified"]];

package/src/schema_import.js

@@ -53,6 +53,13 @@ const COL_FIELDS = [
 /*  Read as values whatever they were stored as.  */
 const JSON_FIELDS = ["enum", "hook", "default", "template", "properties", "pkey2s"];
 
+/*  The `op` of a planned write is an i18n key: the schema editor shows
+ *  each write of a plan by it (`t(write.op)`), as data, where no scan of
+ *  the source reads it. Published for a consumer's validate-locales,
+ *  which asks the app's locales for every key of an exported
+ *  `*_I18N_KEYS` array.  */
+export const SCHEMA_IMPORT_I18N_KEYS = ["create", "update", "delete"];
+
 
 /***************************************************************
  *  Two values, compared the way the store would see them: a flag

package/src/shell_modals.js

@@ -624,21 +624,25 @@ function build_dialog(shell, message, buttons, opts)
  *  "Delete" and "Cancel", keys that no locale carries, so a dialog
  *  that took the defaults read in English in every language.
  *
- *  Written as `i18n:` entries so the validate-locales script of a
- *  consumer finds them when it scans this module: an app that
- *  mounts these dialogs must define the five keys.
+ *  An app that mounts these dialogs must define the five keys. A
+ *  consumer's validate-locales reads them where build_dialog() gets
+ *  them (a const, `DEFAULT_LABEL.ok`, it follows), and in
+ *  SHELL_MODALS_I18N_KEYS, which a test holds to this table. (Up to
+ *  7.26.27 they were written as `i18n:` entries, which only a regex
+ *  scan of `i18n: "..."` happened to see.)
  ***************************************************************/
 const DEFAULT_LABEL = Object.freeze({
-    ok:     Object.freeze({i18n: "ok"}),
-    yes:    Object.freeze({i18n: "yes"}),
-    no:     Object.freeze({i18n: "no"}),
-    delete: Object.freeze({i18n: "delete"}),
-    cancel: Object.freeze({i18n: "cancel"})
+    ok:     "ok",
+    yes:    "yes",
+    no:     "no",
+    delete: "delete",
+    cancel: "cancel"
 });
+export const SHELL_MODALS_I18N_KEYS = ["ok", "yes", "no", "delete", "cancel"];
 
 export function yui_shell_confirm_ok(shell, message, opts)
 {
-    let label = (opts && opts.ok_label) || DEFAULT_LABEL.ok.i18n;
+    const label = (opts && opts.ok_label) || DEFAULT_LABEL.ok;
     if(!opts || !opts.type) {
         opts = Object.assign({}, opts, {type: "success"});
     }
@@ -649,8 +653,8 @@ export function yui_shell_confirm_ok(shell, message, opts)
 
 export function yui_shell_confirm_yesno(shell, message, opts)
 {
-    let yes_label = (opts && opts.yes_label) || DEFAULT_LABEL.yes.i18n;
-    let no_label  = (opts && opts.no_label)  || DEFAULT_LABEL.no.i18n;
+    const yes_label = (opts && opts.yes_label) || DEFAULT_LABEL.yes;
+    const no_label  = (opts && opts.no_label)  || DEFAULT_LABEL.no;
     return build_dialog(shell, message, [
         {label: yes_label, value: "yes", kind: "primary"},
         {label: no_label,  value: "no"}
@@ -673,8 +677,8 @@ export function yui_shell_confirm_yesno(shell, message, opts)
  ***************************************************************/
 export function yui_shell_confirm_danger(shell, message, opts)
 {
-    let confirm_label = (opts && opts.confirm_label) || DEFAULT_LABEL.delete.i18n;
-    let cancel_label  = (opts && opts.cancel_label)  || DEFAULT_LABEL.cancel.i18n;
+    const confirm_label = (opts && opts.confirm_label) || DEFAULT_LABEL.delete;
+    const cancel_label  = (opts && opts.cancel_label)  || DEFAULT_LABEL.cancel;
     if(!opts || !opts.type) {
         opts = Object.assign({}, opts, {type: "danger"});
     }
@@ -686,9 +690,9 @@ export function yui_shell_confirm_danger(shell, message, opts)
 
 export function yui_shell_confirm_yesnocancel(shell, message, opts)
 {
-    let yes_label    = (opts && opts.yes_label)    || DEFAULT_LABEL.yes.i18n;
-    let no_label     = (opts && opts.no_label)     || DEFAULT_LABEL.no.i18n;
-    let cancel_label = (opts && opts.cancel_label) || DEFAULT_LABEL.cancel.i18n;
+    const yes_label    = (opts && opts.yes_label)    || DEFAULT_LABEL.yes;
+    const no_label     = (opts && opts.no_label)     || DEFAULT_LABEL.no;
+    const cancel_label = (opts && opts.cancel_label) || DEFAULT_LABEL.cancel;
     return build_dialog(shell, message, [
         {label: yes_label,    value: "yes", kind: "primary"},
         {label: no_label,     value: "no"},

package/src/shell_route_map.js

@@ -41,6 +41,15 @@ import {text_node} from "./yui_text.js";
 
 const WIN_NAME = "shell-route-map-window";
 
+/*  The labels of the map's own nodes -- its two groups, and the root of
+ *  an app whose brand has no label -- which reach t() as data (a node's
+ *  `label`), where no scan of the source reads them. Published for a
+ *  consumer's validate-locales, which asks the app's locales for every
+ *  key of an exported `*_I18N_KEYS` array; i18n_key_functions.test.js
+ *  holds it to every `label:` this module writes. The other labels are
+ *  the app's: its shell declaration.  */
+export const SHELL_ROUTE_MAP_I18N_KEYS = ["toolbar", "other routes", "app"];
+
 /*  Reference rows — a route's second and third entry point: a drawer
  *  entry, a toolbar SHORTCUT.  Shown by default: they are one line
  *  each, and they are exactly what someone auditing the navigation
@@ -79,7 +88,8 @@ function render_node(node)
         row.push(["span", {class: "icon ROUTEMAP_ICON"},
             [["i", {class: node.icon}]]]);
     }
-    row.push(["span", {class: "ROUTEMAP_NAME", i18n: node.label}, text_node(node.label)]);
+    row.push(["span", {class: "ROUTEMAP_NAME", i18n: /* i18n: SHELL_ROUTE_MAP_I18N_KEYS */ node.label},
+        text_node(node.label)]);
     /*  Documentation columns: route + implementing gclass + action event. */
     if(node.route) {
         row.push(["code", {class: "ROUTEMAP_ROUTE"}, text_node(node.route)]);
@@ -527,7 +537,7 @@ export function yui_shell_show_route_map(shell, opts)
     /*  Fallback: a modal (no C_YUI_WINDOW registered). */
     let modal_ref = {modal: null};
     let $body = build_body(shell, t);
-    modal_ref.modal = yui_shell_show_modal(shell, $body, {
+    modal_ref.modal = yui_shell_show_modal(shell, /* i18n: data */ $body, {
         dialog:        true,
         logical_class: "ROUTEMAP_SHEET",
         /*  The KEY, not t(key): the modal renders `title` with

package/src/wizard_helpers.js

@@ -44,6 +44,14 @@ function wizard_prev_index(idx, count)
     return wizard_clamp_index(idx - 1, count);
 }
 
+/*  The keys of the primary button when the caller names none: they
+ *  reach t() as data, where no scan of the source reads them, so they
+ *  are published for a consumer's validate-locales, which asks the app's
+ *  locales for every key of an exported `*_I18N_KEYS` array.
+ *  i18n_key_functions.test.js holds it to every value given to
+ *  `primary_label`.  */
+export const WIZARD_HELPERS_I18N_KEYS = ["confirm", "next"];
+
 /***************************************************************
  *  Chrome model for the current step.
  *

package/src/yui_dev.js

@@ -71,36 +71,34 @@ const TRAFFIC_TS_FIELDS = {
  *  repainted from it by `refresh_dev_chrome()` on every toggle, so a
  *  label translated once at build time would come back in English at
  *  the first click.  */
-/*  ⚠️  The keys of this window are a BLIND SPOT for a consumer's
- *  `validate-locales`: the table below and the `grp` / `mk_view` /
- *  `mk_expand` / `mk_dir` / `mk_out` helpers pass their key as a
- *  VARIABLE, and `OUT_TITLES` holds three more in a lookup table --
- *  so a scan of `t("…")` sees none of them and reports OK with the
- *  whole window in English. The full set a consumer must define,
- *  kept here so it can be copied:
- *
- *      automata, both, browser console only, clear,
- *      clear captured traffic, collapsed, console, copied, copy,
- *      copy visible traffic to clipboard, creation, data,
- *      dev window and browser console, dev window only, developer,
- *      clear the filter, errors, expand, expanded, filter events / payload,
- *      find, i18n,
- *      i18next debug output, incoming, log, machine trace shape,
- *      metadata, outgoing, output, payload, periodic, schema, show,
- *      show the payload of the traces,
- *      show this section in the expanded view, simple mach,
- *      start / stop, subscriptions,
- *      trace every event of every automaton,
- *      trace subscriptions and publications,
- *      trace the creation and destruction of gobjs,
- *      trace the messages to and from the backend,
- *      trace the periodic timer event,
- *      trace the start and stop of gobjs,
- *      traces, traffic, traffic payload folded,
- *      traffic payload laid out, view, window, yuno monitor
- *
- *  wattyzer and the yunovatios GUIs carry them; check a new consumer
- *  against this list, and confirm it by DUMPING the window.  */
+/*  The keys of this window that reach t() as VARIABLES: the table below,
+ *  the `grp` / `mk_view` / `mk_expand` / `mk_dir` / `mk_out` helpers and
+ *  `OUT_TITLES` pass their key by name, so a scan of `t("...")` sees none of
+ *  them. They are published HERE, as data: a consumer's `validate-locales`
+ *  (gobj-ui 7.26.27+) reads an exported `*_I18N_KEYS` array of every module
+ *  the app mounts and asks the locales for each key -- it used to be a
+ *  comment each consumer copied by hand, and yunomusica lacked 35 of them
+ *  (REV-CLOUD V19.4.2). A key added to the window goes in this list.  */
+export const YUI_DEV_I18N_KEYS = [
+    "automata", "both", "browser console only", "clear",
+    "clear captured traffic", "collapsed", "console", "copied", "copy",
+    "copy visible traffic to clipboard", "creation", "data",
+    "dev window and browser console", "dev window only", "developer",
+    "clear the filter", "errors", "expand", "expanded",
+    "filter events / payload", "find", "i18n", "i18next debug output",
+    "incoming", "log", "machine trace shape", "metadata", "outgoing",
+    "output", "payload", "periodic", "schema", "show",
+    "show the payload of the traces",
+    "show this section in the expanded view", "simple mach", "start / stop",
+    "subscriptions", "trace every event of every automaton",
+    "trace subscriptions and publications",
+    "trace the creation and destruction of gobjs",
+    "trace the messages to and from the backend",
+    "trace the periodic timer event", "trace the start and stop of gobjs",
+    "traces", "traffic", "traffic payload folded",
+    "traffic payload laid out", "view", "window", "yuno monitor"
+];
+
 const TRACE_DEFS = [
     ["automata",      "automata",      "trace every event of every automaton",
         automata_state, toggle_automata],
@@ -1546,7 +1544,15 @@ function dev_fallback_copy(text)
 }
 
 /*  The control bar: trace toggles, view selector, direction
- *  filters, free-text search, copy, clear. Returns an element. */
+ *  filters, free-text search, copy, clear. Returns an element.
+ *
+ *  Every button is NAMED by the key of the text it shows (`aria-label`)
+ *  and described by its `title`, each with its key. Not the other way
+ *  round: the title of the three Expand chips is one sentence for the
+ *  three, so as a name it would make them one control, and a name has
+ *  to hold the words a person sees on the button. A button that shows
+ *  only a glyph (the direction filters, the ✕ of the search) is named
+ *  by its title.  */
 function build_control_bar()
 {
     let trace_chips = TRACE_DEFS.map(([key, label_key, title_key, state, toggle]) => ['button', {
@@ -1568,6 +1574,7 @@ function build_control_bar()
         class: 'YDEV_CHIP', 'data-toggle': 'automata-simple', type: 'button',
         title: t('machine trace shape'), 'data-i18n-title': 'machine trace shape',
         'data-i18n': 'simple mach',
+        'aria-label': t('simple mach'), 'data-i18n-aria-label': 'simple mach',
     }, t('simple mach'), {
         click: (ev) => {
             ev.stopPropagation();
@@ -1633,6 +1640,7 @@ function build_control_bar()
         class: 'YDEV_SEG_BTN', 'data-output': v, type: 'button',
         title: t(OUT_TITLES[v]), 'data-i18n-title': OUT_TITLES[v],
         'data-i18n': label,
+        'aria-label': t(label), 'data-i18n-aria-label': label,
     }, t(label), {
         click: (ev) => {
             ev.stopPropagation();
@@ -1656,6 +1664,7 @@ function build_control_bar()
         title: t('show this section in the expanded view'),
         'data-i18n-title': 'show this section in the expanded view',
         'data-i18n': label,
+        'aria-label': t(label), 'data-i18n-aria-label': label,
     }, t(label), {
         click: (ev) => {
             ev.stopPropagation();
@@ -1722,7 +1731,8 @@ function build_control_bar()
     let copy = ['button', {class: 'YDEV_CHIP', type: 'button',
         title: t('copy visible traffic to clipboard'),
         'data-i18n-title': 'copy visible traffic to clipboard',
-        'data-i18n': 'copy'}, t('copy'), {
+        'data-i18n': 'copy',
+        'aria-label': t('copy'), 'data-i18n-aria-label': 'copy'}, t('copy'), {
         click: (ev) => {
             ev.stopPropagation();
             let btn = ev.currentTarget;
@@ -1737,7 +1747,8 @@ function build_control_bar()
     let clear = ['button', {class: 'YDEV_CHIP', type: 'button',
         title: t('clear captured traffic'),
         'data-i18n-title': 'clear captured traffic',
-        'data-i18n': 'clear'}, t('clear'), {
+        'data-i18n': 'clear',
+        'aria-label': t('clear'), 'data-i18n-aria-label': 'clear'}, t('clear'), {
         click: (ev) => {
             ev.stopPropagation();
             clear_traffic();

package/src/yui_dev_controls.test.js

@@ -0,0 +1,174 @@
+/***********************************************************************
+ *          yui_dev_controls.test.js
+ *
+ *          Every control of the Developer window is NAMED, and every
+ *          name changes language (REV-CLOUD V20.5.5: nine buttons had a
+ *          `title` and no `aria-label` -- simple mach, the three of
+ *          Output, the three of Expand, copy and clear).
+ *
+ *          A button that shows text is named by the key of that text
+ *          and described by its title; one that shows only a glyph is
+ *          named by its title. And every key the window asks for, or
+ *          carries for a language switch, is in YUI_DEV_I18N_KEYS --
+ *          the list a consumer's validate-locales reads, because most of
+ *          them reach t() by variable and no scan of the source sees
+ *          them.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, it, expect, beforeAll} from "vitest";
+import {install_dom_double} from "../test/dom_double.js";
+
+let i18next;
+let refresh_language;
+let build_dev_panel;
+let YUI_DEV_I18N_KEYS;
+let $panel;
+
+/*  Every key t() was asked for: the English catalog is empty, so each
+ *  one is a miss, and i18next reports it.  */
+const asked = new Set();
+
+const KEY_ATTRS = ["data-i18n", "data-i18n-title", "data-i18n-aria-label",
+                   "data-i18n-placeholder", "data-label"];
+
+beforeAll(async () => {
+    install_dom_double();
+    const gobj_js = await import("@yuneta/gobj-js");
+    refresh_language = gobj_js.refresh_language;
+    ({build_dev_panel, YUI_DEV_I18N_KEYS} = await import("./yui_dev.js"));
+
+    /*  The panel hands the yuno its traffic sink, as in an app.  */
+    const {SDATA, SDATA_END, data_type_t, gclass_create, gobj_start_up,
+           gobj_create_yuno} = gobj_js;
+    gobj_start_up(null, null, null, null, null, null, null);
+    gclass_create(
+        "C_TEST_DEV_YUNO", [], [["ST_IDLE", []]], {}, 0,
+        [SDATA(data_type_t.DTP_POINTER, "trace_ievent_callback", 0, null, ""), SDATA_END()],
+        {}, 0, 0, 0, 0
+    );
+    gobj_create_yuno("dev_yuno", "C_TEST_DEV_YUNO", {});
+
+    /*  Spanish is the key with a mark, so a name that did not follow
+     *  the switch is told apart from one that did.  */
+    const es = {};
+    for(const k of YUI_DEV_I18N_KEYS) {
+        es[k] = `«${k}»`;
+    }
+    i18next = (await import("i18next")).default;
+    await i18next.init({
+        lng: "en", fallbackLng: false,
+        saveMissing: true,
+        missingKeyHandler: (lngs, ns, key) => {
+            asked.add(key);
+        },
+        resources: {en: {translation: {}}, es: {translation: es}},
+    });
+
+    $panel = build_dev_panel().$el;
+    document.body.appendChild($panel);
+});
+
+function controls()
+{
+    return $panel.querySelectorAll("button, input, select, textarea");
+}
+
+describe("the Developer window's controls", () => {
+    it("has the controls this test reads", () => {
+        expect(controls().length).toBeGreaterThan(20);
+    });
+
+    it("names every control, and every name carries its key", () => {
+        const unnamed = [];
+        for(const $c of controls()) {
+            const title_key = $c.getAttribute("data-i18n-title");
+            const aria_key = $c.getAttribute("data-i18n-aria-label");
+            if(!title_key || !aria_key || !$c.getAttribute("title") ||
+                    !$c.getAttribute("aria-label")) {
+                unnamed.push($c.getAttribute("data-i18n") || title_key || $c.tagName);
+            }
+        }
+        expect(unnamed).toEqual([]);
+    });
+
+    it("names a button by the text it shows, a glyph by its title", () => {
+        const wrong = [];
+        for(const $c of $panel.querySelectorAll("button")) {
+            const shown = $c.getAttribute("data-i18n");
+            const want = shown || $c.getAttribute("data-i18n-title");
+            if($c.getAttribute("data-i18n-aria-label") !== want) {
+                wrong.push(`${want}: ${$c.getAttribute("data-i18n-aria-label")}`);
+            }
+        }
+        expect(wrong).toEqual([]);
+    });
+
+    it("names the nine buttons REV-CLOUD V20.5.5 found without one", () => {
+        const sel = [
+            '[data-toggle="automata-simple"]',
+            '[data-output="window"]', '[data-output="console"]', '[data-output="both"]',
+            '[data-expand="dev_full_schema"]', '[data-expand="dev_full_data"]',
+            '[data-expand="dev_full_meta"]',
+        ];
+        const $nine = sel.map((s) => $panel.querySelector(s));
+        for(const label of ["copy", "clear"]) {
+            $nine.push([...$panel.querySelectorAll("button")]
+                .find(($b) => $b.getAttribute("data-i18n") === label));
+        }
+        expect($nine.every(Boolean)).toBe(true);
+        for(const $b of $nine) {
+            const key = $b.getAttribute("data-i18n");
+            expect($b.getAttribute("aria-label"), key).toBe(i18next.t(key));
+            expect($b.getAttribute("data-i18n-aria-label"), key).toBe(key);
+            expect($b.getAttribute("data-i18n-title"), key).toBeTruthy();
+        }
+        /*  Three chips, three names: their title is one sentence.  */
+        const expand = $nine.slice(4, 7).map(($b) => $b.getAttribute("aria-label"));
+        expect(new Set(expand).size).toBe(3);
+    });
+
+    it("renames every control on a language switch", async () => {
+        await i18next.changeLanguage("es");
+        try {
+            refresh_language($panel, i18next.t);
+            const stale = [];
+            for(const $c of controls()) {
+                const tk = $c.getAttribute("data-i18n-title");
+                const ak = $c.getAttribute("data-i18n-aria-label");
+                if($c.getAttribute("title") !== `«${tk}»`) {
+                    stale.push(`title ${tk}`);
+                }
+                if($c.getAttribute("aria-label") !== `«${ak}»`) {
+                    stale.push(`aria-label ${ak}`);
+                }
+            }
+            expect(stale).toEqual([]);
+        } finally {
+            await i18next.changeLanguage("en");
+            refresh_language($panel, i18next.t);
+        }
+    });
+
+    it("publishes every key it asks for or carries", () => {
+        const published = new Set(YUI_DEV_I18N_KEYS);
+        const carried = new Set();
+        const walk = ($n) => {
+            for(const a of KEY_ATTRS) {
+                const k = $n.getAttribute(a);
+                if(k) {
+                    carried.add(k);
+                }
+            }
+            for(const $c of $n.children) {
+                walk($c);
+            }
+        };
+        walk($panel);
+        expect(asked.size).toBeGreaterThan(20);
+        const missing = [...new Set([...asked, ...carried])]
+            .filter((k) => !published.has(k)).sort();
+        expect(missing).toEqual([]);
+    });
+});

package/src/yui_gclass_view.js

@@ -193,11 +193,11 @@ function open_gclass_view(host, gclass_name, opts)
             close_gclass_view(handle);
             return null;
         }
-        handle.modal = yui_shell_show_modal(shell, $box, {
+        handle.modal = yui_shell_show_modal(shell, /* i18n: data */ $box, {
             dialog:        true,
             logical_class: "GCLASS_VIEW_SHEET",
             title_prefix:  opts.title_prefix || "",
-            title:         gclass_name,
+            title:         /* i18n: data */ gclass_name,
             t:             t,
             on_close:      on_close,
         });