@yuneta/gobj-ui 7.23.126 → 7.23.128

package/dist/gobj-ui.cjs.js

@@ -7393,9 +7393,15 @@ function name_form_control($field, conf) {
 	let key = conf.label_i18n || conf.label || "";
 	if (!key) return;
 	let $control = $field.querySelector("input, select, textarea");
-	if (!$control || $control.getAttribute("aria-label")) return;
-	$control.setAttribute("aria-label", (0, i18next.t)(key));
-	$control.setAttribute("data-i18n-aria-label", key);
+	if ($control && !$control.getAttribute("aria-label")) {
+		$control.setAttribute("aria-label", (0, i18next.t)(key));
+		$control.setAttribute("data-i18n-aria-label", key);
+	}
+	let $ts = $field.querySelector(".ts-control input");
+	if ($ts && !$ts.getAttribute("aria-label")) {
+		$ts.setAttribute("aria-label", (0, i18next.t)(key));
+		$ts.setAttribute("data-i18n-aria-label", key);
+	}
 }
 function build_form(gobj) {
 	let form_id = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "form_id");
@@ -8443,7 +8449,7 @@ function create_tabulator$1(gobj, $extend, name, template) {
 	tabulator.on("renderComplete", function() {
 		yui_tabulator_name_row_selects(tabulator, i18next.t);
 	});
-	tabulator.on("tableBuilt", function() {
+	tabulator.on("columnsLoaded", function() {
 		yui_tabulator_name_row_selects(tabulator, i18next.t);
 	});
 	tabulator.on("rowClick", function(e, row) {
@@ -25087,12 +25093,15 @@ function create_tabulator(gobj) {
 		if (cellClick) colDef.cellClick = cellClick;
 		columns.push(colDef);
 	}
+	function attr_text(value) {
+		return String(value).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+	}
 	function operateFormatter(cell, formatterParams, onRendered) {
 		return [
-			"<button class=\"button without-border px-2 edit\">",
+			`<button class="button without-border px-2 edit" title="${attr_text((0, i18next.t)("edit"))}" aria-label="${attr_text((0, i18next.t)("edit"))}">`,
 			"<i style=\"\" class=\"yi-pen has-text-link\"></i>",
 			"</button>",
-			"<button class=\"button without-border px-2 remove\">",
+			`<button class="button without-border px-2 remove" title="${attr_text((0, i18next.t)("delete"))}" aria-label="${attr_text((0, i18next.t)("delete"))}">`,
 			"<i style=\"\" class=\"yi-trash has-text-danger\"></i>",
 			"</button>"
 		].join("");
@@ -25218,6 +25227,10 @@ function create_tabulator(gobj) {
 		tabulator.element.classList.toggle("yui-single-page", single_page);
 		tabulator.element.classList.toggle("yui-no-paginator", no_paginator);
 	}
+	tabulator.on("columnsLoaded", function() {
+		yui_tabulator_name_filters(tabulator, i18next.t);
+		yui_tabulator_name_row_selects(tabulator, i18next.t);
+	});
 	tabulator._ready = false;
 	tabulator.on("tableBuilt", function() {
 		yui_tabulator_name_filters(tabulator, i18next.t);

package/dist/gobj-ui.es.js

@@ -7388,9 +7388,15 @@ function name_form_control($field, conf) {
 	let key = conf.label_i18n || conf.label || "";
 	if (!key) return;
 	let $control = $field.querySelector("input, select, textarea");
-	if (!$control || $control.getAttribute("aria-label")) return;
-	$control.setAttribute("aria-label", t(key));
-	$control.setAttribute("data-i18n-aria-label", key);
+	if ($control && !$control.getAttribute("aria-label")) {
+		$control.setAttribute("aria-label", t(key));
+		$control.setAttribute("data-i18n-aria-label", key);
+	}
+	let $ts = $field.querySelector(".ts-control input");
+	if ($ts && !$ts.getAttribute("aria-label")) {
+		$ts.setAttribute("aria-label", t(key));
+		$ts.setAttribute("data-i18n-aria-label", key);
+	}
 }
 function build_form(gobj) {
 	let form_id = gobj_read_str_attr(gobj, "form_id");
@@ -8438,7 +8444,7 @@ function create_tabulator$1(gobj, $extend, name, template) {
 	tabulator.on("renderComplete", function() {
 		yui_tabulator_name_row_selects(tabulator, t);
 	});
-	tabulator.on("tableBuilt", function() {
+	tabulator.on("columnsLoaded", function() {
 		yui_tabulator_name_row_selects(tabulator, t);
 	});
 	tabulator.on("rowClick", function(e, row) {
@@ -25082,12 +25088,15 @@ function create_tabulator(gobj) {
 		if (cellClick) colDef.cellClick = cellClick;
 		columns.push(colDef);
 	}
+	function attr_text(value) {
+		return String(value).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+	}
 	function operateFormatter(cell, formatterParams, onRendered) {
 		return [
-			"<button class=\"button without-border px-2 edit\">",
+			`<button class="button without-border px-2 edit" title="${attr_text(t("edit"))}" aria-label="${attr_text(t("edit"))}">`,
 			"<i style=\"\" class=\"yi-pen has-text-link\"></i>",
 			"</button>",
-			"<button class=\"button without-border px-2 remove\">",
+			`<button class="button without-border px-2 remove" title="${attr_text(t("delete"))}" aria-label="${attr_text(t("delete"))}">`,
 			"<i style=\"\" class=\"yi-trash has-text-danger\"></i>",
 			"</button>"
 		].join("");
@@ -25213,6 +25222,10 @@ function create_tabulator(gobj) {
 		tabulator.element.classList.toggle("yui-single-page", single_page);
 		tabulator.element.classList.toggle("yui-no-paginator", no_paginator);
 	}
+	tabulator.on("columnsLoaded", function() {
+		yui_tabulator_name_filters(tabulator, t);
+		yui_tabulator_name_row_selects(tabulator, t);
+	});
 	tabulator._ready = false;
 	tabulator.on("tableBuilt", function() {
 		yui_tabulator_name_filters(tabulator, t);

package/package.json

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

package/src/c_yui_form.js

@@ -517,11 +517,22 @@ function name_form_control($field, conf)
         return;     /*  a field with no label names nothing  */
     }
     let $control = $field.querySelector("input, select, textarea");
-    if(!$control || $control.getAttribute("aria-label")) {
-        return;
+    if($control && !$control.getAttribute("aria-label")) {
+        $control.setAttribute("aria-label", t(key));
+        $control.setAttribute("data-i18n-aria-label", key);
+    }
+
+    /*  Tom Select HIDES the <select> it is given (`ts-hidden-accessible`)
+     *  and draws its own text box in front of it. Naming the original
+     *  therefore names the element nobody can reach: the box the reader
+     *  actually lands on had no name at all. Give it the same one -- it
+     *  is the same field -- and only when it has none, so a field that
+     *  named its own box keeps it.  */
+    let $ts = $field.querySelector(".ts-control input");
+    if($ts && !$ts.getAttribute("aria-label")) {
+        $ts.setAttribute("aria-label", t(key));
+        $ts.setAttribute("data-i18n-aria-label", key);
     }
-    $control.setAttribute("aria-label", t(key));
-    $control.setAttribute("data-i18n-aria-label", key);
 }
 
 function build_form(gobj)
@@ -1842,9 +1853,11 @@ function create_tabulator(gobj, $extend, name, template)
     tabulator.on("renderComplete", function() {
         yui_tabulator_name_row_selects(tabulator, t);
     });
-    /*  And at build: an EMPTY table renders no body, so `renderComplete`
-     *  never fires and the header's own box would keep its English name.  */
-    tabulator.on("tableBuilt", function() {
+    /*  And on every rebuild of the COLUMNS: an empty table renders no
+     *  body, so `renderComplete` never fires and the header's own box
+     *  would keep its English name -- and a `setColumns()` rebuilds the
+     *  header, throwing away whatever name was on it.  */
+    tabulator.on("columnsLoaded", function() {
         yui_tabulator_name_row_selects(tabulator, t);
     });
     tabulator.on("rowClick", function(e, row) {

package/src/c_yui_treedb_topic_with_form.js

@@ -1371,12 +1371,28 @@ function create_tabulator(gobj)
     /*
      *  Column with operators: edit, delete
      */
+    /*  Two ICON-ONLY buttons with no name of any kind -- and written as an
+     *  HTML STRING, where no sweep of `createElement2` specs can see them.
+     *  `t()` alone is enough and no `data-i18n-aria-label` is needed: a
+     *  language change re-runs `setColumns()`, which re-runs this
+     *  formatter. The text goes through an escaper because a translation
+     *  is text entering an attribute.  */
+    function attr_text(value) {
+        return String(value)
+            .replace(/&/g, "&").replace(/"/g, """)
+            .replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    }
+
     function operateFormatter(cell, formatterParams, onRendered) {
         return [
-            '<button class="button without-border px-2 edit">',
+            `<button class="button without-border px-2 edit" ` +
+                `title="${attr_text(t("edit"))}" ` +
+                `aria-label="${attr_text(t("edit"))}">`,
                 '<i style="" class="yi-pen has-text-link"></i>',
             '</button>',
-            '<button class="button without-border px-2 remove">',
+            `<button class="button without-border px-2 remove" ` +
+                `title="${attr_text(t("delete"))}" ` +
+                `aria-label="${attr_text(t("delete"))}">`,
                 '<i style="" class="yi-trash has-text-danger"></i>',
             '</button>'
         ].join('');
@@ -1652,6 +1668,16 @@ function create_tabulator(gobj)
         tabulator.element.classList.toggle("yui-no-paginator", no_paginator);
     }
 
+    /*  `columnsLoaded` and not only `tableBuilt`: EVERY rebuild of the
+     *  columns rebuilds the header, and the header carries two things
+     *  Tabulator draws without a name -- the per-column filter box and the
+     *  select-all checkbox. A language change runs `setColumns()`, so the
+     *  names put on at build were thrown away with the old header and the
+     *  boxes came back in English. This event fires on both paths.  */
+    tabulator.on("columnsLoaded", function() {
+        yui_tabulator_name_filters(tabulator, t);
+        yui_tabulator_name_row_selects(tabulator, t);
+    });
     tabulator._ready = false;
     tabulator.on("tableBuilt", function() {
         /*  Tabulator gives its header-filter boxes no name of any kind: