@dloizides/ui-forms 1.18.1 → 1.18.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 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.**
+
+Visual QA on kefi-web Site settings (360 and 1280) measured the switch at 40x20: react-native-web sizes the
+native input to the Switch root, and `hitSlop` is inert on web. The switch is now centred in a slot with
+`minWidth`/`minHeight` MIN_TOUCH_TARGET_PX inside the pressable row, so the row stays at least 44 tall even when a
+`containerStyle` overrides `minHeight`. The track and thumb are unchanged; the switch gains a few px of horizontal gutter.
+New testID: `<testID>-hitbox`.
+
 ## 1.17.0
 
 **Chips now have a 44px minimum touch target on web. `hitSlop` never did that — it is native-only.**

package/dist/index.js

@@ -1273,6 +1273,12 @@ var styles6 = reactNative.StyleSheet.create({
     // `hitSlop`, so a pointer target smaller than the floor cannot be widened any other way.
     minHeight: a11y.MIN_TOUCH_TARGET_PX
   },
+  switchSlot: {
+    minWidth: a11y.MIN_TOUCH_TARGET_PX,
+    minHeight: a11y.MIN_TOUCH_TARGET_PX,
+    alignItems: "center",
+    justifyContent: "center"
+  },
   textColumn: {
     flex: 1
   },
@@ -1326,7 +1332,7 @@ var FormSwitch = ({
             /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.label, themeStyles.label], children: label }),
             hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.description, themeStyles.description], children: description }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles6.switchSlot, testID: `${testID}-hitbox`, children: /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Switch,
             {
               accessibilityHint: accessibilityHint ?? label,
@@ -1407,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 };
@@ -1435,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",
@@ -1450,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
         ] })
       ]
     }