@jsswift/ui 1.0.49 → 1.0.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsswift/ui",
-  "version": "1.0.49",
+  "version": "1.0.51",
   "description": "JSswift UI layer built on top of @jsswift/core",
   "license": "MIT",
   "repository": {
@@ -38,6 +38,6 @@
     "src"
   ],
   "peerDependencies": {
-    "@jsswift/core": "^1.0.49"
+    "@jsswift/core": "^1.0.51"
   }
 }

package/src/10-primitives-layout.js

@@ -1092,6 +1092,7 @@
   // props: { model: rod OR [get,set] signal OR plain, placeholder, type }
 
 
+  let uiFieldMessageId = 0;
   UI.FormField = (props = {}) => {
 
     applyCommonProps(props);
@@ -1224,6 +1225,14 @@
       return true;
     };
     let messageEl = null;
+    const messageId = `jsswift-field-message-${++uiFieldMessageId}`;
+    const syncDescription = () => {
+      if (!controlEl?.setAttribute) return;
+      const ids = [uiUnwrap(props.ariaDescribedBy), messageEl?.id].filter(Boolean).join(" ").trim();
+      if (ids) controlEl.setAttribute("aria-describedby", [...new Set(ids.split(/\s+/))].join(" "));
+      else controlEl.removeAttribute("aria-describedby");
+    };
+    wrap._syncDescription = syncDescription;
     const renderMessage = () => {
       const statusOrder = [
         { key: "error", value: resolveValue(props.error), slot: "errorMessage", className: "cms-error" },
@@ -1251,7 +1260,7 @@
         ? renderSlotToArray(slots, active.slot, ctx, active.value)
         : [];
       const nextEl = nodes.length
-        ? _.div({ class: active?.className }, ...nodes)
+        ? _.div({ id: messageId, class: active?.className }, ...nodes)
         : null;
 
       const stateKeys = ["error", "warning", "success", "note"];
@@ -1264,6 +1273,7 @@
         wrap.appendChild(nextEl);
       }
       messageEl = nextEl;
+      syncDescription();
     };
 
     // state updater
@@ -1416,7 +1426,7 @@
       const label = uiUnwrap(props.ariaLabel) ?? (typeof props.label === "string" ? props.label : null);
       set("aria-label", label);
       set("aria-labelledby", uiUnwrap(props.ariaLabelledBy));
-      set("aria-describedby", uiUnwrap(props.ariaDescribedBy));
+      field._syncDescription?.();
       const invalid = props.ariaInvalid == null ? !!uiUnwrap(props.error) : !!uiUnwrap(props.ariaInvalid);
       control.setAttribute("aria-invalid", String(invalid));
       const required = !!uiUnwrap(props.required);