@yuneta/gobj-ui 7.23.130 → 7.23.132

package/README.md

@@ -2290,6 +2290,56 @@ too; the shell's stylesheet raises Bulma's 30% alpha to 70% (2.47:1 → 7.96 in
 dark) where Bulma declares the variable, since a `:root` override does not
 reach it.
 
+### A control without a name is a bug: `title` + `aria-label`, always
+
+**Every control this library draws — and every control an app draws with it —
+carries a `title` AND an `aria-label`, and both are translatable.** A control
+is any `input`, `select`, `textarea`, `button`, or anything that behaves as
+one. All four attributes are written where the control is built:
+
+```js
+['button', {class: 'FOO_SAVE button',
+            title: t('save'),        'data-i18n-title': 'save',
+            'aria-label': t('save'), 'data-i18n-aria-label': 'save'}, …]
+```
+
+It is a floor, not a preference. The ecosystem was swept against it — the
+deployed page of six SPAs, read control by control — and the target is **zero
+controls without a name**. Three things it exists to stop, each of which
+shipped:
+
+| What looks like a name | Why it is not |
+|---|---|
+| A `<label>` **beside** the control (Bulma's `field`) | No `for`, no wrapping: it names the box for the eye and for nothing else |
+| `<label for="x">` over a control carrying only `name="x"` | `for` matches an **`id`**, which the control does not have — correct-looking source, no association |
+| A `placeholder` | Gone the moment something is typed; a reader need not announce it |
+| The visible text | Disappears with `is-hidden-mobile`; and where the text is the STATE (`on`/`off`), it does not say what the control DOES |
+
+A `<label>` that **wraps** its control is the one shape that needs no
+`aria-label` — the label IS the accessible name. And a **literal**
+`aria-label` next to a visible `i18n` label is worse than none: it OVERRIDES
+the translated text for a reader.
+
+Two things carry no attribute anyone can set, and are named after the render
+instead — and again on every rebuild, because a name written onto a widget's
+DOM is a race with the next one:
+
+- **What a widget draws for itself**: Tabulator's header filters and its
+  row-selection checkbox (`yui_tabulator_name_filters` /
+  `yui_tabulator_name_row_selects`, hung off `columnsLoaded` and
+  `renderComplete`), Tom Select's box in front of the `<select>` it hides
+  (`name_form_control`).
+- **An `<option>`**, which is text like any other: it carries `data-i18n`,
+  with `value` kept explicit — a translated option with no value tells the FSM
+  to enter a mode that does not exist.
+
+**How to check it.** Not with a grep: dump `title`/`aria-label` from the
+DEPLOYED DOM, resolve each control's name the way a reader does (`aria-label`
+→ `label[for]` → a wrapping `<label>` → the text → `title` → `placeholder`),
+then switch language and diff. A key that arrives as a VARIABLE — from a data
+table, a helper's argument, a local alias of `t()` — is invisible to
+`validate-locales` and shows up only there.
+
 ### i18n: a string must be able to CHANGE language, not just be translated once
 
 Passing a string through `t()` is **not** enough. `refresh_language()` only

package/dist/gobj-ui.cjs.js

