@yuneta/gobj-ui 7.23.113 → 7.23.115

package/dist/gobj-ui.cjs.js

@@ -34979,7 +34979,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 +35158,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,7 +68242,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.
 ***************************************************************/
+/***************************************************************
+*  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($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` },
@@ -68465,7 +68500,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

@@ -34974,7 +34974,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 +35153,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,7 +68237,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.
 ***************************************************************/
+/***************************************************************
+*  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) {
+	name_control($control, label);
 	return [
 		"div",
 		{ class: `${logical} field mb-3` },
@@ -68460,7 +68495,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.113",
+  "version": "7.23.115",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_schema_editor.js

@@ -107,6 +107,7 @@ import {
     kw_get_str,
     kw_get_dict,
     is_object,
+    is_array,
     empty_string,
 } from "@yuneta/gobj-js";
 import {yui_tint} from "./bulma_tint.js";
@@ -1555,8 +1556,54 @@ 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 --
+     *  so it names it for the eye and for nothing else: no `for`, no
+     *  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.  */
+    name_control($control, label);
     return ["div", {class: `${logical} field mb-3`}, [
         ["label", {class: "label", i18n: label}, t(label)],
         ["div", {class: "control"}, [$control]],
@@ -1721,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")]