@yuneta/gobj-ui 7.23.127 → 7.23.129

package/dist/gobj-ui.cjs.js

@@ -2983,7 +2983,8 @@ function show_notification(shell, kind, message, opts) {
 		},
 		[["button", {
 			class: "TOAST_CLOSE delete",
-			"aria-label": "close"
+			"aria-label": (0, i18next.t)("close"),
+			"data-i18n-aria-label": "close"
 		}], [
 			"p",
 			{
@@ -3063,7 +3064,8 @@ function yui_shell_show_modal(shell, content, opts) {
 						{
 							class: "MODAL_BACK yui-dialog-back",
 							type: "button",
-							"aria-label": "back"
+							"aria-label": (0, i18next.t)("back"),
+							"data-i18n-aria-label": "back"
 						},
 						[["i", { class: "yi-arrow-left" }]]
 					],
@@ -3088,7 +3090,8 @@ function yui_shell_show_modal(shell, content, opts) {
 						{
 							class: "MODAL_CLOSE yui-dialog-x",
 							type: "button",
-							"aria-label": "close"
+							"aria-label": (0, i18next.t)("close"),
+							"data-i18n-aria-label": "close"
 						},
 						[["i", { class: "yi-xmark" }]]
 					]
@@ -3108,7 +3111,8 @@ function yui_shell_show_modal(shell, content, opts) {
 		]];
 		if (with_close) modal_children.push(["button", {
 			class: "MODAL_CLOSE modal-close is-large",
-			"aria-label": "close"
+			"aria-label": (0, i18next.t)("close"),
+			"data-i18n-aria-label": "close"
 		}]);
 	}
 	let logical = opts && opts.logical_class || "";
@@ -3261,7 +3265,8 @@ function build_dialog(shell, message, buttons, opts) {
 	]);
 	$card_children.push(["button", {
 		class: "CONFIRM_CLOSE delete yui-confirm-x",
-		"aria-label": "close"
+		"aria-label": (0, i18next.t)("close"),
+		"data-i18n-aria-label": "close"
 	}], [
 		"section",
 		{ class: "CONFIRM_BODY modal-card-body has-text-centered" },
@@ -3761,7 +3766,8 @@ function build_ui$17(gobj) {
 							{
 								class: "WINDOW_MIN yui-wc wc-min",
 								type: "button",
-								"aria-label": "minimize",
+								"aria-label": (0, i18next.t)("minimize"),
+								"data-i18n-aria-label": "minimize",
 								style: (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "showMin") && (0, _yuneta_gobj_js.gobj_read_pointer_attr)(gobj, "manager") ? "" : "display:none;"
 							},
 							WC_MIN,
@@ -3775,7 +3781,8 @@ function build_ui$17(gobj) {
 							{
 								class: "WINDOW_MAX yui-wc wc-max",
 								type: "button",
-								"aria-label": "maximize",
+								"aria-label": (0, i18next.t)("maximize"),
+								"data-i18n-aria-label": "maximize",
 								style: (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "showMax") ? "" : "display:none;"
 							},
 							WC_MAX,
@@ -3789,7 +3796,8 @@ function build_ui$17(gobj) {
 							{
 								class: "WINDOW_CLOSE yui-wc wc-close",
 								type: "button",
-								"aria-label": "close"
+								"aria-label": (0, i18next.t)("close"),
+								"data-i18n-aria-label": "close"
 							},
 							WC_CLOSE,
 							{ click: (evt) => {
@@ -4671,7 +4679,8 @@ function ac_register_window(gobj, event, kw, src) {
 				{
 					class: "yui-dock-close",
 					type: "button",
-					"aria-label": "close"
+					"aria-label": (0, i18next.t)("close"),
+					"data-i18n-aria-label": "close"
 				},
 				WC_X,
 				{ click: (evt) => {
@@ -4934,7 +4943,8 @@ function build_ui$16(gobj) {
 					"button",
 					{
 						class: "yui-pager-back button is-white is-hidden",
-						"aria-label": "back"
+						"aria-label": (0, i18next.t)("back"),
+						"data-i18n-aria-label": "back"
 					},
 					[[
 						"span",
@@ -4958,7 +4968,8 @@ function build_ui$16(gobj) {
 					"button",
 					{
 						class: "yui-pager-discard button is-white is-hidden",
-						"aria-label": "discard"
+						"aria-label": (0, i18next.t)("discard"),
+						"data-i18n-aria-label": "discard"
 					},
 					[[
 						"span",
@@ -5498,7 +5509,8 @@ function build_ui$15(gobj) {
 					"button",
 					{
 						class: "yui-wizard-back button",
-						"aria-label": "back"
+						"aria-label": (0, i18next.t)("back"),
+						"data-i18n-aria-label": "back"
 					},
 					[[
 						"span",
@@ -5520,7 +5532,8 @@ function build_ui$15(gobj) {
 					"button",
 					{
 						class: "yui-wizard-primary button is-link",
-						"aria-label": "next"
+						"aria-label": (0, i18next.t)("next"),
+						"data-i18n-aria-label": "next"
 					},
 					[[
 						"span",
@@ -6256,7 +6269,8 @@ function yui_file_control(gobj, { name, value, readonly, accept, on_pick }) {
 			type: "button",
 			class: "FILE_PICK button is-small",
 			"data-i18n-title": "choose a file",
-			"aria-label": "choose a file"
+			"aria-label": (0, i18next.t)("choose a file"),
+			"data-i18n-aria-label": "choose a file"
 		},
 		[["span", { class: "FILE_PICK_ICON yi-upload" }], [
 			"span",
@@ -6273,7 +6287,8 @@ function yui_file_control(gobj, { name, value, readonly, accept, on_pick }) {
 			type: "button",
 			class: "FILE_CLEAR button is-small",
 			"data-i18n-title": "remove the file",
-			"aria-label": "remove the file"
+			"aria-label": (0, i18next.t)("remove the file"),
+			"data-i18n-aria-label": "remove the file"
 		},
 		[["span", { class: "FILE_CLEAR_ICON yi-trash" }]]
 	]);
@@ -7393,9 +7408,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");
@@ -8362,7 +8383,10 @@ function create_coordinates(gobj, attrs) {
 				{
 					class: "input",
 					type: "text",
-					placeholder: (0, i18next.t)("coordinates") + "..."
+					placeholder: (0, i18next.t)("coordinates..."),
+					"data-i18n-placeholder": "coordinates...",
+					"aria-label": (0, i18next.t)("coordinates"),
+					"data-i18n-aria-label": "coordinates"
 				},
 				"",
 				{ "input": function(evt) {
@@ -13715,7 +13739,10 @@ function make_toolbar$4(gobj) {
 		{
 			class: "JSON_SEARCH input",
 			type: "text",
-			placeholder: (0, i18next.t)("search")
+			placeholder: (0, i18next.t)("search"),
+			"data-i18n-placeholder": "search",
+			"aria-label": (0, i18next.t)("search"),
+			"data-i18n-aria-label": "search"
 		},
 		[],
 		{ input: function(evt) {
@@ -16078,7 +16105,10 @@ function make_toolbar$2(gobj) {
 		{
 			class: "GCLASS_SEARCH input",
 			type: "text",
-			placeholder: (0, i18next.t)("search")
+			placeholder: (0, i18next.t)("search"),
+			"data-i18n-placeholder": "search",
+			"aria-label": (0, i18next.t)("search"),
+			"data-i18n-aria-label": "search"
 		},
 		[],
 		{ input: function(evt) {
@@ -20855,7 +20885,8 @@ function render_breadcrumb(gobj, items) {
 		"nav",
 		{
 			class: "breadcrumb is-small",
-			"aria-label": "breadcrumbs"
+			"aria-label": (0, i18next.t)("breadcrumbs"),
+			"data-i18n-aria-label": "breadcrumbs"
 		},
 		[[
 			"ul",
@@ -25087,12 +25118,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

@@ -2978,7 +2978,8 @@ function show_notification(shell, kind, message, opts) {
 		},
 		[["button", {
 			class: "TOAST_CLOSE delete",
-			"aria-label": "close"
+			"aria-label": t("close"),
+			"data-i18n-aria-label": "close"
 		}], [
 			"p",
 			{
@@ -3058,7 +3059,8 @@ function yui_shell_show_modal(shell, content, opts) {
 						{
 							class: "MODAL_BACK yui-dialog-back",
 							type: "button",
-							"aria-label": "back"
+							"aria-label": t("back"),
+							"data-i18n-aria-label": "back"
 						},
 						[["i", { class: "yi-arrow-left" }]]
 					],
@@ -3083,7 +3085,8 @@ function yui_shell_show_modal(shell, content, opts) {
 						{
 							class: "MODAL_CLOSE yui-dialog-x",
 							type: "button",
-							"aria-label": "close"
+							"aria-label": t("close"),
+							"data-i18n-aria-label": "close"
 						},
 						[["i", { class: "yi-xmark" }]]
 					]
@@ -3103,7 +3106,8 @@ function yui_shell_show_modal(shell, content, opts) {
 		]];
 		if (with_close) modal_children.push(["button", {
 			class: "MODAL_CLOSE modal-close is-large",
-			"aria-label": "close"
+			"aria-label": t("close"),
+			"data-i18n-aria-label": "close"
 		}]);
 	}
 	let logical = opts && opts.logical_class || "";
@@ -3256,7 +3260,8 @@ function build_dialog(shell, message, buttons, opts) {
 	]);
 	$card_children.push(["button", {
 		class: "CONFIRM_CLOSE delete yui-confirm-x",
-		"aria-label": "close"
+		"aria-label": t("close"),
+		"data-i18n-aria-label": "close"
 	}], [
 		"section",
 		{ class: "CONFIRM_BODY modal-card-body has-text-centered" },
@@ -3756,7 +3761,8 @@ function build_ui$17(gobj) {
 							{
 								class: "WINDOW_MIN yui-wc wc-min",
 								type: "button",
-								"aria-label": "minimize",
+								"aria-label": t("minimize"),
+								"data-i18n-aria-label": "minimize",
 								style: gobj_read_bool_attr(gobj, "showMin") && gobj_read_pointer_attr(gobj, "manager") ? "" : "display:none;"
 							},
 							WC_MIN,
@@ -3770,7 +3776,8 @@ function build_ui$17(gobj) {
 							{
 								class: "WINDOW_MAX yui-wc wc-max",
 								type: "button",
-								"aria-label": "maximize",
+								"aria-label": t("maximize"),
+								"data-i18n-aria-label": "maximize",
 								style: gobj_read_bool_attr(gobj, "showMax") ? "" : "display:none;"
 							},
 							WC_MAX,
@@ -3784,7 +3791,8 @@ function build_ui$17(gobj) {
 							{
 								class: "WINDOW_CLOSE yui-wc wc-close",
 								type: "button",
-								"aria-label": "close"
+								"aria-label": t("close"),
+								"data-i18n-aria-label": "close"
 							},
 							WC_CLOSE,
 							{ click: (evt) => {
@@ -4666,7 +4674,8 @@ function ac_register_window(gobj, event, kw, src) {
 				{
 					class: "yui-dock-close",
 					type: "button",
-					"aria-label": "close"
+					"aria-label": t("close"),
+					"data-i18n-aria-label": "close"
 				},
 				WC_X,
 				{ click: (evt) => {
@@ -4929,7 +4938,8 @@ function build_ui$16(gobj) {
 					"button",
 					{
 						class: "yui-pager-back button is-white is-hidden",
-						"aria-label": "back"
+						"aria-label": t("back"),
+						"data-i18n-aria-label": "back"
 					},
 					[[
 						"span",
@@ -4953,7 +4963,8 @@ function build_ui$16(gobj) {
 					"button",
 					{
 						class: "yui-pager-discard button is-white is-hidden",
-						"aria-label": "discard"
+						"aria-label": t("discard"),
+						"data-i18n-aria-label": "discard"
 					},
 					[[
 						"span",
@@ -5493,7 +5504,8 @@ function build_ui$15(gobj) {
 					"button",
 					{
 						class: "yui-wizard-back button",
-						"aria-label": "back"
+						"aria-label": t("back"),
+						"data-i18n-aria-label": "back"
 					},
 					[[
 						"span",
@@ -5515,7 +5527,8 @@ function build_ui$15(gobj) {
 					"button",
 					{
 						class: "yui-wizard-primary button is-link",
-						"aria-label": "next"
+						"aria-label": t("next"),
+						"data-i18n-aria-label": "next"
 					},
 					[[
 						"span",
@@ -6251,7 +6264,8 @@ function yui_file_control(gobj, { name, value, readonly, accept, on_pick }) {
 			type: "button",
 			class: "FILE_PICK button is-small",
 			"data-i18n-title": "choose a file",
-			"aria-label": "choose a file"
+			"aria-label": t("choose a file"),
+			"data-i18n-aria-label": "choose a file"
 		},
 		[["span", { class: "FILE_PICK_ICON yi-upload" }], [
 			"span",
@@ -6268,7 +6282,8 @@ function yui_file_control(gobj, { name, value, readonly, accept, on_pick }) {
 			type: "button",
 			class: "FILE_CLEAR button is-small",
 			"data-i18n-title": "remove the file",
-			"aria-label": "remove the file"
+			"aria-label": t("remove the file"),
+			"data-i18n-aria-label": "remove the file"
 		},
 		[["span", { class: "FILE_CLEAR_ICON yi-trash" }]]
 	]);
@@ -7388,9 +7403,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");
@@ -8357,7 +8378,10 @@ function create_coordinates(gobj, attrs) {
 				{
 					class: "input",
 					type: "text",
-					placeholder: t("coordinates") + "..."
+					placeholder: t("coordinates..."),
+					"data-i18n-placeholder": "coordinates...",
+					"aria-label": t("coordinates"),
+					"data-i18n-aria-label": "coordinates"
 				},
 				"",
 				{ "input": function(evt) {
@@ -13710,7 +13734,10 @@ function make_toolbar$4(gobj) {
 		{
 			class: "JSON_SEARCH input",
 			type: "text",
-			placeholder: t("search")
+			placeholder: t("search"),
+			"data-i18n-placeholder": "search",
+			"aria-label": t("search"),
+			"data-i18n-aria-label": "search"
 		},
 		[],
 		{ input: function(evt) {
@@ -16073,7 +16100,10 @@ function make_toolbar$2(gobj) {
 		{
 			class: "GCLASS_SEARCH input",
 			type: "text",
-			placeholder: t("search")
+			placeholder: t("search"),
+			"data-i18n-placeholder": "search",
+			"aria-label": t("search"),
+			"data-i18n-aria-label": "search"
 		},
 		[],
 		{ input: function(evt) {
@@ -20850,7 +20880,8 @@ function render_breadcrumb(gobj, items) {
 		"nav",
 		{
 			class: "breadcrumb is-small",
-			"aria-label": "breadcrumbs"
+			"aria-label": t("breadcrumbs"),
+			"data-i18n-aria-label": "breadcrumbs"
 		},
 		[[
 			"ul",
@@ -25082,12 +25113,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.129",
   "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)
@@ -1707,7 +1718,16 @@ function create_coordinates(gobj, attrs)
         ['div', {class: 'control has-icons-left'}, [
             [
                 'input',
-                {class: 'input', type: 'text', placeholder: t('coordinates') + '...'},
+                {class: 'input', type: 'text',
+                 /*  A placeholder is not a NAME: it disappears the moment
+                  *  something is typed, and a reader is not obliged to
+                  *  announce it. And the key must be whole -- a composed
+                  *  `t('coordinates') + '...'` cannot carry one, so it
+                  *  froze in the language it was built in.  */
+                 placeholder: t('coordinates...'),
+                 'data-i18n-placeholder': 'coordinates...',
+                 'aria-label': t('coordinates'),
+                 'data-i18n-aria-label': 'coordinates'},
                 '',
                 {
                     'input': function (evt) {

package/src/c_yui_gclass.js

@@ -305,7 +305,12 @@ function make_toolbar(gobj)
 {
     let $search_input = createElement2(
         ['input', {class: 'GCLASS_SEARCH input', type: 'text',
-                   placeholder: t("search")}, [], {
+                   placeholder: t("search"),
+                   'data-i18n-placeholder': "search",
+                   /*  A placeholder is not a name: it is gone as soon as
+                    *  something is typed.  */
+                   'aria-label': t("search"),
+                   'data-i18n-aria-label': "search"}, [], {
             input: function(evt) {
                 gobj_send_event(gobj, "EV_SEARCH", {text: evt.target.value}, gobj);
             }

package/src/c_yui_json.js

@@ -379,7 +379,12 @@ function make_toolbar(gobj)
      *  which re-fires EV_SEARCH with an empty term through the FSM.  */
     let $search_input = createElement2(
         ['input', {class: 'JSON_SEARCH input', type: 'text',
-                   placeholder: t("search")}, [], {
+                   placeholder: t("search"),
+                   'data-i18n-placeholder': "search",
+                   /*  A placeholder is not a name: it is gone as soon as
+                    *  something is typed.  */
+                   'aria-label': t("search"),
+                   'data-i18n-aria-label': "search"}, [], {
             input: function(evt) {
                 gobj_send_event(gobj, "EV_SEARCH", {text: evt.target.value}, gobj);
             }

package/src/c_yui_nav.js

@@ -495,7 +495,7 @@ function render_breadcrumb(gobj, items)
     }
 
     return createElement2(
-        ["nav", {class: "breadcrumb is-small", "aria-label": "breadcrumbs"},
+        ["nav", {class: "breadcrumb is-small", "aria-label": t("breadcrumbs"), "data-i18n-aria-label": "breadcrumbs"},
             [["ul", {}, lis]]]
     );
 }

package/src/c_yui_pager.js

@@ -148,7 +148,7 @@ function build_ui(gobj)
         ['div', {class: 'C_YUI_PAGER', style: 'height:100%; display:flex; flex-direction:column;'}, [
             ['div', {class: 'yui-pager-header is-flex is-align-items-center is-flex-grow-0',
                      style: 'gap:.25rem; padding:.25rem .25rem;'}, [
-                ['button', {class: 'yui-pager-back button is-white is-hidden', 'aria-label': 'back'}, [
+                ['button', {class: 'yui-pager-back button is-white is-hidden', 'aria-label': t('back'), 'data-i18n-aria-label': 'back'}, [
                     ['span', {class: 'icon'}, ['i', {class: 'yi-arrow-left'}]]
                 ], {
                     click: function(evt) {
@@ -157,7 +157,7 @@ function build_ui(gobj)
                     }
                 }],
                 ['span', {class: 'yui-pager-title is-flex-grow-1', style: 'font-weight:600;'}, ''],
-                ['button', {class: 'yui-pager-discard button is-white is-hidden', 'aria-label': 'discard'}, [
+                ['button', {class: 'yui-pager-discard button is-white is-hidden', 'aria-label': t('discard'), 'data-i18n-aria-label': 'discard'}, [
                     ['span', {class: 'icon'}, ['i', {class: 'yi-broom'}]],
                     ['span', {class: 'is-hidden-mobile', i18n: 'discard'}, 'discard']
                 ], {

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

package/src/c_yui_window.js

@@ -550,7 +550,7 @@ function build_ui(gobj)
                      *      Minimize (to dock)
                      *----------------------------*/
                     ['button', {
-                        class: 'WINDOW_MIN yui-wc wc-min', type: 'button', 'aria-label': 'minimize',
+                        class: 'WINDOW_MIN yui-wc wc-min', type: 'button', 'aria-label': t('minimize'), 'data-i18n-aria-label': 'minimize',
                         style: (gobj_read_bool_attr(gobj, "showMin") &&
                                 gobj_read_pointer_attr(gobj, "manager")) ? '' : 'display:none;',
                     }, WC_MIN, {
@@ -563,7 +563,7 @@ function build_ui(gobj)
                      *      Maximize / restore
                      *----------------------------*/
                     ['button', {
-                        class: 'WINDOW_MAX yui-wc wc-max', type: 'button', 'aria-label': 'maximize',
+                        class: 'WINDOW_MAX yui-wc wc-max', type: 'button', 'aria-label': t('maximize'), 'data-i18n-aria-label': 'maximize',
                         style: gobj_read_bool_attr(gobj, "showMax") ? '' : 'display:none;',
                     }, WC_MAX, {
                         click: (evt) => {
@@ -575,7 +575,7 @@ function build_ui(gobj)
                      *      Close
                      *----------------------------*/
                     ['button', {
-                        class: 'WINDOW_CLOSE yui-wc wc-close', type: 'button', 'aria-label': 'close',
+                        class: 'WINDOW_CLOSE yui-wc wc-close', type: 'button', 'aria-label': t('close'), 'data-i18n-aria-label': 'close',
                     }, WC_CLOSE, {
                         click: (evt) => {
                             evt.stopPropagation();

package/src/c_yui_window_manager.js

@@ -44,6 +44,8 @@ import {
     gobj_name,
 } from "@yuneta/gobj-js";
 
+import {t} from "i18next";
+
 
 /***************************************************************
  *              Constants
@@ -494,7 +496,7 @@ function ac_register_window(gobj, event, kw, src)
         ), [
             chip_lead(kw.icon),
             ['span', {class: 'yui-dock-label'}, label_items],
-            ['button', {class: 'yui-dock-close', type: 'button', 'aria-label': 'close'}, WC_X, {
+            ['button', {class: 'yui-dock-close', type: 'button', 'aria-label': t('close'), 'data-i18n-aria-label': 'close'}, WC_X, {
                 click: (evt) => {
                     evt.stopPropagation();
                     gobj_send_event(entry.gobj, "EV_CLOSE_WINDOW", {}, gobj);

package/src/c_yui_wizard.js

@@ -50,6 +50,8 @@ import {
     wizard_should_validate,
 } from "./wizard_helpers.js";
 
+import {t} from "i18next";
+
 
 /***************************************************************
  *              Constants
@@ -166,7 +168,7 @@ function build_ui(gobj)
             ],
             ['div', {class: 'yui-wizard-footer is-flex is-justify-content-space-between is-flex-grow-0',
                      style: 'gap:.5rem; padding:.5rem;'}, [
-                ['button', {class: 'yui-wizard-back button', 'aria-label': 'back'}, [
+                ['button', {class: 'yui-wizard-back button', 'aria-label': t('back'), 'data-i18n-aria-label': 'back'}, [
                     ['span', {class: 'icon'}, ['i', {class: 'yi-arrow-left'}]],
                     ['span', {class: 'is-hidden-mobile', i18n: 'back'}, 'back']
                 ], {
@@ -175,7 +177,7 @@ function build_ui(gobj)
                         gobj_send_event(gobj, "EV_PREV", {}, gobj);
                     }
                 }],
-                ['button', {class: 'yui-wizard-primary button is-link', 'aria-label': 'next'}, [
+                ['button', {class: 'yui-wizard-primary button is-link', 'aria-label': t('next'), 'data-i18n-aria-label': 'next'}, [
                     ['span', {class: 'yui-wizard-primary-label', i18n: 'next'}, 'next']
                 ], {
                     click: function(evt) {

package/src/shell_modals.js

@@ -35,6 +35,8 @@ import {
 } from "@yuneta/gobj-js";
 import {yui_tint} from "./bulma_tint.js";
 
+
+import {t} from "i18next";
 import {
     activate_focus_trap_on,
 } from "./shell_focus_trap.js";
@@ -125,7 +127,7 @@ function show_notification(shell, kind, message, opts)
         ["div", {class: `TOAST notification yui-notification ${yui_tint(kind)}`,
                  role: kind === "danger" ? "alert" : "status"},
             [
-                ["button", {class: "TOAST_CLOSE delete", "aria-label": "close"}],
+                ["button", {class: "TOAST_CLOSE delete", "aria-label": t("close"), "data-i18n-aria-label": "close"}],
                 ["p", {...p_attrs, class: "TOAST_MSG"}, message]
             ]
         ]
@@ -226,14 +228,14 @@ export function yui_shell_show_modal(shell, content, opts)
     let modal_children;
     if(dialog) {
         let header = ["div", {class: "MODAL_HEADER yui-dialog-header"}, [
-            ["button", {class: "MODAL_BACK yui-dialog-back", type: "button", "aria-label": "back"},
+            ["button", {class: "MODAL_BACK yui-dialog-back", type: "button", "aria-label": t("back"), "data-i18n-aria-label": "back"},
                 [["i", {class: "yi-arrow-left"}]]],
             ["span", {class: "MODAL_TITLE yui-dialog-title"},
                 (title_prefix ? [["span", {class: "MODAL_TITLE_PREFIX"}, title_prefix]] : [])
                     .concat(title
                         ? [["span", {class: "MODAL_TITLE_KIND", i18n: title}, title]]
                         : [])],
-            ["button", {class: "MODAL_CLOSE yui-dialog-x", type: "button", "aria-label": "close"},
+            ["button", {class: "MODAL_CLOSE yui-dialog-x", type: "button", "aria-label": t("close"), "data-i18n-aria-label": "close"},
                 [["i", {class: "yi-xmark"}]]],
         ]];
         let body = ["div", {class: "MODAL_BODY yui-dialog-body"}, inner ? [inner] : []];
@@ -253,7 +255,7 @@ export function yui_shell_show_modal(shell, content, opts)
         if(with_close) {
             modal_children.push(
                 ["button", {class: "MODAL_CLOSE modal-close is-large",
-                            "aria-label": "close"}]
+                            "aria-label": t("close"), "data-i18n-aria-label": "close"}]
             );
         }
     }
@@ -468,7 +470,7 @@ function build_dialog(shell, message, buttons, opts)
         );
     }
     $card_children.push(
-        ["button", {class: "CONFIRM_CLOSE delete yui-confirm-x", "aria-label": "close"}],
+        ["button", {class: "CONFIRM_CLOSE delete yui-confirm-x", "aria-label": t("close"), "data-i18n-aria-label": "close"}],
         ["section", {class: "CONFIRM_BODY modal-card-body has-text-centered"},
             $body_children],
         ["footer", {class: "CONFIRM_FOOT modal-card-foot"}, $footer_children]

package/src/yui_file_field.js

@@ -41,6 +41,8 @@ import {
 
 import "./yui_file_field.css";
 
+
+import {t} from "i18next";
 /*
  *  What the treedb's default ceiling accepts, as an `accept` attribute:
  *  a hint to the file dialog, never a check. The check is treedb's, on
@@ -261,7 +263,8 @@ function yui_file_control(gobj, {name, value, readonly, accept, on_pick})
         type: "button",
         class: "FILE_PICK button is-small",
         "data-i18n-title": "choose a file",
-        "aria-label": "choose a file"
+        "aria-label": t("choose a file"),
+        "data-i18n-aria-label": "choose a file"
     }, [
         ["span", {class: "FILE_PICK_ICON yi-upload"}],
         /*  The label stays: this control is alone in its row, so nothing
@@ -274,7 +277,8 @@ function yui_file_control(gobj, {name, value, readonly, accept, on_pick})
         type: "button",
         class: "FILE_CLEAR button is-small",
         "data-i18n-title": "remove the file",
-        "aria-label": "remove the file"
+        "aria-label": t("remove the file"),
+        "data-i18n-aria-label": "remove the file"
     }, [
         ["span", {class: "FILE_CLEAR_ICON yi-trash"}]
     ]]);