@react-native-ama/core 0.0.1 → 0.0.2

package/src/components/HideChildrenFromAccessibilityTree.test.tsx

@@ -0,0 +1,128 @@
+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('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.ts

@@ -0,0 +1,73 @@
+import { applyStyle } from '@react-native-ama/internal';
+import type React from 'react';
+import type { PressableStateCallbackType } from 'react-native';
+
+import { useChecks } from './useChecks';
+
+export const useButtonChecks = __DEV__
+  ? (
+      props: Record<string, any>,
+      children?:
+        | React.ReactNode
+        | ((state: PressableStateCallbackType) => React.ReactNode)
+        | undefined,
+      shouldPerformContrastCheck: boolean = true,
+    ) => {
+      const checks = useChecks();
+      if (checks === null) {
+        return null;
+      }
+      const {
+        noUndefinedProperty,
+        contrastChecker,
+        onLayout,
+        noUppercaseStringChecker,
+        checkCompatibleAccessibilityState,
+        checkAccessibilityRole,
+        debugStyle,
+      } = checks;
+
+      let style = props.style || {};
+
+      const isAccessible = props.accessible !== false;
+
+      isAccessible &&
+        noUndefinedProperty({
+          properties: props,
+          property: 'accessibilityRole',
+          rule: 'NO_ACCESSIBILITY_ROLE',
+        });
+      isAccessible &&
+        noUndefinedProperty({
+          properties: props,
+          property: 'accessibilityLabel',
+          rule: 'NO_ACCESSIBILITY_LABEL',
+        });
+      isAccessible &&
+        noUppercaseStringChecker({
+          text: props.accessibilityLabel,
+        });
+      checkCompatibleAccessibilityState({
+        accessibilityStates: props?.accessibilityState,
+        accessibilityRole: props?.accessiblityRole,
+      });
+      checkAccessibilityRole(props.accessibilityRole);
+
+      const contrastCheckerCallback = shouldPerformContrastCheck
+        ? contrastChecker
+        : undefined;
+
+      const theStyle = applyStyle?.({
+        style,
+        debugStyle,
+        // @ts-ignore
+        children,
+        contrastCheckerCallback,
+      });
+
+      return {
+        onLayout,
+        debugStyle: theStyle,
+      };
+    }
+  : null;

package/src/hooks/useChecks.test.ts

@@ -0,0 +1,214 @@
+import * as Logger from '@react-native-ama/internal';
+import { type RuleAction } from '@react-native-ama/internal';
+import * as CheckForAccessibilityRole from '@react-native-ama/internal/src/checks/checkAccessibilityRole';
+import * as CheckForAccessibilityState from '@react-native-ama/internal/src/checks/checkForAccessibilityState';
+import { renderHook } from '@testing-library/react-native';
+
+import * as AMAProvider from '../components/AMAProvider';
+import { useChecks } from './useChecks';
+
+const trackError = jest.fn();
+const removeError = jest.fn();
+
+beforeEach(() => {
+  jest.clearAllMocks();
+
+  jest.spyOn(console, 'warn').mockImplementation();
+  jest.spyOn(console, 'error').mockImplementation();
+  jest.spyOn(console, 'info').mockImplementation();
+
+  jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+    trackError,
+    removeError,
+  } as any);
+});
+
+describe('useChecks', () => {
+  it.each(['MUST_NOT', 'MUST'])(
+    'tracks the error only if the rule is %s',
+    ruleValue => {
+      jest
+        // @ts-ignore
+        .spyOn(Logger, 'getRuleAction')
+        // @ts-ignore
+        .mockReturnValue(ruleValue as RuleAction);
+
+      const { result } = renderHook(() => useChecks());
+
+      result.current?.logResult('test-me', {
+        rule: 'NO_UNDEFINED',
+        extra: 'extra',
+        message: 'message',
+      });
+
+      expect(trackError).toHaveBeenCalledTimes(1);
+      expect(trackError).toHaveBeenCalledWith(expect.any(String));
+    },
+  );
+
+  it.each(['SHOULD', 'SHOULD_NOT'])(
+    'does not track the error if the rule is %s',
+    ruleValue => {
+      const spy = jest.spyOn(console, 'warn');
+
+      jest
+        // @ts-ignore
+        .spyOn(Logger, 'getRuleAction')
+        // @ts-ignore
+        .mockReturnValue(ruleValue as RuleAction);
+
+      const { result } = renderHook(() => useChecks());
+
+      result.current?.logResult('test-me', {
+        rule: 'NO_UNDEFINED',
+        extra: 'extra',
+        message: 'message',
+      });
+
+      expect(trackError).not.toHaveBeenCalled();
+
+      expect(spy).toHaveBeenCalled();
+    },
+  );
+
+  it.each(['MUST_NOT', 'MUST'])(
+    'tracks the same error only once',
+    ruleValue => {
+      jest
+        // @ts-ignore
+        .spyOn(Logger, 'getRuleAction')
+        // @ts-ignore
+        .mockReturnValue(ruleValue as RuleAction);
+
+      const { result } = renderHook(() => useChecks());
+
+      result.current?.logResult('test-me', {
+        rule: 'NO_UNDEFINED',
+        extra: 'extra',
+        message: 'message',
+      });
+
+      expect(trackError).toHaveBeenCalledTimes(1);
+
+      trackError.mockClear();
+
+      result.current?.logResult('test-me', {
+        rule: 'NO_UNDEFINED',
+        extra: 'extra',
+        message: 'message',
+      });
+
+      expect(trackError).toHaveBeenCalledTimes(0);
+    },
+  );
+
+  it('removes the tracked error after has been fixed', () => {
+    // @ts-ignore
+    jest.spyOn(Logger, 'getRuleAction').mockReturnValue('MUST');
+
+    const { result } = renderHook(() => useChecks());
+
+    result.current?.logResult('test-me', {
+      rule: 'NO_UNDEFINED',
+      extra: 'extra',
+      message: 'message',
+    });
+
+    expect(trackError).toHaveBeenCalledWith(expect.any(String));
+
+    result.current?.logResult('test-me', null);
+
+    expect(removeError).toHaveBeenCalledWith(trackError.mock.calls[0][0]);
+  });
+
+  it('checks for compatible accessibility state', () => {
+    const check = jest
+      .spyOn(CheckForAccessibilityState, 'checkForAccessibilityState')
+      .mockReturnValue(null);
+    const { result } = renderHook(() => useChecks());
+
+    result.current?.checkCompatibleAccessibilityState({
+      hello: 'world',
+      busy: true,
+      checked: 'wow',
+      accessibilityRole: 'button',
+    });
+
+    expect(check).toHaveBeenCalledWith({
+      accessibilityRole: 'button',
+      accessibilityState: undefined,
+      checked: 'wow',
+    });
+  });
+
+  it('checks for compatible accessibility state when accessibilityState is passed', () => {
+    const check = jest
+      .spyOn(CheckForAccessibilityState, 'checkForAccessibilityState')
+      .mockReturnValue(null);
+    const { result } = renderHook(() => useChecks());
+
+    result.current?.checkCompatibleAccessibilityState({
+      hello: 'world',
+      checked: false,
+      accessibilityState: {
+        selected: 'yeah',
+      },
+      accessibilityRole: 'button',
+    });
+
+    expect(check).toHaveBeenCalledWith({
+      accessibilityRole: 'button',
+      accessibilityState: {
+        selected: 'yeah',
+      },
+      checked: false,
+    });
+  });
+
+  it('checks for compatible accessibility role', () => {
+    const check = jest
+      .spyOn(CheckForAccessibilityRole, 'checkAccessibilityRole')
+      .mockReturnValue(null);
+    const { result } = renderHook(() => useChecks());
+
+    result.current?.checkAccessibilityRole('button');
+
+    expect(check).toHaveBeenCalledWith('button');
+  });
+});
+
+jest.mock('react-native', () => {
+  const ReactNative = jest.requireActual('react-native');
+
+  // Extend ReactNative
+  return Object.setPrototypeOf(
+    {
+      // Redefine an export, like a component
+      Button: 'Button',
+      // Mock out properties of an already mocked export
+      LayoutAnimation: {
+        ...ReactNative.LayoutAnimation,
+        configureNext: jest.fn(),
+      },
+      Platform: {
+        ...ReactNative.Platform,
+        OS: 'ios',
+        Version: 123,
+        isTesting: true,
+        select: (objs: { ios: any }) => objs.ios,
+      },
+      // Mock a native module
+      NativeModules: {
+        ...ReactNative.NativeModules,
+        Override: { great: 'success' },
+      },
+      InteractionManager: {
+        // @ts-ignore
+        runAfterInteractions: callback => {
+          callback();
+        },
+      },
+    },
+    ReactNative,
+  );
+});

