@react-native-ama/core 1.2.1 → 2.0.0-beta.1

package/src/components/AMAProvider.test.tsx

@@ -2,13 +2,15 @@ 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();
+  if (mockProvider) {
+    mockProvider.mockReturnValue(null);
+  }
 });
 
 describe('AMAProvider', () => {
@@ -103,9 +105,10 @@ describe('AMAProvider', () => {
         expect.objectContaining({
           value: expect.objectContaining(state),
         }),
-        {},
+        undefined,
       );
 
+
       jest.clearAllMocks();
 
       act(() => {
@@ -117,9 +120,10 @@ describe('AMAProvider', () => {
         expect.objectContaining({
           value: expect.objectContaining(state),
         }),
-        {},
+        undefined,
       );
 
+
       jest.clearAllMocks();
 
       act(() => {
@@ -131,8 +135,9 @@ describe('AMAProvider', () => {
         expect.objectContaining({
           value: expect.objectContaining(state),
         }),
-        {},
+        undefined,
       );
+
     },
   );
 

package/src/components/AMAProvider.tsx

@@ -1,14 +1,13 @@
 /* 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';
+import type { AmaRule } from '../internals/types';
+import type { UseAMADev } from '../internals/useAMADev';
 
 type AMAProviderProps = {
   children: React.ReactNode;
@@ -21,14 +20,16 @@ type SharedContextValue = {
   isInvertColorsEnabled: boolean;
   isReduceMotionEnabled: boolean;
   isReduceTransparencyEnabled: boolean;
+  isHighTextContrastEnabled: boolean;
+  isDarkerSystemColorsEnabled: boolean;
   reactNavigationScreenOptions: {
     animationEnabled: boolean;
     animation: 'default' | 'fade';
   };
 };
+
 export type AMADevContextValue = SharedContextValue & {
-  trackError: (id: string) => void;
-  removeError: (id: string) => void;
+  trackError: (rule: AmaRule, ref?: React.RefObject<any>) => void;
 };
 
 export type AMAProdContextValue = SharedContextValue & {};
@@ -39,7 +40,7 @@ type AccessibilityEvents = Exclude<AccessibilityChangeEventName, 'change'>;
 
 type AccessibilityInfoKey = Exclude<
   keyof AMAContextValue,
-  'reactNavigationScreenOptions' | 'trackError' | 'removeError'
+  'reactNavigationScreenOptions' | 'trackError'
 >;
 
 type Extractor<S extends AccessibilityEvents> = S extends `${infer R}Changed`
@@ -57,10 +58,12 @@ const eventsMapping: AccessibilityInfoEvents = {
   boldTextChanged: 'isBoldTextEnabled',
   invertColorsChanged: 'isInvertColorsEnabled',
   screenReaderChanged: 'isScreenReaderEnabled',
+  highTextContrastChanged: 'isHighTextContrastEnabled',
+  darkerSystemColorsChanged: 'isDarkerSystemColorsEnabled',
 };
 
 export const isDevContextValue = (
-  value: AMAContextValue,
+  value: AMAContextValue
 ): value is AMADevContextValue =>
   (value as AMADevContextValue).trackError !== undefined;
 
@@ -71,6 +74,8 @@ const DEFAULT_VALUES = {
   isInvertColorsEnabled: false,
   isReduceMotionEnabled: false,
   isScreenReaderEnabled: false,
+  isHighTextContrastEnabled: false,
+  isDarkerSystemColorsEnabled: false,
   reactNavigationScreenOptions: {
     animationEnabled: true,
     animation: 'default',
@@ -79,12 +84,28 @@ const DEFAULT_VALUES = {
 
 const AMAContext = React.createContext<AMAContextValue | null>(null);
 
+type AMAErrorOverlayModule = typeof import('../internals/components/AMAErrorOverlay');
+type UseAMADevModule = {
+  useAMADev: UseAMADev | null;
+};
+
+const AMAErrorOverlay = __DEV__
+  ? (require('../internals/components/AMAErrorOverlay') as AMAErrorOverlayModule)
+      .AMAErrorOverlay
+  : null;
+
+const useAMADev = __DEV__
+  ? (require('../internals/useAMADev') as UseAMADevModule).useAMADev
+  : null;
+
 export const AMAProvider: React.FC<AMAProviderProps> = ({ children }) => {
   const [values, setValues] = React.useState<AMAContextValue>(DEFAULT_VALUES);
 
+  const { issues, trackError } = (__DEV__ && useAMADev?.()) || {};
+
   const handleAccessibilityInfoChanged = (key: AccessibilityInfoKey) => {
     return (newValue: boolean) => {
-      setValues(oldValues => {
+      setValues((oldValues) => {
         const newValues = { ...oldValues };
         newValues[key] = newValue;
 
@@ -107,27 +128,27 @@ export const AMAProvider: React.FC<AMAProviderProps> = ({ children }) => {
     const allInitPromises: Promise<boolean>[] = [];
 
     const subscriptions: NativeEventSubscription[] = Object.entries(
-      eventsMapping,
+      eventsMapping
     ).map(([eventName, contextKey]) => {
       allInitPromises.push(AccessibilityInfo[contextKey]());
 
       return AccessibilityInfo.addEventListener(
         eventName as AccessibilityEvents,
-        handleAccessibilityInfoChanged(contextKey),
+        handleAccessibilityInfoChanged(contextKey)
       );
     });
 
-    Promise.all(allInitPromises).then(promisesValues => {
+    Promise.all(allInitPromises).then((promisesValues) => {
       const newValues = Object.values(eventsMapping).reduce(
         (list, key, index) => {
           list[key] = promisesValues[index] as boolean;
 
           return list;
         },
-        {} as AMAContextValue,
+        {} as AMAContextValue
       );
 
-      setValues(oldValues => {
+      setValues((oldValues) => {
         return {
           ...oldValues,
           ...newValues,
@@ -136,52 +157,22 @@ export const AMAProvider: React.FC<AMAProviderProps> = ({ children }) => {
     });
 
     return () => {
-      subscriptions.forEach(subscription => subscription?.remove());
+      subscriptions.forEach((subscription) => subscription?.remove());
     };
   }, []);
 
-  const [failedItems, setFailedItems] = React.useState<string[]>([]);
-
   if (__DEV__) {
-    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,
-        }}>
+          trackError: trackError || (() => { }),
+        }}
+      >
         <View style={{ flex: 1 }}>
           <>
             {children}
-            {failedItems.length > 0 ? (
-              <AMAError count={failedItems.length} />
-            ) : null}
+            {AMAErrorOverlay && <AMAErrorOverlay issues={issues} />}
           </>
         </View>
       </AMAContext.Provider>
@@ -191,36 +182,9 @@ export const AMAProvider: React.FC<AMAProviderProps> = ({ children }) => {
   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 />');
   }

package/src/components/AutofocusContainer.test.tsx

@@ -1,6 +1,5 @@
 import { render, waitFor } from '@testing-library/react-native';
 import * as React from 'react';
-
 import * as UseFocus from '../hooks/useFocus';
 import { AutofocusContainer } from './AutofocusContainer';
 
@@ -9,7 +8,7 @@ beforeEach(() => {
 });
 
 describe('AutofocusContainer', () => {
-  it('it call setFocus when gets rendered', async () => {
+  it('call setFocus when gets rendered', async () => {
     const setFocus = jest.fn();
     jest.spyOn(UseFocus, 'useFocus').mockReturnValue({
       setFocus,
@@ -21,7 +20,7 @@ describe('AutofocusContainer', () => {
       </AutofocusContainer>,
     );
 
-    await waitFor(() => expect(setFocus).toBeCalled());
+    await waitFor(() => expect(setFocus).toHaveBeenCalled());
   });
 
   it.each([undefined, true])(
@@ -38,7 +37,7 @@ describe('AutofocusContainer', () => {
         </AutofocusContainer>,
       );
 
-      await waitFor(() => expect(setFocus).toBeCalled());
+      await waitFor(() => expect(setFocus).toHaveBeenCalled());
 
       expect(
         renderAPI.getByTestId('autofocusContainer.accessibleView'),
@@ -58,7 +57,7 @@ describe('AutofocusContainer', () => {
       </AutofocusContainer>,
     );
 
-    await waitFor(() => expect(setFocus).toBeCalled());
+    await waitFor(() => expect(setFocus).toHaveBeenCalled());
 
     expect(
       renderAPI.queryByTestId('autofocusContainer.accessibleView'),

package/src/components/AutofocusContainer.tsx

@@ -5,9 +5,21 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-
 import { useFocus } from '../hooks/useFocus';
-import { PickAccessibleProps } from '@react-native-ama/internal';
+
+type AccessibilityPropKeys =
+  | 'accessibilityActions'
+  | 'accessibilityElementsHidden'
+  | 'accessibilityHint'
+  | 'accessibilityLabel'
+  | 'accessibilityLiveRegion'
+  | 'accessibilityRole'
+  | 'accessibilityState'
+  | 'accessibilityViewIsModal'
+  | 'onAccessibilityAction'
+  | 'testID';
+
+type PickAccessibleProps<T> = Pick<T, Extract<keyof T, AccessibilityPropKeys>>;
 
 type TouchableAccessibleProps =
   PickAccessibleProps<TouchableWithoutFeedbackProps>;
@@ -46,18 +58,21 @@ export const AutofocusContainer = ({
   return wrapChildrenInAccessibleView ? (
     <TouchableWithoutFeedback
       ref={containerRef}
-      {...touchableContainerAccessibilityProps}>
+      {...touchableContainerAccessibilityProps}
+    >
       <View
         accessible={true}
         testID="autofocusContainer.accessibleView"
-        {...viewProps}>
+        {...viewProps}
+      >
         {children}
       </View>
     </TouchableWithoutFeedback>
   ) : (
     <TouchableWithoutFeedback
       ref={containerRef}
-      {...touchableContainerAccessibilityProps}>
+      {...touchableContainerAccessibilityProps}
+    >
       {children}
     </TouchableWithoutFeedback>
   );

package/src/components/HideChildrenFromAccessibilityTree.test.tsx

@@ -1,33 +1,39 @@
-/* eslint-disable jest/no-disabled-tests */
 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 { Pressable, Text } from 'react-native';
-
 import { AMAProvider } from './AMAProvider';
 import { HideChildrenFromAccessibilityTree } from './HideChildrenFromAccessibilityTree';
 
+jest.mock('./AMAProvider', () => {
+  const originalModule = jest.requireActual('./AMAProvider');
+  return {
+    ...originalModule,
+    useAMAContext: jest.fn().mockReturnValue({ isScreenReaderEnabled: true }),
+  };
+});
+
+let useAMAContext: jest.Mock;
+
 beforeEach(() => {
   jest.clearAllMocks();
+  useAMAContext = jest.requireMock('./AMAProvider').useAMAContext;
+  useAMAContext.mockReturnValue({ isScreenReaderEnabled: true });
 });
 
-describe.skip('HideChildrenFromAccessibilityTree', () => {
+describe('HideChildrenFromAccessibilityTree', () => {
   describe('iOS', () => {
     beforeEach(() => {
-      const Platform = jest.requireActual(
-        'react-native/Libraries/Utilities/Platform',
-      );
-
-      Platform.select = (params: any) => {
-        return params.ios;
-      };
+      const rn = jest.requireMock('react-native');
+      rn.Platform.OS = 'ios';
+      rn.Platform.select = (params: any) => params.ios ?? params.default;
     });
 
     it('hides all the children from the accessibility tree when the screen reader is enabled', async () => {
       const { getByTestId } = await renderHideChildrenFromAccessibilityTree();
 
       ['test-text', 'test-button', 'nested-text'].forEach(testID => {
-        expect(getByTestId(testID).props).toEqual(
+        expect(getByTestId(testID, { includeHiddenElements: true }).props).toEqual(
           expect.objectContaining({
             importantForAccessibility: 'no',
             accessibilityElementsHidden: true,
@@ -36,7 +42,7 @@ describe.skip('HideChildrenFromAccessibilityTree', () => {
       });
     });
 
-    it('does nothing if the SR is turned off %s', async () => {
+    it('does nothing if the SR is turned off', async () => {
       const { getByTestId } = await renderHideChildrenFromAccessibilityTree({
         isScreenReaderEnabled: false,
       });
@@ -45,7 +51,6 @@ describe.skip('HideChildrenFromAccessibilityTree', () => {
         expect(getByTestId(testID).props).not.toHaveProperty(
           'importantForAccessibility',
         );
-
         expect(getByTestId(testID).props).not.toHaveProperty(
           'accessibilityElementsHidden',
         );
@@ -55,26 +60,22 @@ describe.skip('HideChildrenFromAccessibilityTree', () => {
 
   describe('Android', () => {
     beforeEach(() => {
-      const Platform = jest.requireActual(
-        'react-native/Libraries/Utilities/Platform',
-      );
-
-      Platform.select = (params: any) => {
-        return params.default;
-      };
+      const rn = jest.requireMock('react-native');
+      rn.Platform.OS = 'android';
+      rn.Platform.select = (params: any) => params.default ?? params.android;
     });
 
     it('hides all the children from the accessibility tree when the screen reader is enabled', async () => {
       const { getByTestId } = await renderHideChildrenFromAccessibilityTree();
 
-      expect(getByTestId('test-wrapper').props).toEqual(
+      expect(getByTestId('test-wrapper', { includeHiddenElements: true }).props).toEqual(
         expect.objectContaining({
           importantForAccessibility: 'no-hide-descendants',
         }),
       );
     });
 
-    it('does nothing if the SR is turned off %s', async () => {
+    it('does nothing if the SR is turned off', async () => {
       const { queryByTestId } = await renderHideChildrenFromAccessibilityTree({
         isScreenReaderEnabled: false,
       });
@@ -110,20 +111,3 @@ const renderHideChildrenFromAccessibilityTree = async (params?: {
 
   return renderAPI;
 };
-
-let useAMAContext: jest.Mock;
-
-function mockAMAProvider() {
-  const originalModule = jest.requireActual('./AMAProvider');
-
-  useAMAContext = jest.fn().mockReturnValue({
-    isScreenReaderEnabled: true,
-  });
-
-  return {
-    ...originalModule,
-    useAMAContext,
-  };
-}
-
-jest.mock('./AMAProvider', () => mockAMAProvider());

package/src/components/HideChildrenFromAccessibilityTree.tsx

@@ -1,6 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, type JSX } from 'react';
 import { Platform, View } from 'react-native';
-
 import { useAMAContext } from './AMAProvider';
 
 type HideChildrenFromAccessibilityTreeProps = {
@@ -39,17 +38,19 @@ const HideChildrenFromAccessibilityTreeIOS = ({
   return hideChildrenFromAccessibilityTree(children);
 };
 
-const hideChildrenFromAccessibilityTree = (component: React.ReactNode): any => {
+const hideChildrenFromAccessibilityTree = (component: React.ReactNode): React.ReactNode => {
   return (
     React.Children.map(component, child => {
-      return React.isValidElement(child)
-        ? React.cloneElement(child, {
-            // @ts-ignore
-            importantForAccessibility: 'no',
-            accessibilityElementsHidden: true,
-            children: hideChildrenFromAccessibilityTree(child.props.children),
-          })
-        : child;
+      if (React.isValidElement(child)) {
+        const element = child as React.ReactElement<{ children?: React.ReactNode }>;
+        return React.cloneElement(element, {
+          // @ts-ignore
+          importantForAccessibility: 'no',
+          accessibilityElementsHidden: true,
+          children: hideChildrenFromAccessibilityTree(element.props.children),
+        });
+      }
+      return child;
     }) || null
   );
 };

package/src/hooks/useFocus.test.ts

@@ -1,16 +1,29 @@
-import { SHELL_COLORS } from '@react-native-ama/internal';
 import { renderHook } from '@testing-library/react-native';
-
 import { useFocus } from './useFocus';
 
+const SHELL_COLORS = {
+  BG_RED: '\x1b[41m',
+  RESET: '\x1b[0m',
+  BLUE: '\x1b[34m',
+  YELLOW: '\x1b[33m',
+};
+
+let findNodeHandleMock: jest.Mock;
+let setAccessibilityFocusMock: jest.Mock;
+
 beforeEach(() => {
+  jest.useFakeTimers();
   jest.clearAllMocks();
-
   jest.spyOn(console, 'warn').mockImplementation();
+
+  const rn = jest.requireMock('react-native');
+  findNodeHandleMock = rn.findNodeHandle;
+  setAccessibilityFocusMock = rn.AccessibilityInfo.setAccessibilityFocus;
 });
 
-let findNodeHandleMock: jest.Mock;
-let setAccessibilityFocusMock: jest.Mock;
+afterEach(() => {
+  jest.useRealTimers();
+});
 
 describe('useFocus', () => {
   it.each([null, undefined])('does nothing if the Ref is %s', refElement => {
@@ -24,6 +37,7 @@ describe('useFocus', () => {
     findNodeHandleMock.mockReturnValue('element-id');
 
     renderHook(() => useFocus({ current: 'test-element' }));
+    jest.runAllTimers();
 
     expect(findNodeHandleMock).toHaveBeenCalledWith('test-element');
     expect(setAccessibilityFocusMock).toHaveBeenNthCalledWith(1, 'element-id');
@@ -70,6 +84,7 @@ describe('useFocus', () => {
     const { result } = renderHook(() => useFocus());
 
     result.current.setFocus('component' as any);
+    jest.runAllTimers();
 
     expect(findNodeHandleMock).toHaveBeenCalledWith('component');
     expect(setAccessibilityFocusMock).toHaveBeenNthCalledWith(
@@ -82,18 +97,3 @@ describe('useFocus', () => {
     );
   });
 });
-
-function mockReactNative() {
-  findNodeHandleMock = jest.fn();
-  setAccessibilityFocusMock = jest.fn();
-
-  return {
-    findNodeHandle: findNodeHandleMock,
-    AccessibilityInfo: {
-      setAccessibilityFocus: setAccessibilityFocusMock,
-    },
-    Platform: {},
-  };
-}
-
-jest.mock('react-native', () => mockReactNative());

package/src/hooks/useFocus.ts

@@ -1,11 +1,19 @@
-import { SHELL_COLORS } from '@react-native-ama/internal';
 import * as React from 'react';
 import {
   AccessibilityInfo,
-  InteractionManager,
   findNodeHandle,
+  InteractionManager,
 } from 'react-native';
 
+const SHELL_COLORS = __DEV__
+  ? {
+      BG_RED: '\x1b[41m',
+      RESET: '\x1b[0m',
+      BLUE: '\x1b[34m',
+      YELLOW: '\x1b[33m',
+    }
+  : null;
+
 export const useFocus = (refComponent?: React.RefObject<any>) => {
   const setFocus = React.useCallback(
     (
@@ -13,7 +21,7 @@ export const useFocus = (refComponent?: React.RefObject<any>) => {
         | null
         | number
         | React.Component<any, any>
-        | React.ComponentClass<any>,
+        | React.ComponentClass<any>
     ) => {
       if (!component) {
         return;
@@ -31,7 +39,7 @@ export const useFocus = (refComponent?: React.RefObject<any>) => {
           } 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}`,
+              `${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) {
@@ -39,13 +47,13 @@ export const useFocus = (refComponent?: React.RefObject<any>) => {
             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,
+              error
             );
           }
         }
       });
     },
-    [],
+    []
   );
 
   React.useEffect(() => {

package/src/hooks/useTimedAction.android.test.ts

@@ -1,6 +1,5 @@
 import { renderHook } from '@testing-library/react-native';
 import { AccessibilityInfo, Platform } from 'react-native';
-
 import * as AMAProvider from '../components/AMAProvider';
 import { useTimedAction } from './useTimedAction';
 

package/src/hooks/useTimedAction.ios.test.ts

@@ -1,6 +1,5 @@
 import { renderHook } from '@testing-library/react-native';
 import { Platform } from 'react-native';
-
 import * as AMAProvider from '../components/AMAProvider';
 import { useTimedAction } from './useTimedAction';
 

package/src/hooks/useTimedAction.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { AccessibilityInfo, Platform } from 'react-native';
-
 import { useAMAContext } from '../components/AMAProvider';
 
 export const useTimedAction = () => {

package/src/index.ts

@@ -13,7 +13,9 @@ export {
 export { HideChildrenFromAccessibilityTree } from './components/HideChildrenFromAccessibilityTree';
 
 // Hooks
-export { useButtonChecks } from './hooks/useButtonChecks';
-export { useChecks } from './hooks/useChecks';
 export { useFocus } from './hooks/useFocus';
 export { useTimedAction } from './hooks/useTimedAction';
+
+export { default } from './ReactNativeAmaModule';
+export { default as ReactNativeAmaView } from './ReactNativeAmaView';
+export * from './ReactNativeAma.types';