@yuneta/gobj-ui 7.26.27 → 7.26.29

package/src/c_yui_form.js

@@ -805,11 +805,13 @@ function build_html_form(gobj, $form, prefix, template)
         }
 
         /*
-         *  Build the html field and add to form, if <tag> is not-null
+         *  Build the html field and add to form, if <tag> is not-null.
+         *  Its label and options are the schema's: column names and
+         *  headers, data.
          */
         if(html_field_conf.tag) {
-            let $field = create_form_field(gobj, $form, prefix, field_desc, html_field_conf);
-            name_form_control($field, html_field_conf);
+            let $field = create_form_field(gobj, $form, prefix, field_desc, /* i18n: data */ html_field_conf);
+            name_form_control($field, /* i18n: data */ html_field_conf);
             $form.appendChild($field);
         }
     });
@@ -2547,11 +2549,21 @@ function field_validation_message($input)
 {
     let key = field_validation_key($input);
     if(key) {
-        return t(key);
+        return t(/* i18n: C_YUI_FORM_I18N_KEYS, FORM_JSON_FIELD_I18N_KEYS */ key);
     }
     return $input.validationMessage;
 }
 
+/*  The keys this form hands on as data: the one field_validation_key()
+ *  returns, which reaches t() by a variable, and the warning of a close
+ *  it vetoes (`kw.warning`), which its HOST shows. 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 what field_validation_key() returns and to every
+ *  `.warning =` of this module. (The json editor's own key is published
+ *  by form_json_field.js.)  */
+export const C_YUI_FORM_I18N_KEYS = ["this field is required", "all changes will be lost"];
+
 /************************************************************
  *  The i18n key of the message, when the message is ours ("" when
  *  it is the browser's): written as the help line's data-i18n, so

package/src/c_yui_fsm_graph.js

@@ -71,6 +71,7 @@ import {
 import {yui_is_dark, yui_theme_now, yui_watch_theme} from "./yui_theme.js";
 import {ensure_drag_canvas_patch} from "./g6_drag_canvas_touch.js";
 import {ensure_pinch_zoom_patch} from "./g6_touch_gestures.js";
+import {keep_canvas_tab_order} from "./g6_canvas_tab_order.js";
 
 import {t} from "i18next";
 
@@ -428,6 +429,10 @@ function build_graph(gobj)
         }
     }
 
+    /*  Tab goes from the graph to its own buttons: the main canvas in
+     *  the Tab order, the other layers out (g6_canvas_tab_order.js).  */
+    keep_canvas_tab_order(gobj, priv.graph);
+
     priv.graph.on('aftertransform', () => {
         yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
     });

package/src/c_yui_gclass.js

@@ -136,6 +136,17 @@ const ZONES = [
     {id: "machine",  key: "machine",          col: "right"},
 ];
 
+/*  The keys of VIEWS, MACHINE_VIEWS and ZONES: they reach t() as data
+ *  (`v.key`, `zone.key`), where no scan of the source reads them, so
+ *  they are published here for a consumer's validate-locales, which asks
+ *  the app's locales for every key of an exported `*_I18N_KEYS` array. A
+ *  view or a zone added to those tables adds its key here.  */
+export const C_YUI_GCLASS_I18N_KEYS = [
+    "zones view", "raw view",
+    "matrix view", "graph view",
+    "attributes", "commands", "methods", "trace levels", "machine"
+];
+
 /***************************************************************
  *              Data
  ***************************************************************/

package/src/c_yui_gobj_tree_js.js

@@ -82,6 +82,7 @@ import { ensure_drag_canvas_patch } from "./g6_drag_canvas_touch.js";
 import { ensure_pinch_zoom_patch } from "./g6_touch_gestures.js";
 import { yui_is_dark, yui_theme_now, yui_watch_theme } from "./yui_theme.js";
 import {g6_event_kw} from "./g6_event_kw.js";