@@ -18318,6 +18318,7 @@ function get_node_category(d) {
 ***************************************************************/
 var LAYOUTS = {
 	"vertical": {
+		key: "vertical tree",
 		label: "Vertical",
 		orientation: "V",
 		compact: false,
@@ -18325,6 +18326,7 @@ var LAYOUTS = {
 		edge_type: "cubic-vertical"
 	},
 	"vertical-compact": {
+		key: "vertical tree compact",
 		label: "Vertical compact",
 		orientation: "V",
 		compact: true,
@@ -18332,6 +18334,7 @@ var LAYOUTS = {
 		edge_type: "cubic-vertical"
 	},
 	"horizontal": {
+		key: "horizontal tree",
 		label: "Horizontal",
 		orientation: "H",
 		compact: false,
@@ -18339,6 +18342,7 @@ var LAYOUTS = {
 		edge_type: "cubic-horizontal"
 	},
 	"horizontal-compact": {
+		key: "horizontal tree compact",
 		label: "Horizontal compact",
 		orientation: "H",
 		compact: true,
@@ -18346,6 +18350,7 @@ var LAYOUTS = {
 		edge_type: "cubic-horizontal"
 	},
 	"lanes-v": {
+		key: "lanes vertical",
 		label: "Lanes vertical",
 		orientation: "V",
 		compact: true,
@@ -18353,6 +18358,7 @@ var LAYOUTS = {
 		edge_type: "polyline"
 	},
 	"lanes-h": {
+		key: "lanes horizontal",
 		label: "Lanes horizontal",
 		orientation: "H",
 		compact: true,
@@ -18360,6 +18366,7 @@ var LAYOUTS = {
 		edge_type: "polyline"
 	},
 	"dagre-tb": {
+		key: "dagre top-down",
 		label: "Dagre (top → bottom)",
 		orientation: "V",
 		compact: true,
@@ -18372,6 +18379,7 @@ var LAYOUTS = {
 		edge_type: "polyline"
 	},
 	"dagre-lr": {
+		key: "dagre left-right",
 		label: "Dagre (left → right)",
 		orientation: "H",
 		compact: true,
@@ -18740,12 +18748,16 @@ function make_toolbar$1(gobj) {
 	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 	let options = [];
 	for (let key of Object.keys(LAYOUTS)) {
-		let opt_attrs = { value: key };
+		let i18n_key = LAYOUTS[key].key;
+		let opt_attrs = {
+			value: key,
+			"data-i18n": i18n_key
+		};
 		if (key === current_layout) opt_attrs.selected = "selected";
 		options.push([
 			"option",
 			opt_attrs,
-			LAYOUTS[key].label
+			(0, i18next.t)(i18n_key)
 		]);
 	}
 	let $wrap = (0, _yuneta_gobj_js.createElement2)([

package/dist/gobj-ui.es.js

@@ -18313,6 +18313,7 @@ function get_node_category(d) {
 ***************************************************************/
 var LAYOUTS = {
 	"vertical": {
+		key: "vertical tree",
 		label: "Vertical",
 		orientation: "V",
 		compact: false,
@@ -18320,6 +18321,7 @@ var LAYOUTS = {
 		edge_type: "cubic-vertical"
 	},
 	"vertical-compact": {
+		key: "vertical tree compact",
 		label: "Vertical compact",
 		orientation: "V",
 		compact: true,
@@ -18327,6 +18329,7 @@ var LAYOUTS = {
 		edge_type: "cubic-vertical"
 	},
 	"horizontal": {
+		key: "horizontal tree",
 		label: "Horizontal",
 		orientation: "H",
 		compact: false,
@@ -18334,6 +18337,7 @@ var LAYOUTS = {
 		edge_type: "cubic-horizontal"
 	},
 	"horizontal-compact": {
+		key: "horizontal tree compact",
 		label: "Horizontal compact",
 		orientation: "H",
 		compact: true,
@@ -18341,6 +18345,7 @@ var LAYOUTS = {
 		edge_type: "cubic-horizontal"
 	},
 	"lanes-v": {
+		key: "lanes vertical",
 		label: "Lanes vertical",
 		orientation: "V",
 		compact: true,
@@ -18348,6 +18353,7 @@ var LAYOUTS = {
 		edge_type: "polyline"
 	},
 	"lanes-h": {
+		key: "lanes horizontal",
 		label: "Lanes horizontal",
 		orientation: "H",
 		compact: true,
@@ -18355,6 +18361,7 @@ var LAYOUTS = {
 		edge_type: "polyline"
 	},
 	"dagre-tb": {
+		key: "dagre top-down",
 		label: "Dagre (top → bottom)",
 		orientation: "V",
 		compact: true,
@@ -18367,6 +18374,7 @@ var LAYOUTS = {
 		edge_type: "polyline"
 	},
 	"dagre-lr": {
+		key: "dagre left-right",
 		label: "Dagre (left → right)",
 		orientation: "H",
 		compact: true,
@@ -18735,12 +18743,16 @@ function make_toolbar$1(gobj) {
 	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 	let options = [];
 	for (let key of Object.keys(LAYOUTS)) {
-		let opt_attrs = { value: key };
+		let i18n_key = LAYOUTS[key].key;
+		let opt_attrs = {
+			value: key,
+			"data-i18n": i18n_key
+		};
 		if (key === current_layout) opt_attrs.selected = "selected";
 		options.push([
 			"option",
 			opt_attrs,
-			LAYOUTS[key].label
+			t(i18n_key)
 		]);
 	}
 	let $wrap = createElement2([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.130",
+  "version": "7.23.132",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_gobj_tree_js.js

@@ -448,8 +448,16 @@ function get_node_category(d)
  *    g6_layout:   G6 layout config object applied to the graph
  *    edge_type:   matching G6 edge type
  ***************************************************************/
+/*  `key` is the i18n key of the layout and `label` its reference ENGLISH
+ *  wording -- the value a consumer's `en` bundle carries for that key.
+ *
+ *  The keys are SHARED with the JSON graph's own picker (`vertical tree`,
+ *  `dagre top-down`, `dagre left-right`): the two graphs sit side by side
+ *  in the same console, so the same layout must be called the same thing
+ *  in both -- the toolbar vocabulary rule, applied to a select.  */
 const LAYOUTS = {
     "vertical": {
+        key: "vertical tree",
         label: "Vertical",
         orientation: "V",
         compact: false,
@@ -457,6 +465,7 @@ const LAYOUTS = {
         edge_type: 'cubic-vertical',
     },
     "vertical-compact": {
+        key: "vertical tree compact",
         label: "Vertical compact",
         orientation: "V",
         compact: true,
@@ -464,6 +473,7 @@ const LAYOUTS = {
         edge_type: 'cubic-vertical',
     },
     "horizontal": {
+        key: "horizontal tree",
         label: "Horizontal",
         orientation: "H",
         compact: false,
@@ -471,6 +481,7 @@ const LAYOUTS = {
         edge_type: 'cubic-horizontal',
     },
     "horizontal-compact": {
+        key: "horizontal tree compact",
         label: "Horizontal compact",
         orientation: "H",
         compact: true,
@@ -478,6 +489,7 @@ const LAYOUTS = {
         edge_type: 'cubic-horizontal',
     },
     "lanes-v": {
+        key: "lanes vertical",
         label: "Lanes vertical",
         orientation: "V",
         compact: true,
@@ -485,6 +497,7 @@ const LAYOUTS = {
         edge_type: 'polyline',
     },
     "lanes-h": {
+        key: "lanes horizontal",
         label: "Lanes horizontal",
         orientation: "H",
         compact: true,
@@ -492,6 +505,7 @@ const LAYOUTS = {
         edge_type: 'polyline',
     },
     "dagre-tb": {
+        key: "dagre top-down",
         label: "Dagre (top → bottom)",
         orientation: "V",
         compact: true,
@@ -499,6 +513,7 @@ const LAYOUTS = {
         edge_type: 'polyline',
     },
     "dagre-lr": {
+        key: "dagre left-right",
         label: "Dagre (left → right)",
         orientation: "H",
         compact: true,
@@ -1015,13 +1030,20 @@ function make_toolbar(gobj)
     /*
      *  Layout selector
      */
+    /*  An <option> is text like any other, and it was the only text of
+     *  this window that stayed English: the labels were written into
+     *  LAYOUTS and put straight on the node. The KEY is the layout id --
+     *  the same choice the treedb graph makes for its own layouts -- and
+     *  `value` stays explicit, or a translated option would tell the FSM
+     *  to enter a layout called "Vertical compacto".  */
     let options = [];
     for(let key of Object.keys(LAYOUTS)) {
-        let opt_attrs = {value: key};
+        let i18n_key = LAYOUTS[key].key;
+        let opt_attrs = {value: key, 'data-i18n': i18n_key};
         if(key === current_layout) {
             opt_attrs.selected = "selected";
         }
-        options.push(['option', opt_attrs, LAYOUTS[key].label]);
+        options.push(['option', opt_attrs, t(i18n_key)]);
     }
 
     /*  `.select` on the WRAPPER and not on the control: Bulma styles

package/src/yui_dev.js

@@ -67,17 +67,25 @@ const TRAFFIC_TS_FIELDS = {
  *  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 `mk_expand` / `mk_dir` /
- *  `mk_out` helpers pass their key as a VARIABLE, so a scan of `t("…")`
+ *  `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 they, so a scan of `t("…")`
  *  sees none of them and reports OK with the whole window in English --
  *  which is how it shipped in gui_agent and gui_treedb. The full set a
  *  consumer must define, kept here so it can be copied:
  *
- *      automata, creation, start / stop, subscriptions, i18n, traffic,
- *      no poll, output, window, console, both, view, detailed, expanded,
- *      name only, expand, schema, data, metadata, show, outgoing,
- *      incoming, errors, find, log, traces, developer, yuno monitor,
- *      copied, muted, unmute
+ *      automata, both, browser console only, clear,
+ *      clear captured traffic, compact, console, copied, copy,
+ *      copy visible traffic to clipboard, creation, data, detailed,
+ *      dev window and browser console, dev window only, developer,
+ *      errors, expand, expanded, filter events / payload, find,
+ *      hide the timers and the recurring traffic, i18n, incoming, log,
+ *      machine trace shape, metadata, mute this message, muted,
+ *      name only, no poll, outgoing, output, periodic, schema, show,
+ *      show this section in the expanded view, simple mach,
+ *      start / stop, subscriptions, traces, traffic, unmute, 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.  */