@dloizides/ui-forms 1.18.2 → 1.18.3

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

@@ -1413,6 +1413,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 +1442,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 +1458,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
         ] })
       ]
     }