package/src/hooks/useChecks.ts

@@ -0,0 +1,207 @@
+import {
+  ERROR_STYLE,
+  LogParams,
+  checkAccessibilityRole as checkAccessibilityRoleImplementation,
+  checkFocusTrap as checkFocusTrapImplementation,
+  checkForAccessibilityState,
+  checkMinimumSize as checkMinimumSizeImplementation,
+  contrastChecker as contrastCheckerImplementation,
+  getRuleAction,
+  logFailure,
+  noUndefinedProperty as noUndefinedPropertyImplementation,
+  uppercaseStringChecker as noUppercaseStringCheckerImplementation,
+  uppercaseChecker as uppercaseCheckerImplementation,
+  type CheckFocusTrap,
+  type CheckForAccessibilityState,
+  type ContrastChecker,
+  type NoUndefinedProperty,
+  type UppercaseChecker,
+  type UppercaseStringChecker,
+} from '@react-native-ama/internal';
+import * as React from 'react';
+import {
+  AccessibilityRole,
+  InteractionManager,
+  LayoutChangeEvent,
+} from 'react-native';
+
+import { isDevContextValue, useAMAContext } from '../components/AMAProvider';
+
+export const useChecks = () => {
+  const context = useAMAContext();
+
+  if (!isDevContextValue(context)) {
+    return null;
+  }
+
+  /**
+   * Because the AMA Error view cannot be removed by default, this hacky solution
+   * allows the dev to hide it if all the issues have been solved.
+   */
+  const fakeRandom = React.useRef('' + Date.now() + Math.random() * 42);
+  const hasErrors = React.useRef(false);
+  const failedTests = React.useRef<string[]>([]);
+  const shouldCheckLayout = React.useRef(true);
+  const layoutCheckTimeout = React.useRef<NodeJS.Timeout>();
+  const [minimumSizeFailed, setMinimumSizeFailed] = React.useState(false);
+  const [debugStyle, setDebugStyle] = React.useState<any>({});
+
+  const { trackError, removeError } = context;
+
+  const logResult = (
+    name: string,
+    result: LogParams | LogParams[] | null,
+  ): Record<string, any> => {
+    const index = failedTests.current.indexOf(name);
+
+    if (result === null) {
+      if (index >= 0 && hasErrors.current) {
+        failedTests.current.splice(index);
+
+        hasErrors.current = false;
+
+        InteractionManager.runAfterInteractions(() => {
+          removeError(fakeRandom.current);
+
+          setTimeout(() => {
+            setDebugStyle({});
+          }, 100);
+        });
+      }
+    }
+
+    const results = Array.isArray(result) ? result : [result];
+
+    results.forEach(logParam => {
+      if (logParam === null) {
+        return;
+      }
+
+      const action = getRuleAction?.(logParam.rule);
+      const hasFailed = action === 'MUST_NOT' || action === 'MUST';
+
+      if (index < 0) {
+        // @ts-ignore
+        logFailure?.({ action, ...logParam });
+      }
+
+      if (!hasFailed) {
+        return;
+      } else if (index >= 0) {
+        return;
+      }
+
+      failedTests.current.push(name);
+
+      InteractionManager.runAfterInteractions(() => {
+        trackError(fakeRandom.current);
+
+        setDebugStyle(ERROR_STYLE);
+      });
+
+      hasErrors.current = true;
+    });
+
+    // @ts-ignore
+    return hasErrors.current ? ERROR_STYLE : {};
+  };
+
+  const noUndefinedProperty = <T>(params: NoUndefinedProperty<T>) =>
+    logResult(
+      `noUndefinedProperty ${params.property as string}`,
+      noUndefinedPropertyImplementation(params),
+    );
+
+  const contrastChecker = (params: ContrastChecker) =>
+    logResult('contrastChecker', contrastCheckerImplementation(params));
+
+  const checkMinimumSize = (params: LayoutChangeEvent) => {
+    return logResult(
+      'checkMinimumSize',
+      checkMinimumSizeImplementation(params),
+    );
+  };
+
+  const noUppercaseStringChecker = (params: UppercaseStringChecker) =>
+    logResult(
+      'accessibilityLabelChecker',
+      noUppercaseStringCheckerImplementation(params),
+    );
+
+  const uppercaseChecker = (params: UppercaseChecker) =>
+    logResult('uppercaseChecker', uppercaseCheckerImplementation(params));
+
+  const checkFocusTrap = (params: CheckFocusTrap) => {
+    checkFocusTrapImplementation(params).then(result => {
+      logResult('checkFocusTrap', result);
+    });
+  };
+
+  const checkAccessibilityRole = (param: AccessibilityRole) => {
+    logResult(
+      'checkAccessibilityRole',
+      checkAccessibilityRoleImplementation(param),
+    );
+  };
+
+  const checkCompatibleAccessibilityState = (props: Record<string, any>) => {
+    const amaStates = ['checked', 'selected'];
+
+    const params: CheckForAccessibilityState = {
+      accessibilityRole: props.accessibilityRole,
+      accessibilityState: props?.accessibilityState,
+    };
+
+    amaStates.forEach(amaState => {
+      if (amaState in props) {
+        // @ts-ignore
+        params[amaState] = props[amaState];
+      }
+    });
+
+    logResult(
+      'checkCompatibleAccessibilityState',
+      checkForAccessibilityState(params),
+    );
+  };
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    /**
+     * When the check fails there are situation when adding a border makes the
+     * component meet the minimum size requirement, and this causes a loop as the
+     * state is update continuously between true and false.
+     * To "avoid" that we wait at least 100ms before checking the size again, as
+     * this gives the dev time to hot-reload the changes.
+     */
+    if (!shouldCheckLayout.current) {
+      return;
+    }
+
+    shouldCheckLayout.current = false;
+
+    // @ts-ignore
+    clearTimeout(layoutCheckTimeout.current);
+
+    layoutCheckTimeout.current = setTimeout(() => {
+      shouldCheckLayout.current = true;
+    }, 1000);
+
+    const result = checkMinimumSize(event);
+
+    setMinimumSizeFailed(Object.keys(result).length > 0);
+  };
+
+  return {
+    logResult,
+    noUndefinedProperty,
+    contrastChecker,
+    onLayout,
+    noUppercaseStringChecker,
+    uppercaseChecker,
+    checkFocusTrap,
+    minimumSizeFailed,
+    checkCompatibleAccessibilityState,
+    checkAccessibilityRole,
+    debugStyle,
+  };
+};