@yuneta/gobj-ui 7.23.114 → 7.23.116

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);
 		}
 	});
@@ -34979,7 +35004,7 @@ var reRgbaInteger = new RegExp(`^rgba\\(${reI},${reI},${reI},${reN}\\)$`);
 var reRgbaPercent = new RegExp(`^rgba\\(${reP},${reP},${reP},${reN}\\)$`);
 var reHslPercent = new RegExp(`^hsl\\(${reN},${reP},${reP}\\)$`);
 var reHslaPercent = new RegExp(`^hsla\\(${reN},${reP},${reP},${reN}\\)$`);
-var named = {
+var named$1 = {
 	aliceblue: 15792383,
 	antiquewhite: 16444375,
 	aqua: 65535,
@@ -35158,7 +35183,7 @@ function color_formatRgb() {
 function color(format) {
 	var m, l;
 	format = (format + "").trim().toLowerCase();
-	return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) : l === 3 ? new Rgb(m >> 8 & 15 | m >> 4 & 240, m >> 4 & 15 | m & 240, (m & 15) << 4 | m & 15, 1) : l === 8 ? rgba(m >> 24 & 255, m >> 16 & 255, m >> 8 & 255, (m & 255) / 255) : l === 4 ? rgba(m >> 12 & 15 | m >> 8 & 240, m >> 8 & 15 | m >> 4 & 240, m >> 4 & 15 | m & 240, ((m & 15) << 4 | m & 15) / 255) : null) : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) : named.hasOwnProperty(format) ? rgbn(named[format]) : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0) : null;
+	return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) : l === 3 ? new Rgb(m >> 8 & 15 | m >> 4 & 240, m >> 4 & 15 | m & 240, (m & 15) << 4 | m & 15, 1) : l === 8 ? rgba(m >> 24 & 255, m >> 16 & 255, m >> 8 & 255, (m & 255) / 255) : l === 4 ? rgba(m >> 12 & 15 | m >> 8 & 240, m >> 8 & 15 | m >> 4 & 240, m >> 4 & 15 | m & 240, ((m & 15) << 4 | m & 15) / 255) : null) : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) : named$1.hasOwnProperty(format) ? rgbn(named$1[format]) : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0) : null;
 }
 function rgbn(n) {
 	return new Rgb(n >> 16 & 255, n >> 8 & 255, n & 255, 1);
@@ -68242,15 +68267,42 @@ function open_dialog(gobj, $content, title, logical, title_prefix) {
 *  carries its name, so reading the form back is one query and
 *  a language change does not have to know the form exists.
 ***************************************************************/
-function field(logical, name, label, $control, help) {
-	if ((0, _yuneta_gobj_js.is_array)($control) && (0, _yuneta_gobj_js.is_object)($control[1]) && [
+/***************************************************************
+*  Put a NAME on the control of a field, from the label's key.
+*
+*  It DESCENDS: `select_input()` hands back Bulma's wrapper
+*  (`<div class="select"><select>`), so a check on the outer tag
+*  named the div -- which names nothing -- and every select of
+*  the two forms stayed anonymous while the inputs beside them
+*  were fixed. Measured on a deployed schema: `SELECT[type]` with
+*  no `aria-label` while `INPUT[header]` had one.
+*
+*  The first control found is the one named: a field has one, and
+*  where it has two (the hook's topic and column) they are named
+*  where they are built, because "hook" would not tell them apart.
+***************************************************************/
+function named($spec, label) {
+	name_control($spec, label);
+	return $spec;
+}
+function name_control($spec, label) {
+	if (!(0, _yuneta_gobj_js.is_array)($spec) || !(0, _yuneta_gobj_js.is_object)($spec[1])) return false;
+	if ([
 		"input",
 		"select",
 		"textarea"
-	].includes($control[0]) && !$control[1]["aria-label"]) {
-		$control[1]["aria-label"] = (0, i18next.t)(label);
-		$control[1]["data-i18n-aria-label"] = label;
+	].includes($spec[0])) {
+		if (!$spec[1]["aria-label"]) {
+			$spec[1]["aria-label"] = (0, i18next.t)(label);
+			$spec[1]["data-i18n-aria-label"] = label;
+		}
+		return true;
 	}
+	for (let child of $spec[2] || []) if (name_control(child, label)) return true;
+	return false;
+}
+function field(logical, name, label, $control, help) {
+	name_control($control, label);
 	return [
 		"div",
 		{ class: `${logical} field mb-3` },
@@ -68473,7 +68525,7 @@ function open_column_form(gobj, topic, col, prefill) {
 							class: "is-flex",
 							style: "gap:.4rem;"
 						},
-						[select_input("hook_topic", hook_topic, [""].concat(sibling_topics)), text_input("hook_col", hook_col, (0, i18next.t)("the fkey column of the child"))]
+						[named(select_input("hook_topic", hook_topic, [""].concat(sibling_topics)), "hook topic"), named(text_input("hook_col", hook_col, (0, i18next.t)("the fkey column of the child")), "hook column")]
 					],
 					[
 						"p",

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);
 		}
 	});
@@ -34974,7 +34999,7 @@ var reRgbaInteger = new RegExp(`^rgba\\(${reI},${reI},${reI},${reN}\\)$`);
 var reRgbaPercent = new RegExp(`^rgba\\(${reP},${reP},${reP},${reN}\\)$`);
 var reHslPercent = new RegExp(`^hsl\\(${reN},${reP},${reP}\\)$`);
 var reHslaPercent = new RegExp(`^hsla\\(${reN},${reP},${reP},${reN}\\)$`);
-var named = {
+var named$1 = {
 	aliceblue: 15792383,
 	antiquewhite: 16444375,
 	aqua: 65535,
@@ -35153,7 +35178,7 @@ function color_formatRgb() {
 function color(format) {
 	var m, l;
 	format = (format + "").trim().toLowerCase();
-	return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) : l === 3 ? new Rgb(m >> 8 & 15 | m >> 4 & 240, m >> 4 & 15 | m & 240, (m & 15) << 4 | m & 15, 1) : l === 8 ? rgba(m >> 24 & 255, m >> 16 & 255, m >> 8 & 255, (m & 255) / 255) : l === 4 ? rgba(m >> 12 & 15 | m >> 8 & 240, m >> 8 & 15 | m >> 4 & 240, m >> 4 & 15 | m & 240, ((m & 15) << 4 | m & 15) / 255) : null) : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) : named.hasOwnProperty(format) ? rgbn(named[format]) : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0) : null;
+	return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) : l === 3 ? new Rgb(m >> 8 & 15 | m >> 4 & 240, m >> 4 & 15 | m & 240, (m & 15) << 4 | m & 15, 1) : l === 8 ? rgba(m >> 24 & 255, m >> 16 & 255, m >> 8 & 255, (m & 255) / 255) : l === 4 ? rgba(m >> 12 & 15 | m >> 8 & 240, m >> 8 & 15 | m >> 4 & 240, m >> 4 & 15 | m & 240, ((m & 15) << 4 | m & 15) / 255) : null) : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) : named$1.hasOwnProperty(format) ? rgbn(named$1[format]) : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0) : null;
 }
 function rgbn(n) {
 	return new Rgb(n >> 16 & 255, n >> 8 & 255, n & 255, 1);
@@ -68237,15 +68262,42 @@ function open_dialog(gobj, $content, title, logical, title_prefix) {
 *  carries its name, so reading the form back is one query and
 *  a language change does not have to know the form exists.
 ***************************************************************/
-function field(logical, name, label, $control, help) {
-	if (is_array($control) && is_object($control[1]) && [
+/***************************************************************
+*  Put a NAME on the control of a field, from the label's key.
+*
+*  It DESCENDS: `select_input()` hands back Bulma's wrapper
+*  (`<div class="select"><select>`), so a check on the outer tag
+*  named the div -- which names nothing -- and every select of
+*  the two forms stayed anonymous while the inputs beside them
+*  were fixed. Measured on a deployed schema: `SELECT[type]` with
+*  no `aria-label` while `INPUT[header]` had one.
+*
+*  The first control found is the one named: a field has one, and
+*  where it has two (the hook's topic and column) they are named
+*  where they are built, because "hook" would not tell them apart.
+***************************************************************/
+function named($spec, label) {
+	name_control($spec, label);
+	return $spec;
+}
+function name_control($spec, label) {
+	if (!is_array($spec) || !is_object($spec[1])) return false;
+	if ([
 		"input",
 		"select",
 		"textarea"
-	].includes($control[0]) && !$control[1]["aria-label"]) {
-		$control[1]["aria-label"] = t(label);
-		$control[1]["data-i18n-aria-label"] = label;
+	].includes($spec[0])) {
+		if (!$spec[1]["aria-label"]) {
+			$spec[1]["aria-label"] = t(label);
+			$spec[1]["data-i18n-aria-label"] = label;
+		}
+		return true;
 	}
+	for (let child of $spec[2] || []) if (name_control(child, label)) return true;
+	return false;
+}
+function field(logical, name, label, $control, help) {
+	name_control($control, label);
 	return [
 		"div",
 		{ class: `${logical} field mb-3` },
@@ -68468,7 +68520,7 @@ function open_column_form(gobj, topic, col, prefill) {
 							class: "is-flex",
 							style: "gap:.4rem;"
 						},
-						[select_input("hook_topic", hook_topic, [""].concat(sibling_topics)), text_input("hook_col", hook_col, t("the fkey column of the child"))]
+						[named(select_input("hook_topic", hook_topic, [""].concat(sibling_topics)), "hook topic"), named(text_input("hook_col", hook_col, t("the fkey column of the child")), "hook column")]
 					],
 					[
 						"p",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.114",
+  "version": "7.23.116",
   "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_schema_editor.js

@@ -1556,6 +1556,46 @@ function open_dialog(gobj, $content, title, logical, title_prefix)
  *  carries its name, so reading the form back is one query and
  *  a language change does not have to know the form exists.
  ***************************************************************/
+/***************************************************************
+ *  Put a NAME on the control of a field, from the label's key.
+ *
+ *  It DESCENDS: `select_input()` hands back Bulma's wrapper
+ *  (`<div class="select"><select>`), so a check on the outer tag
+ *  named the div -- which names nothing -- and every select of
+ *  the two forms stayed anonymous while the inputs beside them
+ *  were fixed. Measured on a deployed schema: `SELECT[type]` with
+ *  no `aria-label` while `INPUT[header]` had one.
+ *
+ *  The first control found is the one named: a field has one, and
+ *  where it has two (the hook's topic and column) they are named
+ *  where they are built, because "hook" would not tell them apart.
+ ***************************************************************/
+function named($spec, label)
+{
+    name_control($spec, label);
+    return $spec;
+}
+
+function name_control($spec, label)
+{
+    if(!is_array($spec) || !is_object($spec[1])) {
+        return false;
+    }
+    if(["input", "select", "textarea"].includes($spec[0])) {
+        if(!$spec[1]["aria-label"]) {
+            $spec[1]["aria-label"] = t(label);
+            $spec[1]["data-i18n-aria-label"] = label;
+        }
+        return true;
+    }
+    for(let child of ($spec[2] || [])) {
+        if(name_control(child, label)) {
+            return true;
+        }
+    }
+    return false;
+}
+
 function field(logical, name, label, $control, help)
 {
     /*  The label is a SIBLING of the control -- Bulma's `field` shape --
@@ -1563,12 +1603,7 @@ function field(logical, name, label, $control, help)
      *  wrapping, and a reader announces the box as unlabelled. The name
      *  is put on the control itself, from the label's own key, so the
      *  two cannot drift and a language change reaches both.  */
-    if(is_array($control) && is_object($control[1]) &&
-            ["input", "select", "textarea"].includes($control[0]) &&
-            !$control[1]["aria-label"]) {
-        $control[1]["aria-label"] = t(label);
-        $control[1]["data-i18n-aria-label"] = label;
-    }
+    name_control($control, label);
     return ["div", {class: `${logical} field mb-3`}, [
         ["label", {class: "label", i18n: label}, t(label)],
         ["div", {class: "control"}, [$control]],
@@ -1733,9 +1768,13 @@ function open_column_form(gobj, topic, col, prefill)
             ]],
             ["div", {class: "SCHEMA_COL_FORM_HOOK field mb-3"}, [
                 ["label", {class: "label", i18n: "hook"}, t("hook")],
+                /*  TWO controls in one field, so each says which half it
+                 *  is: `hook` alone would name them both the same.  */
                 ["div", {class: "is-flex", style: "gap:.4rem;"}, [
-                    select_input("hook_topic", hook_topic, [""].concat(sibling_topics)),
-                    text_input("hook_col", hook_col, t("the fkey column of the child"))
+                    named(select_input("hook_topic", hook_topic,
+                                       [""].concat(sibling_topics)), "hook topic"),
+                    named(text_input("hook_col", hook_col,
+                                     t("the fkey column of the child")), "hook column")
                 ]],
                 ["p", {class: "help", i18n: "a hook names the child topic and the column of the child that points back"},
                     t("a hook names the child topic and the column of the child that points back")]