@yuneta/gobj-ui 7.23.127 → 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");
@@ -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("");

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");
@@ -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("");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.127",
+  "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)

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('');