@react-native-ama/forms 1.2.0 → 2.0.0-beta.0

package/src/components/TextInput.tsx

@@ -1,58 +1,64 @@
-import { HideChildrenFromAccessibilityTree } from '@react-native-ama/core';
-import { useChecks } from '@react-native-ama/core';
-import { applyStyle } from '@react-native-ama/internal';
-import { maybeGenerateStringFromElement } from '@react-native-ama/internal';
 import * as React from 'react';
 import {
   TextInput as RNTextInput,
   TextInputProps as RNTextInputProps,
 } from 'react-native';
-
 import { UseTextInput, useTextInput } from '../hooks/useTextInput';
 
-export type TextInputProps = RNTextInputProps &
+export const a11yProps: Pick<TextInputProps, 'accessibilityElementsHidden' | 'importantForAccessibility'> = {
+  importantForAccessibility: 'no-hide-descendants',
+  accessibilityElementsHidden: true,
+};
+
+type A11yProps = typeof a11yProps;
+
+type TextInputBaseProps = Omit<RNTextInputProps, 'accessibilityLabel' | 'aria-label'> &
   Omit<UseTextInput, 'required' | 'accessibilityLabel'> & {
-    labelComponent: JSX.Element;
     labelPosition?: 'beforeInput' | 'afterInput';
     nextFormField?: React.RefObject<RNTextInput>;
     id?: string;
     nextFieldId?: string;
-    errorComponent?: JSX.Element;
     errorPosition?: 'belowLabel' | 'afterInput';
+    renderLabel?: (a11yProps: A11yProps) => React.ReactNode;
+    renderError?: (a11yProps: A11yProps) => React.ReactNode;
   };
 
