@dloizides/ui-forms 1.18.2 → 1.18.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.18.3
+
+**FormCheckbox: the hint/description is now announced by screen readers.**
+
+The hint Text gets a stable per-instance id (`useFieldIds().hintId`, as `Field` does) and the role=checkbox
+Pressable sets `aria-describedby` to it when a hint is present; with no hint the attribute is omitted.
+
 ## 1.18.2
 
 **FormSwitch: the switch now sits in a 44x44 (MIN_TOUCH_TARGET_PX) pressable slot on web.**

package/dist/index.js

@@ -871,8 +871,11 @@ function RecentInputField({
   );
   const handleBlur = React2.useCallback(
     (event) => {
-      if (latestText.current.trim() !== "") remember(latestText.current);
-      setTimeout(() => setIsOpen(false), CLOSE_DELAY_MS);
+      const blurredText = latestText.current;
+      setTimeout(() => {
+        setIsOpen(false);
+        if (blurredText.trim() !== "") remember(blurredText);
+      }, CLOSE_DELAY_MS);
       onBlur?.(event);
     },
     [remember, onBlur]
@@ -1413,6 +1416,7 @@ var FormCheckbox = ({
   const brand = palette.primary["500"];
   const hintText = typeof hint === "string" && hint !== "" ? hint : description;
   const hasHint = typeof hintText === "string" && hintText !== "";
+  const { hintId } = useFieldIds();
   const themeStyles = React2__default.default.useMemo(() => {
     const boxOn = { backgroundColor: brand, borderColor: brand };
     const boxOff = { backgroundColor: "transparent", borderColor: colors.border };
@@ -1441,6 +1445,7 @@ var FormCheckbox = ({
       accessibilityRole: "checkbox",
       accessibilityState: { checked: value, disabled },
       "aria-checked": value,
+      "aria-describedby": hasHint ? hintId : void 0,
       disabled,
       onPress: toggle,
       role: "checkbox",
@@ -1456,7 +1461,7 @@ var FormCheckbox = ({
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles7.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
         /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.textColumn, children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.label, themeStyles.label], children: label }),
-          hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.hint, themeStyles.hint], children: hintText }) : null
+          hasHint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: hintId, style: [styles7.hint, themeStyles.hint], children: hintText }) : null
         ] })
       ]
     }