@react-native-ama/core 0.0.1 → 1.0.0

package/src/components/AMAProvider.tsx

@@ -0,0 +1,229 @@
+/* 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',
+};
+
+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 (__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,
+        }}>
+        <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.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ViewProps } from 'react-native';
+type AutofocusContainerProps = React.PropsWithChildren<({
+    wrapChildrenInAccessibleView?: true;
+} & ViewProps) | {
+    wrapChildrenInAccessibleView: false;
+}>;
+export declare const AutofocusContainer: ({ children, wrapChildrenInAccessibleView, ...viewProps }: AutofocusContainerProps) => React.JSX.Element;
+export {};

package/src/components/AutofocusContainer.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutofocusContainer = void 0;
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const useFocus_1 = require("../hooks/useFocus");
+const AutofocusContainer = (_a) => {
+    var { children, wrapChildrenInAccessibleView = true } = _a, viewProps = __rest(_a, ["children", "wrapChildrenInAccessibleView"]);
+    const containerRef = React.useRef(null);
+    const { setFocus } = (0, useFocus_1.useFocus)();
+    React.useEffect(() => {
+        setTimeout(() => {
+            setFocus(containerRef.current);
+        }, 0);
+    }, [setFocus]);
+    return wrapChildrenInAccessibleView ? (<react_native_1.TouchableWithoutFeedback ref={containerRef}>
+      <react_native_1.View accessible={true} testID="autofocusContainer.accessibleView" {...viewProps}>
+        {children}
+      </react_native_1.View>
+    </react_native_1.TouchableWithoutFeedback>) : (<react_native_1.TouchableWithoutFeedback ref={containerRef}>
+      {children}
+    </react_native_1.TouchableWithoutFeedback>);
+};
+exports.AutofocusContainer = AutofocusContainer;

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>
+  );
+};

package/src/components/HideChildrenFromAccessibilityTree.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+type HideChildrenFromAccessibilityTreeProps = {
+    testID?: string;
+};
+export declare const HideChildrenFromAccessibilityTree: (props: PropsWithChildren<HideChildrenFromAccessibilityTreeProps>) => JSX.Element;
+export {};

package/src/components/HideChildrenFromAccessibilityTree.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HideChildrenFromAccessibilityTree = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const AMAProvider_1 = require("./AMAProvider");
+const HideChildrenFromAccessibilityTree = (props) => {
+    const { isScreenReaderEnabled } = (0, AMAProvider_1.useAMAContext)();
+    if (!isScreenReaderEnabled) {
+        return <>{props.children}</>;
+    }
+    return react_native_1.Platform.select({
+        default: <HideChildrenFromAccessibilityAndroid {...props}/>,
+        ios: <HideChildrenFromAccessibilityTreeIOS {...props}/>,
+    });
+};
+exports.HideChildrenFromAccessibilityTree = HideChildrenFromAccessibilityTree;
+const HideChildrenFromAccessibilityAndroid = ({ children, testID, }) => {
+    return (<react_native_1.View importantForAccessibility="no-hide-descendants" testID={testID}>
+      {children}
+    </react_native_1.View>);
+};
+const HideChildrenFromAccessibilityTreeIOS = ({ children, }) => {
+    return hideChildrenFromAccessibilityTree(children);
+};
+const hideChildrenFromAccessibilityTree = (component) => {
+    return (react_1.default.Children.map(component, child => {
+        return react_1.default.isValidElement(child)
+            ? react_1.default.cloneElement(child, {
+                // @ts-ignore
+                importantForAccessibility: 'no',
+                accessibilityElementsHidden: true,
+                children: hideChildrenFromAccessibilityTree(child.props.children),
+            })
+            : child;
+    }) || null);
+};

package/src/components/HideChildrenFromAccessibilityTree.test.tsx

@@ -0,0 +1,129 @@
+/* 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';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe.skip('HideChildrenFromAccessibilityTree', () => {
+  describe('iOS', () => {
+    beforeEach(() => {
+      const Platform = jest.requireActual(
+        'react-native/Libraries/Utilities/Platform',
+      );
+
+      Platform.select = (params: any) => {
+        return params.ios;
+      };
+    });
+
+    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.objectContaining({
+            importantForAccessibility: 'no',
+            accessibilityElementsHidden: true,
+          }),
+        );
+      });
+    });
+
+    it('does nothing if the SR is turned off %s', async () => {
+      const { getByTestId } = await renderHideChildrenFromAccessibilityTree({
+        isScreenReaderEnabled: false,
+      });
+
+      ['test-text', 'test-button', 'nested-text'].forEach(testID => {
+        expect(getByTestId(testID).props).not.toHaveProperty(
+          'importantForAccessibility',
+        );
+
+        expect(getByTestId(testID).props).not.toHaveProperty(
+          'accessibilityElementsHidden',
+        );
+      });
+    });
+  });
+
+  describe('Android', () => {
+    beforeEach(() => {
+      const Platform = jest.requireActual(
+        'react-native/Libraries/Utilities/Platform',
+      );
+
+      Platform.select = (params: any) => {
+        return params.default;
+      };
+    });
+
+    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.objectContaining({
+          importantForAccessibility: 'no-hide-descendants',
+        }),
+      );
+    });
+
+    it('does nothing if the SR is turned off %s', async () => {
+      const { queryByTestId } = await renderHideChildrenFromAccessibilityTree({
+        isScreenReaderEnabled: false,
+      });
+
+      expect(queryByTestId('test-wrapper')).toBeNull();
+    });
+  });
+});
+
+const renderHideChildrenFromAccessibilityTree = async (params?: {
+  isScreenReaderEnabled: boolean;
+}) => {
+  useAMAContext.mockReturnValue({
+    isScreenReaderEnabled: params?.isScreenReaderEnabled ?? true,
+  });
+
+  const renderAPI = render(
+    <AMAProvider>
+      <HideChildrenFromAccessibilityTree testID="test-wrapper">
+        <Text testID="test-text">Test here</Text>
+        <>
+          <Pressable testID="test-button">
+            <Text testID="nested-text">Press me</Text>
+          </Pressable>
+        </>
+      </HideChildrenFromAccessibilityTree>
+    </AMAProvider>,
+  );
+
+  await act(async () => {
+    await flushMicroTasks();
+  });
+
+  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

@@ -0,0 +1,55 @@
+import React, { PropsWithChildren } from 'react';
+import { Platform, View } from 'react-native';
+
+import { useAMAContext } from './AMAProvider';
+
+type HideChildrenFromAccessibilityTreeProps = {
+  testID?: string;
+};
+
+export const HideChildrenFromAccessibilityTree = (
+  props: PropsWithChildren<HideChildrenFromAccessibilityTreeProps>,
+): JSX.Element => {
+  const { isScreenReaderEnabled } = useAMAContext();
+
+  if (!isScreenReaderEnabled) {
+    return <>{props.children}</>;
+  }
+
+  return Platform.select({
+    default: <HideChildrenFromAccessibilityAndroid {...props} />,
+    ios: <HideChildrenFromAccessibilityTreeIOS {...props} />,
+  });
+};
+
+const HideChildrenFromAccessibilityAndroid = ({
+  children,
+  testID,
+}: PropsWithChildren<HideChildrenFromAccessibilityTreeProps>) => {
+  return (
+    <View importantForAccessibility="no-hide-descendants" testID={testID}>
+      {children}
+    </View>
+  );
+};
+
+const HideChildrenFromAccessibilityTreeIOS = ({
+  children,
+}: PropsWithChildren<{}>) => {
+  return hideChildrenFromAccessibilityTree(children);
+};
+
+const hideChildrenFromAccessibilityTree = (component: React.ReactNode): any => {
+  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;
+    }) || null
+  );
+};

package/src/hooks/useButtonChecks.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+import type { PressableStateCallbackType } from 'react-native';
+export declare const useButtonChecks: ((props: Record<string, any>, children?: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode), shouldPerformContrastCheck?: boolean) => {
+    onLayout: (event: import("react-native").LayoutChangeEvent) => void;
+    debugStyle: any[] | ((...params: any) => any) | {
+        [x: string]: any;
+    } | undefined;
+} | null) | null;