+// Require either `accessibilityLabel` or `aria-label` (but at least one)
+export type TextInputProps =
+  | (TextInputBaseProps & { accessibilityLabel: string; 'aria-label'?: never })
+  | (TextInputBaseProps & { 'aria-label': string; accessibilityLabel?: never });
+
+
+const labelA11yProps: A11yProps = {
+  importantForAccessibility: 'no-hide-descendants',
+  accessibilityElementsHidden: true,
+};
+
 export const TextInput = React.forwardRef<RNTextInput, TextInputProps>(
   (
     {
-      labelComponent,
-      labelPosition = 'beforeInput',
       nextFormField,
       id,
       nextFieldId,
       accessibilityHint,
       hasError,
-      errorComponent,
-      errorPosition = 'afterInput',
       hasValidation,
       errorMessage,
+      accessibilityLabel,
+      labelPosition = 'beforeInput',
+      errorPosition = 'afterInput',
+      renderLabel,
+      renderError,
       ...rest
     },
-    forwardedRef,
+    forwardedRef
   ) => {
-    const inputRef = React.useRef<React.ElementRef<typeof TextInput> | null>(
-      null,
+    const inputRef = React.useRef<RNTextInput | null>(
+      null
     );
 
     React.useImperativeHandle(forwardedRef, () => inputRef.current!);
 
-    const showLabelBeforeInput = labelPosition === 'beforeInput';
-
-    const accessibilityLabel = React.useMemo(
-      () =>
-        maybeGenerateStringFromElement(labelComponent, rest.accessibilityLabel),
-      [labelComponent, rest.accessibilityLabel],
-    );
-
     const textInputProps = useTextInput({
       ...rest,
       ref: inputRef,
@@ -63,103 +69,29 @@ export const TextInput = React.forwardRef<RNTextInput, TextInputProps>(
       hasValidation,
       errorMessage,
       required: false,
-      accessibilityLabel,
+      accessibilityLabel: accessibilityLabel || rest?.['aria-label'],
     });
 
-    const checks = __DEV__ ? useChecks?.() : undefined;
-    __DEV__ &&
-      checks?.noUndefinedProperty({
-        properties: { labelComponent },
-        property: 'labelComponent',
-        rule: 'NO_FORM_LABEL',
-      });
-    __DEV__ &&
-      checks?.noUndefinedProperty({
-        properties: { accessibilityLabel },
-        property: 'accessibilityLabel',
-        rule: 'NO_ACCESSIBILITY_LABEL',
-      });
-    __DEV__ &&
-      accessibilityLabel?.trim() === '' &&
-      checks?.logResult('NO_ACCESSIBILITY_LABEL', {
-        rule: 'NO_ACCESSIBILITY_LABEL',
-        message: 'No accessibility label provided',
-      });
-    __DEV__ &&
-      hasValidation &&
-      checks?.noUndefinedProperty({
-        // @ts-ignore
-        properties: { errorComponent },
-        property: 'errorComponent',
-        rule: 'NO_FORM_ERROR',
-      });
-
-    const style =
-      __DEV__ && // @ts-ignore
-      applyStyle?.({
-        // @ts-ignore
-        style: textInputProps?.style || {},
-        debugStyle: checks?.debugStyle,
-      });
-
-    const accessibilityHiddenLabel = React.useMemo(
-      () => (
-        <HideChildrenFromAccessibilityTree>
-          {labelComponent}
-        </HideChildrenFromAccessibilityTree>
-      ),
-      [labelComponent],
-    );
-
-    const errorText = React.useMemo(() => {
-      return hasValidation && hasError
-        ? maybeGenerateStringFromElement(errorComponent, errorMessage)
-        : '';
-    }, [hasValidation, hasError, errorComponent, errorMessage]);
-
-    const renderError = () => {
-      return (
-        <HideChildrenFromAccessibilityTree>
-          {errorComponent}
-        </HideChildrenFromAccessibilityTree>
-      );
-    };
-
-    const fullAccessibilityHint = [accessibilityHint || '', errorText || '']
-      .filter(item => item.length > 0)
+    const fullAccessibilityHint = [accessibilityHint, errorMessage]
+      .filter(Boolean)
       ?.join(', ');
 
-    return __DEV__ ? (
-      <>
-        {showLabelBeforeInput ? accessibilityHiddenLabel : null}
-        {hasError && errorPosition === 'belowLabel' ? renderError() : null}
-        <RNTextInput
-          // @ts-ignore
-          ref={inputRef}
-          {...rest}
-          {...textInputProps}
-          style={style}
-          accessibilityLabel={accessibilityLabel!}
-          accessibilityHint={fullAccessibilityHint}
-        />
-        {showLabelBeforeInput ? null : accessibilityHiddenLabel}
-        {hasError && errorPosition === 'afterInput' ? renderError() : null}
-      </>
-    ) : (
+    const showError = hasError && renderError;
+
+    return (
       <>
-        {showLabelBeforeInput ? accessibilityHiddenLabel : null}
-        {hasError && errorPosition === 'belowLabel' ? renderError() : null}
+        {labelPosition === 'beforeInput' ? renderLabel?.(labelA11yProps) : null}
+        {errorPosition === 'belowLabel' && showError ? renderError?.(labelA11yProps) : null}
         <RNTextInput
-          // @ts-ignore
           ref={inputRef}
           {...rest}
           {...textInputProps}
-          accessibilityLabel={accessibilityLabel!}
+          accessibilityLabel={accessibilityLabel ?? rest['aria-label']}
           accessibilityHint={fullAccessibilityHint}
         />
-        {showLabelBeforeInput ? null : accessibilityHiddenLabel}
-        {hasError && errorPosition === 'afterInput' ? renderError() : null}
+        {labelPosition === 'afterInput' ? renderLabel?.(labelA11yProps) : null}
+        {errorPosition === 'afterInput' && showError ? renderError?.(labelA11yProps) : null}
       </>
     );
-  },
+  }
 );

package/src/hooks/useFocus.test.ts

@@ -0,0 +1,130 @@
+import { renderHook, act } from '@testing-library/react-native';
+import { useFocus } from './useFocus';
+
+const rn = jest.requireMock('react-native');
+
+// useFocus uses SHELL_COLORS as a global — define it for the test environment
+(global as any).SHELL_COLORS = {
+  BG_RED: '', RESET: '', BLUE: '', YELLOW: '',
+};
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  // @ts-ignore
+  global.__DEV__ = true;
+  rn.InteractionManager.runAfterInteractions = jest.fn((cb) => cb());
+  rn.findNodeHandle = jest.fn(() => 42);
+});
+
+afterEach(() => {
+  // @ts-ignore
+  global.__DEV__ = true;
+});
+
+describe('useFocus', () => {
+  it('returns a setFocus function', () => {
+    const { result } = renderHook(() => useFocus());
+    expect(typeof result.current.setFocus).toBe('function');
+  });
+
+  it('does nothing when called with null', () => {
+    const { result } = renderHook(() => useFocus());
+    act(() => {
+      result.current.setFocus(null);
+    });
+    expect(rn.AccessibilityInfo.setAccessibilityFocus).not.toHaveBeenCalled();
+  });
+
+  it('calls setAccessibilityFocus when a valid node handle is found', () => {
+    jest.useFakeTimers();
+    rn.findNodeHandle = jest.fn(() => 42);
+
+    const { result } = renderHook(() => useFocus());
+    act(() => {
+      result.current.setFocus({} as any);
+    });
+
+    expect(rn.AccessibilityInfo.setAccessibilityFocus).toHaveBeenCalledWith(42);
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(rn.AccessibilityInfo.setAccessibilityFocus).toHaveBeenCalledTimes(2);
+    jest.useRealTimers();
+  });
+
+  it('warns in __DEV__ mode when node handle is not found', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    rn.findNodeHandle = jest.fn(() => null);
+
+    const { result } = renderHook(() => useFocus());
+    act(() => {
+      result.current.setFocus({} as any);
+    });
+
+    expect(warnSpy).toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it('does not warn when __DEV__ is false and node handle is not found', () => {
+    // @ts-ignore
+    global.__DEV__ = false;
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    rn.findNodeHandle = jest.fn(() => null);
+
+    const { result } = renderHook(() => useFocus());
+    act(() => {
+      result.current.setFocus({} as any);
+    });
+
+    expect(warnSpy).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it('warns in __DEV__ when findNodeHandle throws', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    rn.findNodeHandle = jest.fn(() => {
+      throw new Error('boom');
+    });
+
+    const { result } = renderHook(() => useFocus());
+    act(() => {
+      result.current.setFocus({} as any);
+    });
+
+    expect(warnSpy).toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it('does not warn when __DEV__ is false and findNodeHandle throws', () => {
+    // @ts-ignore
+    global.__DEV__ = false;
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    rn.findNodeHandle = jest.fn(() => {
+      throw new Error('boom');
+    });
+
+    const { result } = renderHook(() => useFocus());
+    act(() => {
+      result.current.setFocus({} as any);
+    });
+
+    expect(warnSpy).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it('auto-focuses refComponent on mount when provided', () => {
+    rn.findNodeHandle = jest.fn(() => 99);
+    const ref = { current: {} };
+
+    renderHook(() => useFocus(ref));
+
+    expect(rn.AccessibilityInfo.setAccessibilityFocus).toHaveBeenCalledWith(99);
+  });
+
+  it('does not auto-focus when refComponent is not provided', () => {
+    renderHook(() => useFocus());
+    expect(rn.AccessibilityInfo.setAccessibilityFocus).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/useFocus.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import {
+  AccessibilityInfo,
+  findNodeHandle,
+  InteractionManager,
+} from 'react-native';
+
+export const useFocus = (refComponent?: React.RefObject<any>) => {
+  const setFocus = React.useCallback(
+    (
+      component:
+        | null
+        | number
+        | React.Component<any, any>
+        | React.ComponentClass<any>
+    ) => {
+      if (!component) {
+        return;
+      }
+
+      InteractionManager.runAfterInteractions(() => {
+        try {
+          const elementId = findNodeHandle(component);
+
+          if (elementId) {
+            AccessibilityInfo.setAccessibilityFocus(elementId);
+            setTimeout(() => {
+              AccessibilityInfo.setAccessibilityFocus(elementId); //ISSUE: https://github.com/facebook/react-native/issues/30097
+            }, 100);
+          } else if (__DEV__) {
+            console.warn(
+              // @ts-ignore
+              `${SHELL_COLORS.BG_RED}AMA.${SHELL_COLORS.RESET} ${SHELL_COLORS.BLUE}useFocus${SHELL_COLORS.RESET}: ${SHELL_COLORS.YELLOW}Ref element not found${SHELL_COLORS.RESET}`
+            );
+          }
+        } catch (error) {
+          if (__DEV__) {
+            console.warn(
+              // @ts-ignore
+              `${SHELL_COLORS.BG_RED}AMA.${SHELL_COLORS.RESET} ${SHELL_COLORS.BLUE}useFocus${SHELL_COLORS.RESET}: ${SHELL_COLORS.YELLOW}Error finding node handle${SHELL_COLORS.RESET} \n`,
+              error
+            );
+          }
+        }
+      });
+    },
+    []
+  );
+
+  React.useEffect(() => {
+    if (!refComponent) {
+      return;
+    }
+
+    setFocus(refComponent.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refComponent]);
+
+  return {
+    setFocus,
+  };
+};

package/src/hooks/useFormField.test.tsx

@@ -1,10 +1,8 @@
-import * as AMAProvider from '@react-native-ama/core';
-import { renderHook } from '@testing-library/react-native';
-import { waitFor } from '@testing-library/react-native';
+import { renderHook, waitFor } from '@testing-library/react-native';
 import * as React from 'react';
-
 import * as Form from '../components/Form';
 import { useFormField } from './useFormField';
+import * as CheckFocusTrapModule from '../utils/checkFocusTrap';
 
 beforeEach(() => {
   jest.clearAllMocks();
@@ -16,10 +14,6 @@ describe('useFormField', () => {
   let localRef: any[] = [];
 
   beforeEach(() => {
-    jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
-      isScreenReaderEnabled: true,
-    } as any);
-
     jest.spyOn(Form, 'useForm').mockImplementation(() => {
       return { refs: localRef, submitForm };
     });
@@ -75,51 +69,7 @@ describe('useFormField', () => {
   });
 
   describe('focusNextFormField', () => {
-    describe('Given the form field is not the last of the refs', () => {
-      describe('checks for focus when calling focusNextFormField', function () {
-        it('checks only against the current field if next one does not have the focus callback', async () => {
-          const focus = jest.fn();
-          const ref = { current: { focus, isFocused: jest.fn() } };
-
-          const { result } = renderHook(
-            () => {
-              const first = useFormField({
-                ref: { current: 'random ref' },
-                hasFocusCallback: true,
-                hasValidation: false,
-              });
-
-              // next field
-              useFormField({
-                ref,
-                hasFocusCallback: false,
-                hasValidation: false,
-              });
-
-              return first;
-            },
-            { wrapper: renderHookWrapper },
-          );
-
-          result.current.focusNextFormField();
-
-          await waitFor(() =>
-            expect(checkFocusTrap).toHaveBeenCalledWith({
-              ref: { current: 'random ref' },
-              shouldHaveFocus: false,
-            }),
-          );
-
-          expect(checkFocusTrap).toHaveBeenCalledTimes(1);
-        });
-      });
-    });
-
     it('triggers submitForm when the element is the last one of the ref', async () => {
-      jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
-        isScreenReaderEnabled: true,
-      } as any);
-
       const ref = { current: 'whatever' };
 
       const { result } = renderHook(
@@ -146,38 +96,193 @@ describe('useFormField', () => {
         expect(submitForm).toHaveBeenCalledWith();
       });
     });
-  });
-});
 
-let setFocus: jest.Mock;
-let checkFocusTrap: jest.Mock;
+    it('calls focusField with the next ref when not the last field', async () => {
+      const focusField = jest.fn();
+      jest.spyOn(Form, 'useForm').mockImplementation(() => ({
+        refs: localRef,
+        submitForm,
+        focusField,
+      }));
 
-function mockAMACore() {
-  const original = jest.requireActual('@react-native-ama/core');
+      const { result } = renderHook(
+        () => {
+          // first field
+          const first = useFormField({
+            ref: { current: 'first' },
+            hasFocusCallback: false,
+            hasValidation: false,
+          });
 
-  setFocus = jest.fn();
+          // second field
+          useFormField({
+            ref: { current: 'second' },
+            hasFocusCallback: false,
+            hasValidation: false,
+          });
 
-  return {
-    ...original,
-    useFocus: () => {
-      return {
-        setFocus,
-      };
-    },
-  };
-}
+          return first;
+        },
+        { wrapper: renderHookWrapper },
+      );
 
-function mockAMAInternal() {
-  const original = jest.requireActual('@react-native-ama/internal');
+      await waitFor(() => {
+        result.current.focusNextFormField();
+        expect(focusField).toHaveBeenCalled();
+      });
+    });
 
-  checkFocusTrap = jest.fn().mockResolvedValue(null);
+    it('uses nextFormFieldRef when provided', async () => {
+      const focusField = jest.fn();
+      jest.spyOn(Form, 'useForm').mockImplementation(() => ({
+        refs: localRef,
+        submitForm,
+        focusField,
+      }));
 
-  return { ...original, checkFocusTrap };
-}
+      const nextFormFieldRef = { current: 'explicit-next' };
 
-const renderHookWrapper = ({ children }) => (
-  <AMAProvider.AMAProvider>{children}</AMAProvider.AMAProvider>
-);
+      const { result } = renderHook(
+        () => {
+          const first = useFormField({
+            ref: { current: 'first' },
+            hasFocusCallback: false,
+            hasValidation: false,
+            nextFormFieldRef,
+          });
+
+          useFormField({
+            ref: { current: 'second' },
+            hasFocusCallback: false,
+            hasValidation: false,
+          });
+
+          return first;
+        },
+        { wrapper: renderHookWrapper },
+      );
+
+      await waitFor(() => {
+        result.current.focusNextFormField();
+        expect(focusField).toHaveBeenCalledWith(
+          expect.objectContaining({ ref: nextFormFieldRef }),
+        );
+      });
+    });
+
+    it('calls checkFocusTrap when hasFocusCallback is true and not the last field', async () => {
+      const focusField = jest.fn();
+      const checkFocusTrapSpy = jest.spyOn(CheckFocusTrapModule as { checkFocusTrap: (...args: any[]) => Promise<void> }, 'checkFocusTrap').mockResolvedValue(undefined);
+      jest.spyOn(Form, 'useForm').mockImplementation(() => ({
+        refs: localRef,
+        submitForm,
+        focusField,
+      }));
+
+      const { result } = renderHook(
+        () => {
+          const first = useFormField({
+            ref: { current: 'first' },
+            hasFocusCallback: true,
+            hasValidation: false,
+          });
+
+          useFormField({
+            ref: { current: 'second' },
+            hasFocusCallback: false,
+            hasValidation: false,
+          });
 
-jest.mock('@react-native-ama/core', () => mockAMACore());
-jest.mock('@react-native-ama/internal', () => mockAMAInternal());
+          return first;
+        },
+        { wrapper: renderHookWrapper },
+      );
+
+      await waitFor(() => {
+        result.current.focusNextFormField();
+        expect(checkFocusTrapSpy).toHaveBeenCalledWith(
+          expect.objectContaining({ shouldHaveFocus: false }),
+        );
+      });
+
+      checkFocusTrapSpy.mockRestore();
+    });
+
+    it('does not call checkFocusTrap when hasFocusCallback is false', async () => {
+      const focusField = jest.fn();
+      const checkFocusTrapSpy = jest.spyOn(CheckFocusTrapModule as { checkFocusTrap: (...args: any[]) => Promise<void> }, 'checkFocusTrap').mockResolvedValue(undefined);
+      jest.spyOn(Form, 'useForm').mockImplementation(() => ({
+        refs: localRef,
+        submitForm,
+        focusField,
+      }));
+
+      const { result } = renderHook(
+        () => {
+          const first = useFormField({
+            ref: { current: 'first' },
+            hasFocusCallback: false,
+            hasValidation: false,
+          });
+
+          useFormField({
+            ref: { current: 'second' },
+            hasFocusCallback: false,
+            hasValidation: false,
+          });
+
+          return first;
+        },
+        { wrapper: renderHookWrapper },
+      );
+
+      await waitFor(() => {
+        result.current.focusNextFormField();
+        expect(checkFocusTrapSpy).not.toHaveBeenCalled();
+      });
+
+      checkFocusTrapSpy.mockRestore();
+    });
+
+    it('uses nextFieldId to find the next ref when provided', async () => {
+      const focusField = jest.fn();
+      jest.spyOn(Form, 'useForm').mockImplementation(() => ({
+        refs: localRef,
+        submitForm,
+        focusField,
+      }));
+
+      const { result } = renderHook(
+        () => {
+          const first = useFormField({
+            ref: { current: 'first' },
+            hasFocusCallback: false,
+            hasValidation: false,
+            nextFieldId: 'second-field',
+          });
+
+          useFormField({
+            ref: { current: 'second' },
+            hasFocusCallback: false,
+            hasValidation: false,
+            id: 'second-field',
+          });
+
+          return first;
+        },
+        { wrapper: renderHookWrapper },
+      );
+
+      await waitFor(() => {
+        result.current.focusNextFormField();
+        expect(focusField).toHaveBeenCalledWith(
+          expect.objectContaining({ id: 'second-field' }),
+        );
+      });
+    });
+  });
+});
+
+const renderHookWrapper = ({ children }: { children: React.ReactNode }) => (
+  <>{children}</>
+);