@react-native-ama/forms 1.0.0

package/src/components/FormField.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import {
+  TouchableWithoutFeedback,
+  TouchableWithoutFeedbackProps,
+  View,
+} from 'react-native';
+
+import { UseFormField, useFormField } from '../hooks/useFormField';
+
+export type FormFieldProps = React.PropsWithChildren<
+  TouchableWithoutFeedbackProps &
+    Omit<
+      UseFormField,
+      'hasFocusCallback' | 'nextFormFieldRef' | 'nextFieldId' | 'editable'
+    > & {
+      wrapInsideAccessibleView?: boolean;
+    }
+>;
+
+export const FormField = ({
+  children,
+  wrapInsideAccessibleView = true,
+  ...props
+}: FormFieldProps) => {
+  const viewRef = React.useRef<React.ElementRef<
+    typeof TouchableWithoutFeedback
+  > | null>(null);
+
+  // @ts-ignore
+  const formProps = useFormField({
+    hasFocusCallback: false,
+    ref: viewRef,
+    ...props,
+  });
+
+  return wrapInsideAccessibleView ? (
+    <TouchableWithoutFeedback {...props} ref={viewRef} {...formProps}>
+      <View accessible>{children}</View>
+    </TouchableWithoutFeedback>
+  ) : (
+    <TouchableWithoutFeedback {...props} ref={viewRef} {...formProps}>
+      <>{children}</>
+    </TouchableWithoutFeedback>
+  );
+};

package/src/components/FormSubmit.test.tsx

@@ -0,0 +1,71 @@
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { FormSubmit } from './FormSubmit';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('FormSubmit', () => {
+  it('wraps the children inside a Pressable component with the correct accessibility role and label', () => {
+    const { getByTestId, UNSAFE_getByType } = render(
+      <FormSubmit
+        accessibilityLabel="This is the label"
+        busy={false}
+        testID="test-me"
+      />,
+    );
+
+    expect(UNSAFE_getByType(Pressable)).toBeTruthy();
+    expect(getByTestId('test-me').props).toEqual(
+      expect.objectContaining({
+        accessibilityRole: 'button',
+        accessibilityLabel: 'This is the label',
+        accessibilityState: {
+          busy: false,
+        },
+        busy: false,
+        accessible: true,
+      }),
+    );
+  });
+
+  it('hides the children from the accessiblity tree', () => {
+    const { getByTestId } = render(
+      <FormSubmit
+        accessibilityLabel="This is the label"
+        busy={false}
+        testID="test-me">
+        <View testID="child" />
+      </FormSubmit>,
+    );
+
+    expect(getByTestId('child').props).toEqual({
+      accessibilityElementsHidden: true,
+      children: null,
+      importantForAccessibility: 'no',
+      testID: 'child',
+    });
+  });
+});
+
+jest.mock('../hooks/useFormField', () => {
+  return {
+    useFormField: jest.fn().mockReturnValue({}),
+  };
+});
+
+jest.mock('@react-native-ama/core', () => {
+  const originalModule = jest.requireActual('@react-native-ama/core');
+
+  return {
+    ...originalModule,
+    useAMAContext: () => {
+      return {
+        isScreenReaderEnabled: true,
+      };
+    },
+  };
+});

package/src/components/FormSubmit.tsx

@@ -0,0 +1,43 @@
+import { useAMAContext } from '@react-native-ama/core';
+import { HideChildrenFromAccessibilityTree } from '@react-native-ama/core';
+import React from 'react';
+import { Pressable, PressableProps } from 'react-native';
+
+import { useForm } from '../components/Form';
+
+export type FormSubmitProps = React.PropsWithChildren<{
+  accessibilityLabel: string;
+  accessibilityHint?: string;
+  busy: boolean;
+  style?: PressableProps['style'];
+  testID?: string;
+}>;
+
+export const FormSubmit = (props: FormSubmitProps) => {
+  const { submitForm } = useForm();
+  const { isScreenReaderEnabled } = useAMAContext();
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      pointerEvents="box-only" // prevent event propagation to children eg Pressable
+      {...props}
+      onPress={submitForm}>
+      {isScreenReaderEnabled ? (
+        <FormSubmitForScreenReader children={props.children} />
+      ) : (
+        props.children
+      )}
+    </Pressable>
+  );
+};
+
+const FormSubmitForScreenReader = ({
+  children,
+}: React.PropsWithChildren<{}>) => {
+  return (
+    <HideChildrenFromAccessibilityTree>
+      {children}
+    </HideChildrenFromAccessibilityTree>
+  );
+};

package/src/components/FormSwitch.tsx

@@ -0,0 +1,17 @@
+import {
+  SwitchListItem,
+  SwitchListItemProps,
+} from '@react-native-ama/react-native';
+import React from 'react';
+
+import { FormField } from './FormField';
+
+export type FormSwitchProps = SwitchListItemProps;
+
+export const FormSwitch = (props: FormSwitchProps) => {
+  return (
+    <FormField hasValidation={false}>
+      <SwitchListItem {...props} />
+    </FormField>
+  );
+};