@abihealth/goapp-react-native 1.45.0 → 1.45.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.45.1](https://github.com/abiglobalhealth/react-native-sdk/compare/goapp-react-native-v1.45.0...goapp-react-native-v1.45.1) (2025-10-22)
+
+
+### Bug Fixes
+
+* ABI-10439 sdk accessibility error messages are not announced ([#252](https://github.com/abiglobalhealth/react-native-sdk/issues/252)) ([6b68c48](https://github.com/abiglobalhealth/react-native-sdk/commit/6b68c48f1f2c96a48d005ca481cc859cc10ad36b))
+
 ## [1.45.0](https://github.com/abiglobalhealth/react-native-sdk/compare/goapp-react-native-v1.44.0...goapp-react-native-v1.45.0) (2025-10-16)
 
 

package/dist/common/components/Input.js

@@ -29,8 +29,17 @@ var Input = function (_a) {
     var theme = (0, useTheme_1.useTheme)();
     var Input = (0, useCustomComponents_1.useCustomComponents)().Input;
     var styles = getStyles(theme);
-    var _b = (0, useForm_1.useForm)(), errors = _b.errors, data = _b.data, clearError = _b.clearError, updateData = _b.updateData, loading = _b.loading;
+    var _b = (0, useForm_1.useForm)(), errors = _b.errors, data = _b.data, clearError = _b.clearError, updateData = _b.updateData, loading = _b.loading, registerInput = _b.registerInput;
     var _c = (0, react_1.useState)(false), focused = _c[0], setFocused = _c[1];
+    var inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (id && registerInput && inputRef.current)
+            registerInput(id, inputRef.current);
+        return function () {
+            if (id && registerInput)
+                registerInput(id, null);
+        };
+    }, [id, registerInput]);
     var onFocus = function (e) {
         var _a;
         setFocused(true);
@@ -53,7 +62,7 @@ var Input = function (_a) {
     var placeholderColor = (Input === null || Input === void 0 ? void 0 : Input.placeholderTextColor) || theme.palette.grey.base;
     return (<FormControl_1.default label={label} error={err} name={id}>
       <react_native_1.View style={{ position: 'relative' }}>
-        <react_native_1.TextInput {...props} id={id} style={[styles.input, focused && styles.focused, err && styles.error, props.style, Input === null || Input === void 0 ? void 0 : Input.containerStyle]} onFocus={onFocus} onBlur={onBlur} placeholderTextColor={placeholderColor} value={formValue || props.value} onChangeText={onChangeText} editable={!loading} accessibilityLabel={label ? "".concat(label, " input text field") : 'Input text field'} accessibilityLabelledBy={id} accessibilityState={{ busy: loading, disabled: loading }}/>
+        <react_native_1.TextInput {...props} ref={inputRef} id={id} style={[styles.input, focused && styles.focused, err && styles.error, props.style, Input === null || Input === void 0 ? void 0 : Input.containerStyle]} onFocus={onFocus} onBlur={onBlur} placeholderTextColor={placeholderColor} value={formValue || props.value} onChangeText={onChangeText} editable={!loading} accessibilityLabel={label ? "".concat(label, " input text field") : 'Input text field'} accessibilityLabelledBy={id} accessibilityState={{ busy: loading, disabled: loading }}/>
 
         {props.multiline && !!minLength && (!formValue || (formValue === null || formValue === void 0 ? void 0 : formValue.length) < minLength) && (<react_native_1.View style={styles.hintContainer}>
             <Text_1.Text color={placeholderColor}>{t('inputs.textarea.min_length', { minLength: minLength })}</Text_1.Text>

package/dist/common/contexts/FormContext.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import React, { Dispatch, MutableRefObject, PropsWithChildren, SetStateAction } from 'react';
+import { TextInput } from 'react-native';
 import { z } from 'zod';
 export type HandleSubmitProps<T extends z.AnyZodObject> = {
     onSuccess?: (data: z.TypeOf<T>) => Promise<void>;
@@ -7,14 +8,16 @@ export type HandleSubmitProps<T extends z.AnyZodObject> = {
 };
 export type FormContextProps<T extends z.AnyZodObject> = {
     data: z.infer<T> | null;
-    setData: React.Dispatch<React.SetStateAction<z.infer<T> | null>>;
+    setData: Dispatch<SetStateAction<z.infer<T> | null>>;
     errors: Record<keyof z.infer<T>, string> | null;
-    setErrors: React.Dispatch<React.SetStateAction<Record<keyof z.infer<T>, string> | null>>;
+    setErrors: Dispatch<SetStateAction<Record<keyof z.infer<T>, string> | null>>;
     schema: T;
     onSubmit?: HandleSubmitProps<T>;
     loading: boolean;
-    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+    setLoading: Dispatch<SetStateAction<boolean>>;
     loadingForm?: boolean;
+    inputRefs: MutableRefObject<Map<string, TextInput | null>>;
+    registerInput: (id: string, ref: TextInput | null) => void;
 };
 export declare const FormContext: React.Context<FormContextProps<any>>;
 type FormProviderProps<T extends z.AnyZodObject> = {

package/dist/common/contexts/FormContext.js

@@ -44,14 +44,22 @@ exports.FormContext = (0, react_1.createContext)({
     schema: zod_1.z.object({}),
     loading: false,
     setLoading: function () { },
-    loadingForm: false
+    loadingForm: false,
+    inputRefs: { current: new Map() },
+    registerInput: function () { }
 });
 var FormProvider = function (_a) {
     var children = _a.children, schema = _a.schema, initialValues = _a.initialValues, onSubmit = _a.onSubmit, loadingForm = _a.loadingForm;
     var _b = (0, react_1.useState)(false), loading = _b[0], setLoading = _b[1];
     var _c = (0, react_1.useState)(initialValues || null), data = _c[0], setData = _c[1];
     var _d = (0, react_1.useState)(null), errors = _d[0], setErrors = _d[1];
-    return (<exports.FormContext.Provider value={{ data: data, setData: setData, errors: errors, setErrors: setErrors, schema: schema, onSubmit: onSubmit, loading: loading, setLoading: setLoading, loadingForm: loadingForm }}>
+    var inputRefs = (0, react_1.useRef)(new Map());
+    var registerInput = (0, react_1.useCallback)(function (id, ref) {
+        if (ref)
+            return inputRefs.current.set(id, ref);
+        inputRefs.current.delete(id);
+    }, []);
+    return (<exports.FormContext.Provider value={{ data: data, setData: setData, errors: errors, setErrors: setErrors, schema: schema, onSubmit: onSubmit, loading: loading, setLoading: setLoading, loadingForm: loadingForm, inputRefs: inputRefs, registerInput: registerInput }}>
       {children}
     </exports.FormContext.Provider>);
 };

package/dist/common/hooks/useForm.d.ts

@@ -7,4 +7,5 @@ export declare const useForm: <T extends z.AnyZodObject>() => {
     handleSubmit: () => Promise<void>;
     loading: boolean;
     setLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    registerInput: (id: string, ref: import("react-native").TextInput | null) => void;
 };

package/dist/common/hooks/useForm.js

@@ -51,6 +51,7 @@ exports.useForm = void 0;
 var FormContext_1 = require("../contexts/FormContext");
 var zod_1 = require("../utils/zod");
 var react_1 = require("react");
+var react_native_1 = require("react-native");
 var useForm = function () {
     var context = (0, react_1.useContext)(FormContext_1.FormContext);
     var data = context.data, setData = context.setData, errors = context.errors, setErrors = context.setErrors, schema = context.schema, onSubmit = context.onSubmit, loading = context.loading, setLoading = context.setLoading, loadingForm = context.loadingForm;
@@ -67,27 +68,38 @@ var useForm = function () {
         });
     };
     var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var error_1, parsedErrors;
-        var _a, _b, _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
+        var error_1, parsedErrors_1, currentRefs, firstErrorField_1, inputRef_1;
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
                 case 0:
-                    _d.trys.push([0, 2, 4, 6]);
+                    _e.trys.push([0, 2, 4, 6]);
                     setLoading(true);
                     schema.parse(data || {});
                     return [4 /*yield*/, ((_a = onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit.onSuccess) === null || _a === void 0 ? void 0 : _a.call(onSubmit, data))];
                 case 1:
-                    _d.sent();
+                    _e.sent();
                     return [3 /*break*/, 6];
                 case 2:
-                    error_1 = _d.sent();
-                    parsedErrors = (0, zod_1.parseErrors)(error_1);
-                    setErrors(parsedErrors);
-                    return [4 /*yield*/, ((_b = onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit.onError) === null || _b === void 0 ? void 0 : _b.call(onSubmit, parsedErrors))];
-                case 3: return [2 /*return*/, _d.sent()];
-                case 4: return [4 /*yield*/, ((_c = onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit.onFinally) === null || _c === void 0 ? void 0 : _c.call(onSubmit))];
+                    error_1 = _e.sent();
+                    parsedErrors_1 = (0, zod_1.parseErrors)(error_1);
+                    setErrors(parsedErrors_1);
+                    currentRefs = (_b = context.inputRefs) === null || _b === void 0 ? void 0 : _b.current;
+                    if (currentRefs) {
+                        firstErrorField_1 = Array.from(currentRefs.keys()).find(function (key) { return parsedErrors_1[key]; });
+                        if (firstErrorField_1) {
+                            inputRef_1 = currentRefs.get(firstErrorField_1);
+                            setTimeout(function () {
+                                inputRef_1 === null || inputRef_1 === void 0 ? void 0 : inputRef_1.focus();
+                                react_native_1.AccessibilityInfo.announceForAccessibility(parsedErrors_1[firstErrorField_1]);
+                            }, 100);
+                        }
+                    }
+                    return [4 /*yield*/, ((_c = onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit.onError) === null || _c === void 0 ? void 0 : _c.call(onSubmit, parsedErrors_1))];
+                case 3: return [2 /*return*/, _e.sent()];
+                case 4: return [4 /*yield*/, ((_d = onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit.onFinally) === null || _d === void 0 ? void 0 : _d.call(onSubmit))];
                 case 5:
-                    _d.sent();
+                    _e.sent();
                     setLoading(false);
                     return [7 /*endfinally*/];
                 case 6: return [2 /*return*/];
@@ -101,7 +113,8 @@ var useForm = function () {
         clearError: clearError,
         handleSubmit: handleSubmit,
         loading: loading || loadingForm,
-        setLoading: setLoading
+        setLoading: setLoading,
+        registerInput: context.registerInput
     };
 };
 exports.useForm = useForm;

package/dist/video-consultations/screens/DeliveryAddressScreen.js

@@ -160,7 +160,7 @@ var CategorySelect = function (_a) {
             padding: theme.spacing.md,
             maxHeight: '90%',
             minHeight: 300
-        }} onPress={function (e) { return e.stopPropagation && e.stopPropagation(); }}>
+        }} onPress={function (e) { var _a; return (_a = e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e); }}>
             <react_native_1.FlatList data={options} keyExtractor={function (item) { return item.key; }} renderItem={function (_a) {
             var group = _a.item;
             return (<react_native_1.View style={{ marginBottom: theme.spacing.xs }}>
@@ -222,11 +222,12 @@ var DeliveryAddressScreen = function (_a) {
             }
         });
     }); };
-    return (<ScreenWrapper_1.ScreenWrapper header={<Header_1.Header title={t('general.consultation.videoConsultation.title')} leftIcon={<VideoConsultationIcon_1.VideoConsultationIcon />}/>} containerStyle={styles.container}>
+    return (<ScreenWrapper_1.ScreenWrapper header={<Header_1.Header title={t('general.consultation.videoConsultation.title')} leftIcon={<VideoConsultationIcon_1.VideoConsultationIcon />}/>} containerStyle={styles.container} scrollEnabled={false}>
       {error && (<react_native_1.View style={styles.error}>
           <WarningIcon_1.default />
           <Text_1.Text style={styles.warningText}>{t('error.address')}</Text_1.Text>
         </react_native_1.View>)}
+
       <react_native_1.View>
         <Text_1.Text variant="h2" center>
           {t('delivery.address.title')}
@@ -234,16 +235,21 @@ var DeliveryAddressScreen = function (_a) {
         <Text_1.Text center>{t('delivery.address.description')}</Text_1.Text>
       </react_native_1.View>
 
-      <FormWrapper_1.FormWrapper schema={deliveryAddress_1.HKDeliveryAddressSchema} onSubmit={{
-            onSuccess: onSubmit
+      <react_native_1.ScrollView style={styles.formScrollWrapper}>
+        <FormWrapper_1.FormWrapper schema={deliveryAddress_1.HKDeliveryAddressSchema} onSubmit={{
+            onSuccess: onSubmit,
+            onError: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                return [2 /*return*/, setError(true)];
+            }); }); }
         }} initialValues={initialDeliveryAddress} submitButton={<Button_1.Button submit loading={loading}>
-            {t('button.confirm')}
-          </Button_1.Button>} loadingForm={loading}>
-        <Input_1.default id="house" label={t('delivery.address.number_and_floor')} placeholder={t('delivery.address.number_and_floor.placeholder')}/>
-        <Input_1.default id="street" label={t('delivery.address.street')} placeholder={t('delivery.address.street.placeholder')}/>
-        <Input_1.default id="building" label={t('delivery.address.building_name_number')} placeholder={t('delivery.address.building_name_number.placeholder')}/>
-        <CategorySelect id="district" label={t('delivery.address.district')} placeholder={t('delivery.address.district.placeholder')} options={deliveryAddress_1.DISTRICT_AREAS}/>
-      </FormWrapper_1.FormWrapper>
+              {t('button.confirm')}
+            </Button_1.Button>} loadingForm={loading}>
+          <Input_1.default id="house" label={t('delivery.address.number_and_floor')} placeholder={t('delivery.address.number_and_floor.placeholder')}/>
+          <Input_1.default id="street" label={t('delivery.address.street')} placeholder={t('delivery.address.street.placeholder')}/>
+          <Input_1.default id="building" label={t('delivery.address.building_name_number')} placeholder={t('delivery.address.building_name_number.placeholder')}/>
+          <CategorySelect id="district" label={t('delivery.address.district')} placeholder={t('delivery.address.district.placeholder')} options={deliveryAddress_1.DISTRICT_AREAS}/>
+        </FormWrapper_1.FormWrapper>
+      </react_native_1.ScrollView>
     </ScreenWrapper_1.ScreenWrapper>);
 };
 exports.DeliveryAddressScreen = DeliveryAddressScreen;
@@ -265,6 +271,9 @@ var getStyles = function (_a) {
         warningText: {
             color: palette.white,
             marginLeft: spacing.sm
+        },
+        formScrollWrapper: {
+            width: '100%'
         }
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abihealth/goapp-react-native",
-  "version": "1.45.0",
+  "version": "1.45.1",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"