@react-native-ama/core 0.0.1 → 1.0.0

package/dist/{core/src/components → components}/AMAProvider.js

@@ -36,7 +36,6 @@ const eventsMapping = {
     invertColorsChanged: 'isInvertColorsEnabled',
     screenReaderChanged: 'isScreenReaderEnabled',
 };
-const isDev = __DEV__;
 const isDevContextValue = (value) => value.trackError !== undefined;
 exports.isDevContextValue = isDevContextValue;
 const DEFAULT_VALUES = {
@@ -89,7 +88,7 @@ const AMAProvider = ({ children }) => {
         };
     }, []);
     const [failedItems, setFailedItems] = React.useState([]);
-    if (isDev) {
+    if (__DEV__) {
         const trackError = (id) => {
             if (failedItems.includes(id)) {
                 return;

package/dist/{core/src/index.js → index.js}

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimedAction = exports.useFocus = exports.useChecks = exports.useButtonChecks = exports.useAMAContext = exports.AMAProvider = exports.HideChildrenFromAccessibilityTree = exports.AutofocusContainer = void 0;
+exports.useTimedAction = exports.useFocus = exports.useChecks = exports.useButtonChecks = exports.HideChildrenFromAccessibilityTree = exports.useAMAContext = exports.AMAProvider = exports.AutofocusContainer = void 0;
 // Components
 var AutofocusContainer_1 = require("./components/AutofocusContainer");
 Object.defineProperty(exports, "AutofocusContainer", { enumerable: true, get: function () { return AutofocusContainer_1.AutofocusContainer; } });
-var HideChildrenFromAccessibilityTree_1 = require("./components/HideChildrenFromAccessibilityTree");
-Object.defineProperty(exports, "HideChildrenFromAccessibilityTree", { enumerable: true, get: function () { return HideChildrenFromAccessibilityTree_1.HideChildrenFromAccessibilityTree; } });
 var AMAProvider_1 = require("./components/AMAProvider");
 Object.defineProperty(exports, "AMAProvider", { enumerable: true, get: function () { return AMAProvider_1.AMAProvider; } });
 Object.defineProperty(exports, "useAMAContext", { enumerable: true, get: function () { return AMAProvider_1.useAMAContext; } });
+var HideChildrenFromAccessibilityTree_1 = require("./components/HideChildrenFromAccessibilityTree");
+Object.defineProperty(exports, "HideChildrenFromAccessibilityTree", { enumerable: true, get: function () { return HideChildrenFromAccessibilityTree_1.HideChildrenFromAccessibilityTree; } });
 // Hooks
 var useButtonChecks_1 = require("./hooks/useButtonChecks");
 Object.defineProperty(exports, "useButtonChecks", { enumerable: true, get: function () { return useButtonChecks_1.useButtonChecks; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-ama/core",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "Accessible Mobile App Library for React Native",
   "private": false,
   "react-native": "src/index",
@@ -21,15 +21,16 @@
   ],
   "scripts": {
     "build": "rm -rf dist && tsc -p ./tsconfig.build.json",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "jest"
   },
-  "devDependencies": {
+  "dependencies": {
     "@react-native-ama/internal": "*"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
-  },  
+  },
   "keywords": [
     "react-native",
     "a11y",
@@ -48,6 +49,30 @@
     "provenance": true
   },
   "author": "",
-  "license": "MIT"
-
+  "license": "MIT",
+  "devDependencies": {
+    "babel-jest": "^29.7.0"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/node_modules",
+      "<rootDir>/dist/"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{ts,tsx}"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "statements": 90,
+        "branches": 82,
+        "functions": 83,
+        "lines": 91
+      }
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!(@react-native|react-native|react-native-reanimated/))"
+    ],
+    "verbose": true
+  }
 }

package/src/components/AMAProvider.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+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;
+export declare const isDevContextValue: (value: AMAContextValue) => value is AMADevContextValue;
+export declare const AMAProvider: React.FC<AMAProviderProps>;
+export declare const useAMAContext: () => AMAContextValue;
+export {};

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.js

@@ -0,0 +1,147 @@
+"use strict";
+/* eslint-disable react-native/no-inline-styles */
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAMAContext = exports.AMAProvider = exports.isDevContextValue = void 0;
+const internal_1 = require("@react-native-ama/internal");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const eventsMapping = {
+    reduceTransparencyChanged: 'isReduceTransparencyEnabled',
+    reduceMotionChanged: 'isReduceMotionEnabled',
+    grayscaleChanged: 'isGrayscaleEnabled',
+    boldTextChanged: 'isBoldTextEnabled',
+    invertColorsChanged: 'isInvertColorsEnabled',
+    screenReaderChanged: 'isScreenReaderEnabled',
+};
+const isDevContextValue = (value) => value.trackError !== undefined;
+exports.isDevContextValue = isDevContextValue;
+const DEFAULT_VALUES = {
+    isReduceTransparencyEnabled: false,
+    isBoldTextEnabled: false,
+    isGrayscaleEnabled: false,
+    isInvertColorsEnabled: false,
+    isReduceMotionEnabled: false,
+    isScreenReaderEnabled: false,
+    reactNavigationScreenOptions: {
+        animationEnabled: true,
+        animation: 'default',
+    },
+};
+const AMAContext = React.createContext(null);
+const AMAProvider = ({ children }) => {
+    const [values, setValues] = React.useState(DEFAULT_VALUES);
+    const handleAccessibilityInfoChanged = (key) => {
+        return (newValue) => {
+            setValues(oldValues => {
+                const newValues = Object.assign({}, oldValues);
+                newValues[key] = newValue;
+                if (key === 'isReduceMotionEnabled') {
+                    newValues.reactNavigationScreenOptions.animationEnabled = !newValue;
+                    newValues.reactNavigationScreenOptions.animation = newValue
+                        ? 'fade'
+                        : 'default';
+                }
+                return Object.assign(Object.assign({}, oldValues), newValues);
+            });
+        };
+    };
+    React.useEffect(() => {
+        const allInitPromises = [];
+        const subscriptions = Object.entries(eventsMapping).map(([eventName, contextKey]) => {
+            allInitPromises.push(react_native_1.AccessibilityInfo[contextKey]());
+            return react_native_1.AccessibilityInfo.addEventListener(eventName, handleAccessibilityInfoChanged(contextKey));
+        });
+        Promise.all(allInitPromises).then(promisesValues => {
+            const newValues = Object.values(eventsMapping).reduce((list, key, index) => {
+                list[key] = promisesValues[index];
+                return list;
+            }, {});
+            setValues(oldValues => {
+                return Object.assign(Object.assign({}, oldValues), newValues);
+            });
+        });
+        return () => {
+            subscriptions.forEach(subscription => subscription === null || subscription === void 0 ? void 0 : subscription.remove());
+        };
+    }, []);
+    const [failedItems, setFailedItems] = React.useState([]);
+    if (__DEV__) {
+        const trackError = (id) => {
+            if (failedItems.includes(id)) {
+                return;
+            }
+            setFailedItems(items => [...items, id]);
+            react_native_1.AccessibilityInfo.announceForAccessibility("One or more component didn't pass the accessibility check, please check the console for more info");
+        };
+        const removeError = (id) => {
+            setFailedItems(items => {
+                const index = items.indexOf(id);
+                if (index >= 0) {
+                    items.splice(index);
+                    return [...items];
+                }
+                return items;
+            });
+        };
+        return (<AMAContext.Provider value={Object.assign(Object.assign({}, values), { trackError,
+                removeError })}>
+        <react_native_1.View style={{ flex: 1 }}>
+          <>
+            {children}
+            {failedItems.length > 0 ? (<AMAError count={failedItems.length}/>) : null}
+          </>
+        </react_native_1.View>
+      </AMAContext.Provider>);
+    }
+    return <AMAContext.Provider value={values}>{children}</AMAContext.Provider>;
+};
+exports.AMAProvider = AMAProvider;
+const AMAError = ({ count }) => {
+    const error = `${count} component(s) didn't pass the accessibility check(s)`;
+    return (<react_native_1.View accessibilityLabel={error} accessibilityHint="Please check the console for more info..." style={{
+            paddingHorizontal: 24,
+            paddingTop: 24,
+            paddingBottom: 48,
+            backgroundColor: internal_1.RED,
+        }} testID="amaError">
+      <react_native_1.View accessible={true}>
+        <react_native_1.Text style={{ color: 'white', fontSize: 16, lineHeight: 26 }} testID="amaError.message">
+          {error}
+        </react_native_1.Text>
+        <react_native_1.Text style={{ color: 'white', fontSize: 16, lineHeight: 24 }}>
+          Please check the console for more info...
+        </react_native_1.Text>
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+const useAMAContext = () => {
+    const context = React.useContext(AMAContext);
+    if (!context) {
+        throw new Error('Please wrap your app with <AMAProvider />');
+    }
+    return context;
+};
+exports.useAMAContext = useAMAContext;

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