@yuneta/gobj-ui 7.23.115 → 7.23.117

package/dist/gobj-ui.cjs.js

@@ -7219,6 +7219,30 @@ function destroy_ui$10(gobj) {
 /******************************************************************
 *   Build form with bulma and createElement2
 ******************************************************************/
+/************************************************************
+*  Put the field's NAME on its control.
+*
+*  The label of a field is written `<label for={name}>` -- and
+*  `for` matches an **id**, which no control here sets: they
+*  carry `name`. So the association reads right in the source
+*  and does not exist in the document, and every field of every
+*  form of this library was unlabelled for anything that is not
+*  an eye.
+*
+*  `aria-label` and not an `id`: two forms can be open at once
+*  (a record in a window and another in a modal), and duplicate
+*  ids would break the association for both. The key is the
+*  label's own, so a language change reaches it.
+************************************************************/
+function name_form_control($field, conf) {
+	if (!$field || typeof $field.querySelector !== "function" || !conf) return;
+	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);
+}
 function build_form(gobj) {
 	let form_id = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "form_id");
 	let $form = (0, _yuneta_gobj_js.createElement2)(["form", {
@@ -7255,6 +7279,7 @@ function build_html_form(gobj, $form, prefix, template) {
 		if (placeholders[key]) html_field_conf.placeholder = placeholders[key];
 		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);
 			$form.appendChild($field);
 		}
 	});