+import {keep_canvas_tab_order} from "./g6_canvas_tab_order.js";
 
 /***************************************************************
  *              Constants
@@ -523,6 +524,18 @@ const LAYOUTS = {
     },
 };
 
+/*  The `key` of every layout: the picker hands it to t() as data
+ *  (`LAYOUTS[key].key`), where no scan of the source reads it, so it is
+ *  published here for a consumer's validate-locales, which asks the
+ *  app's locales for every key of an exported `*_I18N_KEYS` array. A
+ *  layout added to LAYOUTS adds its key here.  */
+export const C_YUI_GOBJ_TREE_JS_I18N_KEYS = [
+    "vertical tree", "vertical tree compact",
+    "horizontal tree", "horizontal tree compact",
+    "lanes vertical", "lanes horizontal",
+    "dagre top-down", "dagre left-right"
+];
+
 function get_layout_cfg(layout_key)
 {
     return LAYOUTS[layout_key] || LAYOUTS["vertical-compact"];
@@ -1150,6 +1163,10 @@ function build_graph(gobj)
         graph.setTheme(priv.theme);
     }
 
+    /*  Tab goes from the graph to its own buttons: the main canvas in
+     *  the Tab order, the other layers out (g6_canvas_tab_order.js).  */
+    keep_canvas_tab_order(gobj, graph);
+
     /*  The readout follows ANY camera change, the wheel included — a
      *  wheel notch passes through no action of ours.  */
     graph.on('aftertransform', () => {
@@ -2845,7 +2862,7 @@ function ac_open_gclass(gobj, event, kw, src)
     close_gclass_view(priv.gclass_view);
     priv.gclass_view = null;
 
-    priv.gclass_view = open_gclass_view(gobj, node_data.gclass, {
+    priv.gclass_view = open_gclass_view(gobj, /* i18n: data */ node_data.gclass, {
         title_prefix: gobj_yuno_name() || "",
         /*  Which state THIS gobj is in. The description describes the
          *  CLASS and cannot carry it, and the tree is the only party

package/src/c_yui_json_graph.js

@@ -83,6 +83,7 @@ import {
     count_branches,
 } from "./json_view_helpers.js";
 import {g6_event_kw} from "./g6_event_kw.js";
+import {keep_canvas_tab_order} from "./g6_canvas_tab_order.js";
 
 /***************************************************************
  *              Constants
@@ -754,6 +755,10 @@ function build_graph(gobj)
         graph.setTheme(priv.theme);
     }
 
+    /*  Tab goes from the graph to its own buttons: the main canvas in
+     *  the Tab order, the other layers out (g6_canvas_tab_order.js).  */
+    keep_canvas_tab_order(gobj, graph);
+
     graph.on(NodeEvent.CLICK, (evt) => {
         /*  An identity, never the G6 event: a kw is plain json, and the
          *  event is circular -- the machine trace dumps the kw.  */

package/src/c_yui_nav.js

@@ -230,17 +230,19 @@ function build_ui(gobj)
     let menu_id = gobj_read_attr(gobj, "menu_id") || "nav";
     let $container;
 
+    /*  The items are the app's nav declaration: the keys of their names
+     *  are read there (app_config.json), not here.  */
     switch(layout) {
-        case "vertical":   $container = render_vertical(gobj, items); break;
-        case "icon-bar":   $container = render_icon_bar(gobj, items); break;
-        case "tabs":       $container = render_tabs(gobj, items);     break;
-        case "drawer":     $container = render_drawer(gobj, items);   break;
-        case "submenu":    $container = render_submenu(gobj, items);  break;
-        case "accordion":  $container = render_accordion(gobj, items); break;
-        case "cards":      $container = render_cards(gobj, items);    break;
-        case "backbar":    $container = render_backbar(gobj);         break;
-        case "breadcrumb": $container = render_breadcrumb(gobj, items); break;
-        default:           $container = render_vertical(gobj, items);
+        case "vertical":   $container = render_vertical(gobj, /* i18n: data */ items); break;
+        case "icon-bar":   $container = render_icon_bar(gobj, /* i18n: data */ items); break;
+        case "tabs":       $container = render_tabs(gobj, /* i18n: data */ items);     break;
+        case "drawer":     $container = render_drawer(gobj, /* i18n: data */ items);   break;
+        case "submenu":    $container = render_submenu(gobj, /* i18n: data */ items);  break;
+        case "accordion":  $container = render_accordion(gobj, /* i18n: data */ items); break;
+        case "cards":      $container = render_cards(gobj, /* i18n: data */ items);    break;
+        case "backbar":    $container = render_backbar(gobj);                          break;
+        case "breadcrumb": $container = render_breadcrumb(gobj, /* i18n: data */ items); break;
+        default:           $container = render_vertical(gobj, /* i18n: data */ items);
     }
     $container.setAttribute("data-nav-zone", zone);
     $container.setAttribute("data-nav-layout", layout);
@@ -268,7 +270,7 @@ function build_ui(gobj)
         if(!$container.hasAttribute("aria-label")) {
             /*  A key, translated by the shell's translator: the bare
              *  menu_id read out "secondary.main.system".  */
-            let label = gobj_read_attr(gobj, "nav_label") || "navigation";
+            const label = gobj_read_attr(gobj, "nav_label") || "navigation";
             $container.setAttribute("aria-label", t(label));
             $container.setAttribute("data-i18n-aria-label", label);
         }
@@ -527,16 +529,19 @@ function render_backbar(gobj)
     if(label) {
         label_attrs.i18n = label;
     }
+    /*  Named by the label when the nav has one, else by "back" -- through
+     *  t() and with its key, or it reads the raw key in every language.  */
+    const name_key = label || "back";
     let a_attrs = {
         class: "yui-nav-item yui-nav-back",
         href: back_route ? "#" + back_route : "#",
         "data-item-id": "__index__",
         "data-route": back_route,
-        "aria-label": label || "back"
+        title: t(name_key),
+        "data-i18n-title": name_key,
+        "aria-label": t(name_key),
+        "data-i18n-aria-label": name_key
     };
-    if(label) {
-        a_attrs["data-i18n-aria-label"] = label;
-    }
     return createElement2(
         ["div", {},
             ["a", a_attrs, [
@@ -558,7 +563,7 @@ function render_drawer(gobj, items)
     wrap.className = "yui-drawer";
     wrap.setAttribute("role", "dialog");
     wrap.setAttribute("aria-modal", "true");
-    let nav_label = gobj_read_attr(gobj, "nav_label") || "navigation";
+    const nav_label = gobj_read_attr(gobj, "nav_label") || "navigation";
     wrap.setAttribute("aria-label", t(nav_label));
     wrap.setAttribute("data-i18n-aria-label", nav_label);
 

package/src/c_yui_pager.js

@@ -237,7 +237,7 @@ function render_header(gobj)
      *  deeper pages show a back arrow.
      */
     let $back_icon = $back.querySelector('i');
-    let back_key = (model.back_kind === "close") ? 'close' : 'back';
+    const back_key = (model.back_kind === "close") ? 'close' : 'back';
     $back_icon.className = (back_key === 'close') ? 'yi-xmark' : 'yi-arrow-left';
     /*  The key moves with the glyph: a key left on "back" made the ✕ of
      *  the root page announce itself as Back after a language switch.  */

package/src/c_yui_period.js

@@ -112,6 +112,13 @@ const GCLASS_NAME = "C_YUI_PERIOD";
 const MODE_SPAN = "span";
 const MODE_CUSTOM = "custom";
 
+/*  Their names: a mode is named by its id through a variable
+ *  (`t(mode.id)`), where no scan of the source reads it, 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. The names
+ *  of the granularities and of the rolling windows are yui_time.js's.  */
+export const C_YUI_PERIOD_I18N_KEYS = ["span", "custom"];
+
 /***************************************************************
  *              Data
  ***************************************************************/
@@ -475,7 +482,7 @@ function build_ui(gobj)
         if(mode.overflow || mode.hidden) {
             continue;
         }
-        priv.$modes.appendChild(build_mode_button(gobj, mode));
+        priv.$modes.appendChild(build_mode_button(gobj, /* i18n: C_YUI_PERIOD_I18N_KEYS, YUI_TIME_I18N_KEYS */ mode));
     }
 
     /*  Scroll plumbing, not an action: it changes nothing outside the strip.
@@ -591,7 +598,7 @@ function build_more_menu(gobj)
         if(!mode.overflow) {
             continue;
         }
-        let name = mode_name(mode);
+        let name = mode_name(/* i18n: C_YUI_PERIOD_I18N_KEYS, YUI_TIME_I18N_KEYS */ mode);
         let $item = createElement2(
             ["a", {class: `dropdown-item YUI_PERIOD_MODE ` +
                           `YUI_PERIOD_MODE_${mode.id.toUpperCase()}`, href: "#",
@@ -1364,7 +1371,7 @@ function ac_language_changed(gobj, event, kw, src)
         if(!mode.$btn) {
             continue;
         }
-        let name = mode_name(mode);
+        let name = mode_name(/* i18n: C_YUI_PERIOD_I18N_KEYS, YUI_TIME_I18N_KEYS */ mode);
         let $text = mode.$btn.querySelector(".YUI_PERIOD_MODE_TEXT");
         if($text) {
             $text.textContent = name;

package/src/c_yui_schema_editor.js

@@ -168,6 +168,16 @@ import {text_node} from "./yui_text.js";
  ***************************************************************/
 const GCLASS_NAME = "C_YUI_SCHEMA_EDITOR";
 
+/*  The keys this editor hands to t() as DATA, where no scan of the
+ *  source reads them: the severity of a finding, which the checks of
+ *  schema_validate.js write (`add("error", ...)`) and the report
+ *  translates. 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 the severities those checks
+ *  write. The flags' words are schema_flags.js's, the plan's ops
+ *  schema_import.js's.  */
+export const C_YUI_SCHEMA_EDITOR_I18N_KEYS = ["error", "warning"];
+
 /*  The three topics a schema is stored in. Named once: everything
  *  below addresses them by these constants and nothing composes the
  *  strings again.  */
@@ -1248,7 +1258,7 @@ function render(gobj)
     }
     if(state === "ST_IDLE") {
         show_notice(gobj, priv.load_error ? "cannot load the schemas" : "not connected",
-            priv.load_error, true);
+            /* i18n: data */ priv.load_error, true);
         destroy_diagram(gobj);
         clear($body);
         return;
@@ -1352,16 +1362,16 @@ function render_treedbs(gobj, $body)
     let $cards = [];
 
     for(let treedb of priv.model.treedbs) {
-        let tags = [
+        const from_c = treedb.c_schema_version !== undefined &&
+            String(treedb.c_schema_version) !== String(treedb.schema_version);
+        const tags = [
             {i18n: "topics", text: treedb.topics.length},
             {i18n: "version", text: treedb.schema_version === undefined
-                ? "?" : treedb.schema_version}
+                ? "?" : treedb.schema_version},
+            ...(from_c
+                ? [{i18n: "from c", text: treedb.c_schema_version, style: "is-warning is-light"}]
+                : [])
         ];
-        if(treedb.c_schema_version !== undefined &&
-            String(treedb.c_schema_version) !== String(treedb.schema_version)
-        ) {
-            tags.push({i18n: "from c", text: treedb.c_schema_version, style: "is-warning is-light"});
-        }
         $cards.push(open_card(gobj, "SCHEMA_TREEDB_CARD", treedb.id, "yi-database",
             tags, "EV_SELECT_TREEDB", {treedb: treedb.id}));
     }
@@ -1396,7 +1406,7 @@ function render_topics(gobj, $body)
     let treedb = current_treedb(gobj);
 
     if(!treedb) {
-        show_notice(gobj, "that treedb is not here any more", priv.treedb_id);
+        show_notice(gobj, "that treedb is not here any more", /* i18n: data */ priv.treedb_id);
         return;
     }
 
@@ -1544,7 +1554,7 @@ function render_columns(gobj, $body)
     let topic = current_topic(gobj);
 
     if(!topic) {
-        show_notice(gobj, "that topic is not here any more", priv.topic_name);
+        show_notice(gobj, "that topic is not here any more", /* i18n: data */ priv.topic_name);
         return;
     }
 
@@ -1805,7 +1815,7 @@ function render_diagram(gobj)
     if(!treedb) {
         destroy_diagram(gobj);
         clear($body);
-        show_notice(gobj, "that treedb is not here any more", priv.treedb_id);
+        show_notice(gobj, "that treedb is not here any more", /* i18n: data */ priv.treedb_id);
         return;
     }
     if(!gclass_find_by_name("C_YUI_TREEDB_SCHEMA")) {
@@ -2425,7 +2435,8 @@ function open_report(gobj, findings, treedb_id)
         return ["tr", {class: `SCHEMA_REPORT_ROW SCHEMA_REPORT_${finding.severity.toUpperCase()}`}, [
             ["td", {class: "SCHEMA_REPORT_SEVERITY"}, [
                 ["span", {class: `tag ${finding.severity === "error" ? "is-danger" : "is-warning"}` +
-                                 " is-light", i18n: finding.severity}, t(finding.severity)]
+                                 " is-light", i18n: finding.severity},
+                    t(finding.severity)]
             ]],
             ["td", {class: "SCHEMA_REPORT_WHAT", i18n: finding.code}, t(finding.code)],
             ["td", {class: "SCHEMA_REPORT_TOPIC"}, text_node(finding.topic || "")],
@@ -3527,7 +3538,7 @@ function ac_mt_command_answer(gobj, event, kw, src)
             return late_write_done(gobj, command, topic_name, data);
         }
         if(result < 0) {
-            return end_writes(gobj, comment || t("the treedb refused the write"));
+            return end_writes(gobj, /* i18n: data */ comment || "the treedb refused the write");
         }
         priv.save_wrote = true;
         let record = null;
@@ -4229,7 +4240,8 @@ function confirm_column_delete(gobj, verdict)
         capped:  "the records read hold no value in this column, but not all were read: the rest may hold values that no reader will show any more",
         unknown: "the records of this topic could not be read: if they hold values in this column, they keep them, but no reader shows them any more"
     };
-    let message = "delete this column?";
+    const message = "delete this column?";
+    let $warning = null;
     if(NOTES[verdict]) {
         let children = [
             ["p", {class: "CONFIRM_MSG yui-confirm-msg", i18n: message}, t(message)],
@@ -4242,9 +4254,9 @@ function confirm_column_delete(gobj, verdict)
                 ["span", {class: "ml-1"}, String(c.scanned)]
             ]]);
         }
-        message = createElement2(["div", {class: "SCHEMA_COLUMN_DATA_WARNING"}, children]);
+        $warning = createElement2(["div", {class: "SCHEMA_COLUMN_DATA_WARNING"}, children]);
     }
-    confirm_then(gobj, message, `${c.topic}.${c.col}`,
+    confirm_then(gobj, $warning? $warning : message, `${c.topic}.${c.col}`,
         {what: "column", topic: c.topic, col: c.col});
     return 0;
 }
@@ -4482,7 +4494,9 @@ function ac_validate(gobj, event, kw, src)
         written_topics: Object.keys(priv.written),
         baseline:       priv.baseline
     });
-    open_report(gobj, findings, treedb.id);
+    /*  The severities are C_YUI_SCHEMA_EDITOR_I18N_KEYS; the codes are the
+     *  checks' own keys, read where schema_validate.js writes them.  */
+    open_report(gobj, /* i18n: C_YUI_SCHEMA_EDITOR_I18N_KEYS */ findings, treedb.id);
     if(has_errors(findings)) {
         log_warning(`${gobj_short_name(gobj)}: ${treedb.id} would be refused as it is`);
     }
@@ -4566,7 +4580,9 @@ function ac_preview_import(gobj, event, kw, src)
 
     let plan = plan_import(treedb, incoming, {prune: !!kw.prune});
     priv.import_plan = plan;
-    render_import_plan(gobj, plan);
+    /*  Its writes are SCHEMA_IMPORT_I18N_KEYS; its conflicts are keys of
+     *  their own, read where schema_import.js writes them.  */
+    render_import_plan(gobj, /* i18n: SCHEMA_IMPORT_I18N_KEYS */ plan);
     return 0;
 }
 

package/src/c_yui_shell.js

@@ -281,7 +281,8 @@ function mt_start(gobj)
 
     build_item_index(gobj, config);
     instantiate_menus(gobj, config);
-    build_toolbar(gobj, config);
+    /*  The app's shell declaration: its toolbar's keys are read there  */
+    build_toolbar(gobj, /* i18n: data */ config);
 
     /*  lifecycle: "eager" — preinstantiate views that must exist from boot. */
     preinstantiate_eager_views(gobj);
@@ -1781,7 +1782,7 @@ function safe_id(s)
  ************************************************************/
 function build_toolbar(gobj, config)
 {
-    let tb = config && config.toolbar;
+    const tb = config && config.toolbar;
     if(!tb || !is_array(tb.items)) {
         return;
     }
@@ -1807,7 +1808,7 @@ function build_toolbar(gobj, config)
      *  which createElement2 maps to `data-i18n` on the rendered
      *  element.  Apps swap languages by calling
      *  refresh_language(shell.$container, t) — no DOM rebuild here. */
-    let toolbar_aria = tb.aria_label || "Toolbar";
+    const toolbar_aria = tb.aria_label || "toolbar";
     let $bar = createElement2(
         ["nav", {class: "yui-toolbar navbar",
                  role: "navigation",
@@ -2060,8 +2061,8 @@ function build_toolbar_brand_item(gobj, it)
 function build_toolbar_avatar_item(gobj, it)
 {
     let priv = gobj.priv;
-    let aria_key = it.aria_label || it.name || it.id || "User menu";
-    let i18n_aria = it.aria_label || it.name || "User menu";
+    const aria_key = it.aria_label || it.name || it.id || "user menu";
+    const i18n_aria = it.aria_label || it.name || "user menu";
     let action_type = (it.action && it.action.type) || "";
     let attrs = {
         class: "navbar-item yui-toolbar-item yui-toolbar-avatar is-unselectable",
@@ -2151,8 +2152,8 @@ function attach_context_action(gobj, $item, it)
 function build_toolbar_connection_item(gobj, it)
 {
     let priv = gobj.priv;
-    let aria_key  = it.aria_label || it.name || it.id || "backend connection";
-    let i18n_aria = it.aria_label || it.name || "backend connection";
+    const aria_key  = it.aria_label || it.name || it.id || "backend connection";
+    const i18n_aria = it.aria_label || it.name || "backend connection";
     let attrs = {
         class: "navbar-item yui-toolbar-item yui-toolbar-conn " +
                "is-unselectable is-disconnected",
@@ -2328,8 +2329,8 @@ function open_toolbar_dropdown(gobj, item, action, $trigger)
      *  (yui_shell_set_translator), re-apply it to the freshly built
      *  $panel.  Rebuilt per open ⇒ a later language switch is picked
      *  up the next time the dropdown opens. */
-    let aria_key = item && (item.aria_label || item.name || item.id) || "Menu";
-    let i18n_aria = (item && (item.aria_label || item.name)) || "Menu";
+    const aria_key = item && (item.aria_label || item.name || item.id) || "menu";
+    const i18n_aria = (item && (item.aria_label || item.name)) || "menu";
     let $panel = createElement2(["div", {
         class: "yui-toolbar-dropdown-panel",
         role: "menu",
@@ -2341,7 +2342,7 @@ function open_toolbar_dropdown(gobj, item, action, $trigger)
     let raw_items = is_array(action.items) ? action.items : [];
     for(let i = 0; i < raw_items.length; i++) {
         let sub = raw_items[i];
-        let $row = build_dropdown_row(gobj, sub, i);
+        let $row = build_dropdown_row(gobj, /* i18n: data */ sub, i);    // the app's shell declaration
         if(!$row) {
             continue;
         }

package/src/c_yui_treedb_graph.js

@@ -513,7 +513,7 @@ function show_load_error(gobj, message)
         $container.insertBefore($err, $container.firstChild);
     }
     let treedb = gobj_read_attr(gobj, "treedb_name") || "";
-    $err.textContent = (treedb ? `${treedb}: ` : "") + (message || "cannot load treedb");
+    $err.textContent = (treedb ? `${treedb}: ` : "") + (message || t("cannot load treedb"));
 }
 
 /************************************************************
@@ -671,6 +671,15 @@ const NODE_MODE_ICONS = {
     shape:    'yi-hexagon-nodes',
 };
 
+/*  The keys that reach t() as data: the labels of NODE_MODE_LABELS.
+ *  Published for a consumer's validate-locales, which asks the app's
+ *  locales for every key of an exported `*_I18N_KEYS` array. A view
+ *  added to NODE_MODE_LABELS adds its label here
+ *  (i18n_key_functions.test.js checks it).  */
+export const C_YUI_TREEDB_GRAPH_I18N_KEYS = [
+    'full', 'compact', 'shape'
+];
+
 /*  The pressed view and the labels toggle, from the attrs. The
  *  toggle only means something on figures, so it is disabled
  *  elsewhere.
@@ -1219,7 +1228,7 @@ function open_json_viewer(gobj)
             close_json_viewer(gobj);
             return;
         }
-        priv.json_modal = yui_shell_show_modal(shell, $box, {
+        priv.json_modal = yui_shell_show_modal(shell, /* i18n: data */ $box, {
             dialog:        true,
             logical_class: "TREEDB_JSON_SHEET",
             title_prefix: priv.treedb_name,
@@ -1352,8 +1361,7 @@ function answer_print_tranger_refused(gobj, path, answer)
         gobj_send_event(jv, "EV_SUBTREE_ERROR",
             Object.assign({path: path}, answer), gobj);
     } else {
-        yui_shell_show_error(yui_shell_of(gobj),
-            answer.i18n || answer.error, {t: t});
+        yui_shell_show_error(yui_shell_of(gobj), answer.i18n || answer.error, {t: t});
     }
 }
 
@@ -1404,7 +1412,7 @@ function request_print_tranger(gobj, path)
         }, gobj);
     if(ret) {
         log_error(ret);
-        answer_print_tranger_refused(gobj, path, {error: refusal_text(ret)});
+        answer_print_tranger_refused(gobj, path, {error: /* i18n: data */ refusal_text(ret)});
         return;
     }
     if(path) {
@@ -2167,7 +2175,7 @@ function ac_mt_command_answer(gobj, event, kw, src)
                     {path: path, error: comment || "print-tranger failed"}, gobj);
             } else {
                 yui_shell_show_error(yui_shell_of(gobj),
-                    comment || "print-tranger failed", {t: t});
+                    /* i18n: data */ comment || "print-tranger failed", {t: t});
             }
             return 0;
         }
@@ -2184,9 +2192,9 @@ function ac_mt_command_answer(gobj, event, kw, src)
             /*  The schema couldn't load (not a treedb, no authz for it, backend
              *  down…). Show an inline banner in the view rather than a blocking
              *  app-modal that wedges the whole SPA behind an empty tab. */
-            show_load_error(gobj, t(comment));
+            show_load_error(gobj, t(/* i18n: data */ comment));
         } else {
-            yui_shell_show_error(yui_shell_of(gobj), comment, {t: t});
+            yui_shell_show_error(yui_shell_of(gobj), /* i18n: data */ comment, {t: t});
         }
         // HACK don't return for non-descs, pass errors when need it.
     }
@@ -3099,7 +3107,7 @@ function refresh_legend(gobj)
              hidden? `${entry.total}` : `${entry.visible}/${entry.total}`]
         );
 
-        let body_key = is_main? 'main topic' : (hidden? 'show topic' : 'hide topic');
+        const body_key = is_main? 'main topic' : (hidden? 'show topic' : 'hide topic');
 
         /*  Built as an object first: an attribute that is `undefined`
          *  is still SET by createElement2 (to the string "undefined"),

package/src/c_yui_treedb_schema.js

@@ -68,6 +68,7 @@ import {
     yui_graph_update_zoom,
 } from "./yui_graph_camera.js";
 import {ensure_pinch_zoom_patch} from "./g6_touch_gestures.js";
+import {keep_canvas_tab_order} from "./g6_canvas_tab_order.js";
 import {col_key_roles} from "./treedb_topic_keys.js";
 
 import {getStrokeColor} from "./lib_graph.js";
@@ -659,6 +660,10 @@ function build_graph(gobj)
 
     graph.setTheme(dark ? "dark" : "light");
 
+    /*  Tab goes from the graph to its own buttons: the main canvas in
+     *  the Tab order, the other layers out (g6_canvas_tab_order.js).  */
+    keep_canvas_tab_order(gobj, graph);
+
     /*  The readout follows ANY camera change, the wheel included -- a
      *  wheel notch passes through no action of ours.  */
     graph.on('aftertransform', () => {

package/src/c_yui_treedb_topic_with_form.js

@@ -1512,7 +1512,7 @@ function create_tabulator(gobj)
 
         let colDef = {
             title: col_label(col, gobj_read_str_attr(gobj, "topic_name")),
-            titleFormatter: col_title_formatter(gobj, col),
+            titleFormatter: col_title_formatter(gobj, /* i18n: data */ col),     // a column of the schema
             field: col.id,
             sorter: sorter,
             hozAlign: hozAlign,
@@ -2428,7 +2428,7 @@ function open_form_dialog(gobj, mode, record)
      *  while "new"/"edit"/"view" is what only this header can tell you.
      *  All three are keys this library already uses.  */
     let pkey = desc.pkey || "id";
-    let title = (mode === "create")? "new" : ((mode === "view")? "view" : "edit");
+    const title = (mode === "create")? "new" : ((mode === "view")? "view" : "edit");
     let title_prefix = "";
     if(mode !== "create") {
         let rid = record ? String(record[pkey] ?? "") : "";
@@ -2548,7 +2548,7 @@ function form_may_close(gobj)
              *  a second key to define — and the one that was here had never
              *  been defined in any locale, which renders as the English
              *  sentence itself, in every language, for ever. */
-            confirm_then(gobj, kw.warning || "all changes will be lost",
+            confirm_then(gobj, /* i18n: C_YUI_FORM_I18N_KEYS */ kw.warning || "all changes will be lost",
                 {what: "close_form"});
             return false;
         }
@@ -2676,7 +2676,7 @@ function open_schema_dialog(gobj)
     /*  Title split in two halves: the topic name is DATA (never
      *  translated) and "schema" is the kind (carries its i18n key), so
      *  the header re-translates on a language switch. */
-    let presented = present_json_popup(gobj, $box, {
+    let presented = present_json_popup(gobj, /* i18n: data */ $box, {     // the viewer's own DOM
         name:          "schemawin_" + clean_name(gobj_name(gobj)),
         logical_class: "TREEDB_SCHEMA",
         title_prefix:  gobj_read_str_attr(gobj, "topic_name"),
@@ -2803,7 +2803,7 @@ function open_cell_json_dialog(gobj, row_id, col_id)
      *  i18n key — the shared `col.id` one, so the header re-translates on a
      *  language switch and reads as the raw id where the app defines no key
      *  (exactly what an untranslated column header already shows). */
-    let presented = present_json_popup(gobj, $box, {
+    let presented = present_json_popup(gobj, /* i18n: data */ $box, {     // the viewer's own DOM
         name:          "cellwin_" + clean_name(gobj_name(gobj)),
         logical_class: "TREEDB_CELL_JSON",
         title_prefix:  String(row_id),
@@ -4599,7 +4599,7 @@ function ac_show_hook_data(gobj, event, kw, src)
                             String(kw.row_id), kw.col_id);
         return 0;
     }
-    open_hook_choice_dialog(gobj, targets, String(kw.row_id), kw.col_id);
+    open_hook_choice_dialog(gobj, /* i18n: data */ targets, String(kw.row_id), kw.col_id);    // the schema's topics
     return 0;
 }
 
@@ -4681,7 +4681,7 @@ function ac_refresh(gobj, event, kw, src)
  ************************************************************/
 function ac_show_cell_json(gobj, event, kw, src)
 {
-    open_cell_json_dialog(gobj, kw.row_id, kw.col_id);
+    open_cell_json_dialog(gobj, kw.row_id, /* i18n: data */ kw.col_id);
 
     return 0;
 }
@@ -4695,7 +4695,7 @@ function ac_show_cell_json(gobj, event, kw, src)
  ************************************************************/
 function ac_show_cell_file(gobj, event, kw, src)
 {
-    open_cell_file_dialog(gobj, kw.row_id, kw.col_id);
+    open_cell_file_dialog(gobj, kw.row_id, /* i18n: data */ kw.col_id);
 
     return 0;
 }
@@ -5291,7 +5291,7 @@ function open_table_json_dialog(gobj, records)
     }
 
     /*  The topic is DATA (the prefix), the title carries its key.  */
-    let presented = present_json_popup(gobj, $box, {
+    let presented = present_json_popup(gobj, /* i18n: data */ $box, {     // the viewer's own DOM
         name:          "tablejsonwin_" + clean_name(gobj_name(gobj)),
         logical_class: "TREEDB_TABLE_JSON",
         title_prefix:  gobj_read_str_attr(gobj, "topic_name"),