@jsswift/ui 1.0.48 → 1.0.50

package/dist/ui.js

@@ -2228,6 +2228,7 @@ const unitCover = (v, name = 'size') => {
   // props: { model: rod OR [get,set] signal OR plain, placeholder, type }
 
 
+  let uiFieldMessageId = 0;
   UI.FormField = (props = {}) => {
 
     applyCommonProps(props);
@@ -2360,6 +2361,14 @@ const unitCover = (v, name = 'size') => {
       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" },
@@ -2387,7 +2396,7 @@ const unitCover = (v, name = 'size') => {
         ? 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"];
@@ -2400,6 +2409,7 @@ const unitCover = (v, name = 'size') => {
         wrap.appendChild(nextEl);
       }
       messageEl = nextEl;
+      syncDescription();
     };
 
     // state updater
@@ -2541,6 +2551,30 @@ const unitCover = (v, name = 'size') => {
     return el;
   };
 
+  // Public field attributes belong to the interactive control, not its wrapper.
+  function uiConfigureFieldControl(field, control, props, native = false) {
+    field.focus = (options) => control.focus(options);
+    const set = (name, value) => {
+      if (value == null || value === false) control.removeAttribute(name);
+      else control.setAttribute(name, String(value));
+    };
+    JSswift.reactive.effect(() => {
+      const label = uiUnwrap(props.ariaLabel) ?? (typeof props.label === "string" ? props.label : null);
+      set("aria-label", label);
+      set("aria-labelledby", uiUnwrap(props.ariaLabelledBy));
+      field._syncDescription?.();
+      const invalid = props.ariaInvalid == null ? !!uiUnwrap(props.error) : !!uiUnwrap(props.ariaInvalid);
+      control.setAttribute("aria-invalid", String(invalid));
+      const required = !!uiUnwrap(props.required);
+      control.setAttribute("aria-required", String(required));
+      if (native) {
+        control.required = required;
+        for (const name of ["min", "max", "step", "pattern", "minLength", "maxLength"])
+          set(name.toLowerCase(), uiUnwrap(props[name]));
+      }
+    }, "UI.Field:controlAttributes");
+  }
+
   UI.Input = (props = {}) => {
     const slots = props.slots || {};
     const fieldProps = {
@@ -2702,6 +2736,7 @@ const unitCover = (v, name = 'size') => {
 
     // expose reference
     field._input = input;
+    uiConfigureFieldControl(field, input, props, true);
     uiRegisterShortcode(input, props, {
       isEnabled: () => !input.disabled,
       action: () => uiFocusShortcutTarget(input, { selectText: !!props.selectOnShortcode })
@@ -4099,6 +4134,7 @@ const unitCover = (v, name = 'size') => {
     // refresh has-value when value changes
     JSswift.reactive.effect(() => { field._refresh?.(); }, "UI.Select:fieldRefresh");
 
+    uiConfigureFieldControl(field, root, props);
     field._select = root;
     field._dispose = root._dispose;
     JSswift._registerCleanup?.(field, field._dispose);