@@ -62697,6 +62722,14 @@ function make_toolbar(gobj) {
 	let priv = gobj.priv;
 	let modes = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "operation_modes");
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "readonly")) modes = modes.filter((mode) => mode !== "edition");
+	let mode_options = modes.map((item) => [
+		"option",
+		{
+			value: item,
+			"data-i18n": item
+		},
+		option_label(item)
+	]);
 	let left_items = [
 		[
 			"span",
@@ -62710,7 +62743,13 @@ function make_toolbar(gobj) {
 		[
 			"div",
 			{ class: "select" },
-			[["select", { class: "GRAPH_LAYOUT_SELECT" }]],
+			[["select", {
+				class: "GRAPH_LAYOUT_SELECT",
+				title: (0, i18next.t)("layout"),
+				"data-i18n-title": "layout",
+				"aria-label": (0, i18next.t)("layout"),
+				"data-i18n-aria-label": "layout"
+			}]],
 			{ change: (evt) => {
 				evt.stopPropagation();
 				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_LAYOUT", { layout: evt.target.value }, gobj);
@@ -62730,15 +62769,14 @@ function make_toolbar(gobj) {
 			{ class: "select" },
 			[[
 				"select",
-				{ class: "GRAPH_MODE_SELECT" },
-				modes.map((item) => [
-					"option",
-					{
-						value: item,
-						"data-i18n": item
-					},
-					option_label(item)
-				])
+				{
+					class: "GRAPH_MODE_SELECT",
+					title: (0, i18next.t)("operation mode"),
+					"data-i18n-title": "operation mode",
+					"aria-label": (0, i18next.t)("operation mode"),
+					"data-i18n-aria-label": "operation mode"
+				},
+				mode_options
 			]],
 			{ change: (evt) => {
 				evt.stopPropagation();

package/dist/gobj-ui.es.js

@@ -7214,6 +7214,30 @@ function destroy_ui$10(gobj) {
 /******************************************************************
 *   Build form with bulma and createElement2
 ******************************************************************/
+/************************************************************
+*  Put the field's NAME on its control.
+*
+*  The label of a field is written `<label for={name}>` -- and
+*  `for` matches an **id**, which no control here sets: they
+*  carry `name`. So the association reads right in the source
+*  and does not exist in the document, and every field of every
+*  form of this library was unlabelled for anything that is not
+*  an eye.
+*
+*  `aria-label` and not an `id`: two forms can be open at once
+*  (a record in a window and another in a modal), and duplicate
+*  ids would break the association for both. The key is the
+*  label's own, so a language change reaches it.
+************************************************************/
+function name_form_control($field, conf) {
+	if (!$field || typeof $field.querySelector !== "function" || !conf) return;
+	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);
+}
 function build_form(gobj) {
 	let form_id = gobj_read_str_attr(gobj, "form_id");
 	let $form = createElement2(["form", {
@@ -7250,6 +7274,7 @@ function build_html_form(gobj, $form, prefix, template) {
 		if (placeholders[key]) html_field_conf.placeholder = placeholders[key];
 		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);
 			$form.appendChild($field);
 		}
 	});
@@ -62692,6 +62717,14 @@ function make_toolbar(gobj) {
 	let priv = gobj.priv;
 	let modes = gobj_read_attr(gobj, "operation_modes");
 	if (gobj_read_bool_attr(gobj, "readonly")) modes = modes.filter((mode) => mode !== "edition");
+	let mode_options = modes.map((item) => [
+		"option",
+		{
+			value: item,
+			"data-i18n": item
+		},
+		option_label(item)
+	]);
 	let left_items = [
 		[
 			"span",
@@ -62705,7 +62738,13 @@ function make_toolbar(gobj) {
 		[
 			"div",
 			{ class: "select" },
-			[["select", { class: "GRAPH_LAYOUT_SELECT" }]],
+			[["select", {
+				class: "GRAPH_LAYOUT_SELECT",
+				title: t("layout"),
+				"data-i18n-title": "layout",
+				"aria-label": t("layout"),
+				"data-i18n-aria-label": "layout"
+			}]],
 			{ change: (evt) => {
 				evt.stopPropagation();
 				gobj_send_event(gobj, "EV_SET_LAYOUT", { layout: evt.target.value }, gobj);
@@ -62725,15 +62764,14 @@ function make_toolbar(gobj) {
 			{ class: "select" },
 			[[
 				"select",
-				{ class: "GRAPH_MODE_SELECT" },
-				modes.map((item) => [
-					"option",
-					{
-						value: item,
-						"data-i18n": item
-					},
-					option_label(item)
-				])
+				{
+					class: "GRAPH_MODE_SELECT",
+					title: t("operation mode"),
+					"data-i18n-title": "operation mode",
+					"aria-label": t("operation mode"),
+					"data-i18n-aria-label": "operation mode"
+				},
+				mode_options
 			]],
 			{ change: (evt) => {
 				evt.stopPropagation();

package/package.json

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

package/src/c_yui_form.js

@@ -490,6 +490,38 @@ function destroy_ui(gobj)
 /******************************************************************
  *   Build form with bulma and createElement2
  ******************************************************************/
+/************************************************************
+ *  Put the field's NAME on its control.
+ *
+ *  The label of a field is written `<label for={name}>` -- and
+ *  `for` matches an **id**, which no control here sets: they
+ *  carry `name`. So the association reads right in the source
+ *  and does not exist in the document, and every field of every
+ *  form of this library was unlabelled for anything that is not
+ *  an eye.
+ *
+ *  `aria-label` and not an `id`: two forms can be open at once
+ *  (a record in a window and another in a modal), and duplicate
+ *  ids would break the association for both. The key is the
+ *  label's own, so a language change reaches it.
+ ************************************************************/
+function name_form_control($field, conf)
+{
+    if(!$field || typeof $field.querySelector !== "function" || !conf) {
+        return;
+    }
+    let key = conf.label_i18n || conf.label || "";
+    if(!key) {
+        return;     /*  a field with no label names nothing  */
+    }
+    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);
+}
+
 function build_form(gobj)
 {
     let form_id = gobj_read_str_attr(gobj, "form_id");
@@ -566,6 +598,7 @@ function build_html_form(gobj, $form, prefix, template)
          */
         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);
             $form.appendChild($field);
         }
     });

package/src/c_yui_treedb_graph.js

@@ -699,9 +699,17 @@ function make_toolbar(gobj)
      *  via populate_nodes_tree_options()
      */
     let left_items = [
+        /*  The rótulo beside a select is a SPAN: it names it for the eye
+         *  and for nothing else -- and it is `is-hidden-mobile`, so on a
+         *  phone even the eye loses it and the control says only its
+         *  current value. The name goes on the select, and a `title`
+         *  with it, which is what carries the meaning where the label
+         *  is gone.  */
         ['span', {class: 'GRAPH_LAYOUT_LABEL is-hidden-mobile', style: 'padding-right:5px;', i18n: 'layout'}, 'layout'],
         ['div', {class: 'select'}, [
-            ['select', {class: 'GRAPH_LAYOUT_SELECT'}]
+            ['select', {class: 'GRAPH_LAYOUT_SELECT',
+                        title: t('layout'), 'data-i18n-title': 'layout',
+                        'aria-label': t('layout'), 'data-i18n-aria-label': 'layout'}]
         ], {
             change: (evt) => {
                 evt.stopPropagation();
@@ -711,7 +719,10 @@ function make_toolbar(gobj)
 
         ['span', {class: 'GRAPH_MODE_LABEL is-hidden-mobile', style: 'padding-left:10px; padding-right:5px;', i18n: 'operation mode'}, 'operation mode'],
         ['div', {class: 'select'}, [
-            ['select', {class: 'GRAPH_MODE_SELECT'}, mode_options]
+            ['select', {class: 'GRAPH_MODE_SELECT',
+                        title: t('operation mode'), 'data-i18n-title': 'operation mode',
+                        'aria-label': t('operation mode'),
+                        'data-i18n-aria-label': 'operation mode'}, mode_options]
         ], {
             change: (evt) => {
                 evt.stopPropagation();