@react-native-ama/core 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-ama/core",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Accessible Mobile App Library for React Native",
   "private": false,
   "react-native": "src/index",
@@ -23,7 +23,7 @@
     "build": "rm -rf dist && tsc -p ./tsconfig.build.json",
     "typecheck": "tsc --noEmit"
   },
-  "devDependencies": {
+  "dependencies": {
     "@react-native-ama/internal": "*"
   },
   "peerDependencies": {

package/src/components/AMAProvider.integration.test.tsx

@@ -0,0 +1,145 @@
+import { act, render } from '@testing-library/react-native';
+import { flushMicroTasks } from '@testing-library/react-native/build/flush-micro-tasks';
+import * as React from 'react';
+
+import { AMAContextValue, AMAProvider, useAMAContext } from './AMAProvider';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('AMAProvider', () => {
+  describe('When __DEV__ is true', () => {
+    beforeEach(() => {
+      // @ts-ignore
+      global.__DEV__ = true;
+    });
+
+    describe('trackError', () => {
+      it('exports trackError', async () => {
+        await renderAMAProvider();
+
+        expect(amaContextValuesRef.trackError).toBeDefined();
+      });
+
+      it('shows the AMA error banner when called', async () => {
+        const renderAPI = await renderAMAProvider();
+
+        expect(renderAPI.queryByTestId('amaError')).toBeNull();
+
+        act(() => {
+          amaContextValuesRef.trackError('123');
+        });
+
+        expect(renderAPI.getByTestId('amaError')).toBeDefined();
+        expect(
+          renderAPI.getByTestId('amaError').props.accessibilityLabel,
+        ).toEqual("1 component(s) didn't pass the accessibility check(s)");
+
+        act(() => {
+          amaContextValuesRef.trackError('123');
+        });
+
+        expect(
+          renderAPI.getByTestId('amaError').props.accessibilityLabel,
+        ).toEqual("1 component(s) didn't pass the accessibility check(s)");
+
+        expect(renderAPI.getByTestId('amaError')).toBeDefined();
+
+        act(() => {
+          amaContextValuesRef.trackError('another');
+        });
+
+        expect(
+          renderAPI.getByTestId('amaError').props.accessibilityLabel,
+        ).toEqual("2 component(s) didn't pass the accessibility check(s)");
+
+        expect(renderAPI.getByTestId('amaError')).toBeDefined();
+      });
+    });
+
+    describe('removeError', () => {
+      it('exports removeError', async () => {
+        await renderAMAProvider();
+
+        expect(amaContextValuesRef.removeError).toBeDefined();
+      });
+
+      it('shows the AMA error banner when called', async () => {
+        const renderAPI = await renderAMAProvider();
+
+        expect(renderAPI.queryByTestId('amaError')).toBeNull();
+
+        act(() => {
+          amaContextValuesRef.trackError('123');
+        });
+
+        expect(
+          renderAPI.getByTestId('amaError').props.accessibilityLabel,
+        ).toEqual("1 component(s) didn't pass the accessibility check(s)");
+        expect(renderAPI.getByTestId('amaError')).toBeDefined();
+
+        act(() => {
+          amaContextValuesRef.removeError('invalidID');
+        });
+
+        expect(
+          renderAPI.getByTestId('amaError').props.accessibilityLabel,
+        ).toEqual("1 component(s) didn't pass the accessibility check(s)");
+
+        expect(renderAPI.getByTestId('amaError')).toBeDefined();
+
+        act(() => {
+          amaContextValuesRef.removeError('123');
+        });
+
+        expect(renderAPI.queryByTestId('amaError')).toBeNull();
+      });
+    });
+  });
+
+  describe('When __DEV__ is false', () => {
+    beforeEach(() => {
+      // @ts-ignore
+      global.__DEV__ = false;
+    });
+
+    it('does not export trackError', async () => {
+      await renderAMAProvider();
+
+      expect(amaContextValuesRef.trackError).toBeUndefined();
+    });
+
+    it('does not export removeError', async () => {
+      await renderAMAProvider();
+
+      expect(amaContextValuesRef.removeError).toBeUndefined();
+    });
+  });
+});
+
+const renderAMAProvider = async () => {
+  const result = render(
+    <AMAProvider>
+      <DummyComponent />
+    </AMAProvider>,
+  );
+
+  await act(async () => {
+    await flushMicroTasks();
+  });
+
+  return result;
+};
+
+let amaContextValuesRef: Extract<
+  AMAContextValue,
+  { trackError: Function; removeError: Function }
+>;
+
+const DummyComponent = () => {
+  // @ts-ignore
+  amaContextValuesRef = useAMAContext();
+
+  return null;
+};

package/src/components/AMAProvider.test.tsx

@@ -0,0 +1,199 @@
+import { act, render } from '@testing-library/react-native';
+import { flushMicroTasks } from '@testing-library/react-native/build/flush-micro-tasks';
+import * as React from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+import { AMAContextValue, AMAProvider } from './AMAProvider';
+
+var mockProvider: jest.Mock;
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('AMAProvider', () => {
+  it('adds event listener for "reduceMotionChanged"', async () => {
+    const spy = jest
+      .spyOn(AccessibilityInfo, 'addEventListener')
+      .mockReturnValue({ remove: jest.fn() } as any);
+
+    await renderAMAProvider();
+
+    expect(spy).toHaveBeenCalledWith(
+      'reduceMotionChanged',
+      expect.any(Function),
+    );
+  });
+
+  it('adds event listener for "screenReaderChanged"', async () => {
+    const spy = jest
+      .spyOn(AccessibilityInfo, 'addEventListener')
+      .mockReturnValue({ remove: jest.fn() } as any);
+
+    await renderAMAProvider();
+
+    expect(spy).toHaveBeenCalledWith(
+      'screenReaderChanged',
+      expect.any(Function),
+    );
+  });
+
+  it('setups the initial value for all the states', async () => {
+    const events = [
+      'isReduceMotionEnabled',
+      'isScreenReaderEnabled',
+      'isReduceTransparencyEnabled',
+      'isGrayscaleEnabled',
+      'isBoldTextEnabled',
+      'isInvertColorsEnabled',
+    ];
+
+    const states: any = {};
+
+    events.forEach(event => {
+      // @ts-ignore
+      jest.spyOn(AccessibilityInfo, event).mockResolvedValue('yay');
+      states[event] = 'yay';
+    });
+
+    await renderAMAProvider();
+
+    expect(mockProvider.mock.calls[1][0]).toMatchObject({
+      value: states,
+    });
+  });
+
+  it.each`
+    eventName                      | valueName
+    ${'reduceMotionChanged'}       | ${'isReduceMotionEnabled'}
+    ${'screenReaderChanged'}       | ${'isScreenReaderEnabled'}
+    ${'reduceTransparencyChanged'} | ${'isReduceTransparencyEnabled'}
+    ${'grayscaleChanged'}          | ${'isGrayscaleEnabled'}
+    ${'boldTextChanged'}           | ${'isBoldTextEnabled'}
+    ${'invertColorsChanged'}       | ${'isInvertColorsEnabled'}
+  `(
+    'reacts to the events change $eventName',
+    async ({
+      eventName,
+      valueName,
+    }: {
+      eventName: string;
+      valueName: keyof AMAContextValue;
+    }) => {
+      let handler: Function;
+      jest
+        .spyOn(AccessibilityInfo, 'addEventListener')
+        // @ts-ignore
+        .mockImplementation((name, callback) => {
+          if (name === eventName) {
+            handler = callback;
+          }
+
+          return {
+            remove: jest.fn(),
+          };
+        });
+
+      await renderAMAProvider();
+
+      const state: any = {};
+      state[valueName] = false;
+
+      expect(mockProvider).toHaveBeenCalledWith(
+        expect.objectContaining({
+          value: expect.objectContaining(state),
+        }),
+        {},
+      );
+
+      jest.clearAllMocks();
+
+      act(() => {
+        handler!(true);
+      });
+
+      state[valueName] = true;
+      expect(mockProvider).toHaveBeenCalledWith(
+        expect.objectContaining({
+          value: expect.objectContaining(state),
+        }),
+        {},
+      );
+
+      jest.clearAllMocks();
+
+      act(() => {
+        handler!(false);
+      });
+
+      state[valueName] = false;
+      expect(mockProvider).toHaveBeenCalledWith(
+        expect.objectContaining({
+          value: expect.objectContaining(state),
+        }),
+        {},
+      );
+    },
+  );
+
+  it.each`
+    eventName
+    ${'reduceMotionChanged'}
+    ${'screenReaderChanged'}
+    ${'reduceTransparencyChanged'}
+    ${'grayscaleChanged'}
+    ${'boldTextChanged'}
+    ${'invertColorsChanged'}
+  `(
+    'remove the "$eventName" subscription when the provider is unmounted',
+    async ({ eventName }) => {
+      const removeMock = jest.fn();
+      jest
+        .spyOn(AccessibilityInfo, 'addEventListener')
+        // @ts-ignore
+        .mockImplementation((name, _callback) => {
+          return { remove: name === eventName ? removeMock : jest.fn() };
+        });
+
+      const renderAPI = await renderAMAProvider();
+      renderAPI.unmount();
+
+      expect(removeMock).toHaveBeenCalledWith();
+    },
+  );
+});
+
+const renderAMAProvider = async () => {
+  const result = render(
+    <AMAProvider>
+      <></>
+    </AMAProvider>,
+  );
+
+  await act(async () => {
+    await flushMicroTasks();
+  });
+
+  return result;
+};
+
+function mockCreateContext() {
+  const original = jest.requireActual('react');
+
+  mockProvider = jest.fn().mockReturnValue(null);
+
+  return {
+    ...original,
+    createContext: () => {
+      return {
+        Provider: mockProvider,
+        Consumer: () => {},
+        displayName: '',
+      };
+    },
+  };
+}
+
+jest.mock('react', () => {
+  return mockCreateContext();
+});

package/src/components/AMAProvider.tsx

@@ -0,0 +1,231 @@
+/* eslint-disable react-native/no-inline-styles */
+
+import { RED } from '@react-native-ama/internal';
+import * as React from 'react';
+import {
+  AccessibilityChangeEventName,
+  AccessibilityInfo,
+  NativeEventSubscription,
+  Text,
+  View,
+} from 'react-native';
+
+type AMAProviderProps = {
+  children: React.ReactNode;
+};
+
+type SharedContextValue = {
+  isBoldTextEnabled: boolean;
+  isScreenReaderEnabled: boolean;
+  isGrayscaleEnabled: boolean;
+  isInvertColorsEnabled: boolean;
+  isReduceMotionEnabled: boolean;
+  isReduceTransparencyEnabled: boolean;
+  reactNavigationScreenOptions: {
+    animationEnabled: boolean;
+    animation: 'default' | 'fade';
+  };
+};
+export type AMADevContextValue = SharedContextValue & {
+  trackError: (id: string) => void;
+  removeError: (id: string) => void;
+};
+
+export type AMAProdContextValue = SharedContextValue & {};
+
+export type AMAContextValue = AMADevContextValue | AMAProdContextValue;
+
+type AccessibilityEvents = Exclude<AccessibilityChangeEventName, 'change'>;
+
+type AccessibilityInfoKey = Exclude<
+  keyof AMAContextValue,
+  'reactNavigationScreenOptions' | 'trackError' | 'removeError'
+>;
+
+type Extractor<S extends AccessibilityEvents> = S extends `${infer R}Changed`
+  ? R
+  : never;
+
+type AccessibilityInfoEvents = {
+  [key in AccessibilityEvents]: `is${Capitalize<Extractor<key>>}Enabled`;
+};
+
+const eventsMapping: AccessibilityInfoEvents = {
+  reduceTransparencyChanged: 'isReduceTransparencyEnabled',
+  reduceMotionChanged: 'isReduceMotionEnabled',
+  grayscaleChanged: 'isGrayscaleEnabled',
+  boldTextChanged: 'isBoldTextEnabled',
+  invertColorsChanged: 'isInvertColorsEnabled',
+  screenReaderChanged: 'isScreenReaderEnabled',
+};
+
+const isDev = __DEV__;
+
+export const isDevContextValue = (
+  value: AMAContextValue,
+): value is AMADevContextValue =>
+  (value as AMADevContextValue).trackError !== undefined;
+
+const DEFAULT_VALUES = {
+  isReduceTransparencyEnabled: false,
+  isBoldTextEnabled: false,
+  isGrayscaleEnabled: false,
+  isInvertColorsEnabled: false,
+  isReduceMotionEnabled: false,
+  isScreenReaderEnabled: false,
+  reactNavigationScreenOptions: {
+    animationEnabled: true,
+    animation: 'default',
+  },
+} satisfies AMAContextValue;
+
+const AMAContext = React.createContext<AMAContextValue | null>(null);
+
+export const AMAProvider: React.FC<AMAProviderProps> = ({ children }) => {
+  const [values, setValues] = React.useState<AMAContextValue>(DEFAULT_VALUES);
+
+  const handleAccessibilityInfoChanged = (key: AccessibilityInfoKey) => {
+    return (newValue: boolean) => {
+      setValues(oldValues => {
+        const newValues = { ...oldValues };
+        newValues[key] = newValue;
+
+        if (key === 'isReduceMotionEnabled') {
+          newValues.reactNavigationScreenOptions.animationEnabled = !newValue;
+          newValues.reactNavigationScreenOptions.animation = newValue
+            ? 'fade'
+            : 'default';
+        }
+
+        return {
+          ...oldValues,
+          ...newValues,
+        };
+      });
+    };
+  };
+
+  React.useEffect(() => {
+    const allInitPromises: Promise<boolean>[] = [];
+
+    const subscriptions: NativeEventSubscription[] = Object.entries(
+      eventsMapping,
+    ).map(([eventName, contextKey]) => {
+      allInitPromises.push(AccessibilityInfo[contextKey]());
+
+      return AccessibilityInfo.addEventListener(
+        eventName as AccessibilityEvents,
+        handleAccessibilityInfoChanged(contextKey),
+      );
+    });
+
+    Promise.all(allInitPromises).then(promisesValues => {
+      const newValues = Object.values(eventsMapping).reduce(
+        (list, key, index) => {
+          list[key] = promisesValues[index] as boolean;
+
+          return list;
+        },
+        {} as AMAContextValue,
+      );
+
+      setValues(oldValues => {
+        return {
+          ...oldValues,
+          ...newValues,
+        };
+      });
+    });
+
+    return () => {
+      subscriptions.forEach(subscription => subscription?.remove());
+    };
+  }, []);
+
+  const [failedItems, setFailedItems] = React.useState<string[]>([]);
+
+  if (isDev) {
+    const trackError = (id: string) => {
+      if (failedItems.includes(id)) {
+        return;
+      }
+
+      setFailedItems(items => [...items, id]);
+
+      AccessibilityInfo.announceForAccessibility(
+        "One or more component didn't pass the accessibility check, please check the console for more info",
+      );
+    };
+
+    const removeError = (id: string) => {
+      setFailedItems(items => {
+        const index = items.indexOf(id);
+
+        if (index >= 0) {
+          items.splice(index);
+
+          return [...items];
+        }
+
+        return items;
+      });
+    };
+
+    return (
+      <AMAContext.Provider
+        value={{
+          ...values,
+          trackError,
+          removeError,
+        }}>
+        <View style={{ flex: 1 }}>
+          <>
+            {children}
+            {failedItems.length > 0 ? (
+              <AMAError count={failedItems.length} />
+            ) : null}
+          </>
+        </View>
+      </AMAContext.Provider>
+    );
+  }
+
+  return <AMAContext.Provider value={values}>{children}</AMAContext.Provider>;
+};
+
+const AMAError = ({ count }: { count: number }) => {
+  const error = `${count} component(s) didn't pass the accessibility check(s)`;
+
+  return (
+    <View
+      accessibilityLabel={error}
+      accessibilityHint="Please check the console for more info..."
+      style={{
+        paddingHorizontal: 24,
+        paddingTop: 24,
+        paddingBottom: 48,
+        backgroundColor: RED,
+      }}
+      testID="amaError">
+      <View accessible={true}>
+        <Text
+          style={{ color: 'white', fontSize: 16, lineHeight: 26 }}
+          testID="amaError.message">
+          {error}
+        </Text>
+        <Text style={{ color: 'white', fontSize: 16, lineHeight: 24 }}>
+          Please check the console for more info...
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export const useAMAContext = () => {
+  const context = React.useContext(AMAContext);
+  if (!context) {
+    throw new Error('Please wrap your app with <AMAProvider />');
+  }
+
+  return context;
+};

package/src/components/AutofocusContainer.test.tsx

@@ -0,0 +1,69 @@
+import { render, waitFor } from '@testing-library/react-native';
+import * as React from 'react';
+
+import * as UseFocus from '../hooks/useFocus';
+import { AutofocusContainer } from './AutofocusContainer';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('AutofocusContainer', () => {
+  it('it call setFocus when gets rendered', async () => {
+    const setFocus = jest.fn();
+    jest.spyOn(UseFocus, 'useFocus').mockReturnValue({
+      setFocus,
+    });
+
+    render(
+      <AutofocusContainer>
+        <></>
+      </AutofocusContainer>,
+    );
+
+    await waitFor(() => expect(setFocus).toBeCalled());
+  });
+
+  it.each([undefined, true])(
+    'wraps the children with an accessible View when wrapChildrenInAccessibleView is %s',
+    async () => {
+      const setFocus = jest.fn();
+      jest.spyOn(UseFocus, 'useFocus').mockReturnValue({
+        setFocus,
+      });
+
+      const renderAPI = render(
+        <AutofocusContainer wrapChildrenInAccessibleView={true}>
+          <></>
+        </AutofocusContainer>,
+      );
+
+      await waitFor(() => expect(setFocus).toBeCalled());
+
+      expect(
+        renderAPI.getByTestId('autofocusContainer.accessibleView'),
+      ).toBeDefined();
+    },
+  );
+
+  it('does not wrap the children with an accessible View when wrapChildrenInAccessibleView is false', async () => {
+    const setFocus = jest.fn();
+    jest.spyOn(UseFocus, 'useFocus').mockReturnValue({
+      setFocus,
+    });
+
+    const renderAPI = render(
+      <AutofocusContainer wrapChildrenInAccessibleView={false}>
+        <></>
+      </AutofocusContainer>,
+    );
+
+    await waitFor(() => expect(setFocus).toBeCalled());
+
+    expect(
+      renderAPI.queryByTestId('autofocusContainer.accessibleView'),
+    ).toBeNull();
+  });
+});
+
+jest.mock('../hooks/useFocus');

package/src/components/AutofocusContainer.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { TouchableWithoutFeedback, View, ViewProps } from 'react-native';
+
+import { useFocus } from '../hooks/useFocus';
+
+type AutofocusContainerProps = React.PropsWithChildren<
+  | ({
+      wrapChildrenInAccessibleView?: true;
+    } & ViewProps)
+  | {
+      wrapChildrenInAccessibleView: false;
+    }
+>;
+
+export const AutofocusContainer = ({
+  children,
+  wrapChildrenInAccessibleView = true,
+  ...viewProps
+}: AutofocusContainerProps) => {
+  const containerRef = React.useRef(null);
+  const { setFocus } = useFocus();
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setFocus(containerRef.current);
+    }, 0);
+  }, [setFocus]);
+
+  return wrapChildrenInAccessibleView ? (
+    <TouchableWithoutFeedback ref={containerRef}>
+      <View
+        accessible={true}
+        testID="autofocusContainer.accessibleView"
+        {...viewProps}>
+        {children}
+      </View>
+    </TouchableWithoutFeedback>
+  ) : (
+    <TouchableWithoutFeedback ref={containerRef}>
+      {children}
+    </TouchableWithoutFeedback>
+  );
+};