fixes to get AMA playground running. (#325)

pietgk · web-flow · commit 15e5b721fc71 · 2025-07-21T16:46:42.000+01:00
* fixes to get AMA playground running. still WIP

* fix build
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@testing-library/react-native": "^12.3.0",
     "@types/jest": "^29.5.10",
+    "@types/node": "^24.0.15",
     "@types/react": "~19.0.0",
     "eslint": "^8.19.0",
     "eslint-plugin-import": "^2.26.0",
@@ -51,6 +52,8 @@
     "jest": "^29.6.3",
     "prettier": "^3.6.2",
     "react-native": "0.79.1",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-reanimated": "~3.17.4",
     "ts-jest": "^29.1.1",
     "typescript": "^5.1.3"
   },
diff --git a/packages/animations/package.json b/packages/animations/package.json
@@ -27,7 +27,8 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-reanimated": ">=2.0.0"
   },
   "keywords": [
     "react-native",
diff --git a/packages/core/ios/A11yChecker.swift b/packages/core/ios/A11yChecker.swift
@@ -83,7 +83,7 @@ public class A11yChecker {
         issues.removeAll()
 
         traverseAndCheck(view: root)
-        var shouldSendEvent = clearFixedIssues(oldIssues)
+        let shouldSendEvent = clearFixedIssues(oldIssues)
 
         let newIssuesToSend = issues.filter { !$0.sent }
 
@@ -306,9 +306,12 @@ public class A11yChecker {
 
             issues.append(
                 A11yIssue(
-                    type: action, rule: rule, label: label, issue: issue,
+                    type: action,
+                    rule: rule,
+                    label: label,
+                    issue: issue,
                     viewId: viewId,
-                    sent: false,
+                    sent: false
                 ))
         }
     }
diff --git a/packages/core/src/ReactNativeAmaModule.ts b/packages/core/src/ReactNativeAmaModule.ts
@@ -1,6 +1,7 @@
 import { NativeModule, requireNativeModule } from 'expo';
+import { ReactNativeAmaModuleEvents } from './ReactNativeAma.types';
 
-declare class ReactNativeAmaModule extends NativeModule {
+declare class ReactNativeAmaModule extends NativeModule<ReactNativeAmaModuleEvents> {
   start(config?: any): void;
   stop(): void;
 }
diff --git a/packages/core/src/ReactNativeAmaModule.web.ts b/packages/core/src/ReactNativeAmaModule.web.ts
@@ -1,10 +1,11 @@
 import { NativeModule, registerWebModule } from 'expo';
 import { ReactNativeAmaModuleEvents } from './ReactNativeAma.types';
+import type { A11yIssue } from './internals/types';
 
 class ReactNativeAmaModule extends NativeModule<ReactNativeAmaModuleEvents> {
   PI = Math.PI;
-  async setValueAsync(value: string): Promise<void> {
-    this.emit('onChange', { value });
+  async setValueAsync(issues: A11yIssue[]): Promise<void> {
+    this.emit('onA11yIssues', issues);
   }
   hello() {
     return 'Hello world! 👋';
diff --git a/packages/core/src/ReactNativeAmaView.web.tsx b/packages/core/src/ReactNativeAmaView.web.tsx
@@ -5,6 +5,7 @@ export default function ReactNativeAmaView(props: ReactNativeAmaViewProps) {
   return (
     <div>
       <iframe
+        // eslint-disable-next-line react-native/no-inline-styles
         style={{ flex: 1 }}
         src={props.url}
         onLoad={() => props.onLoad({ nativeEvent: { url: props.url } })}
diff --git a/packages/core/src/components/AMAProvider.tsx b/packages/core/src/components/AMAProvider.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-native/no-inline-styles */
 import * as React from 'react';
 import {
   AccessibilityChangeEventName,
@@ -20,6 +21,8 @@ type SharedContextValue = {
   isInvertColorsEnabled: boolean;
   isReduceMotionEnabled: boolean;
   isReduceTransparencyEnabled: boolean;
+  isHighTextContrastEnabled: boolean;
+  isDarkerSystemColorsEnabled: boolean;
   reactNavigationScreenOptions: {
     animationEnabled: boolean;
     animation: 'default' | 'fade';
@@ -56,6 +59,8 @@ const eventsMapping: AccessibilityInfoEvents = {
   boldTextChanged: 'isBoldTextEnabled',
   invertColorsChanged: 'isInvertColorsEnabled',
   screenReaderChanged: 'isScreenReaderEnabled',
+  highTextContrastChanged: 'isHighTextContrastEnabled',
+  darkerSystemColorsChanged: 'isDarkerSystemColorsEnabled',
 };
 
 export const isDevContextValue = (
@@ -70,6 +75,8 @@ const DEFAULT_VALUES = {
   isInvertColorsEnabled: false,
   isReduceMotionEnabled: false,
   isScreenReaderEnabled: false,
+  isHighTextContrastEnabled: false,
+  isDarkerSystemColorsEnabled: false,
   reactNavigationScreenOptions: {
     animationEnabled: true,
     animation: 'default',
@@ -153,7 +160,7 @@ export const AMAProvider: React.FC<AMAProviderProps> = ({ children }) => {
         <View style={{ flex: 1 }}>
           <>
             {children}
-            <AMAError issues={issues} />
+            {AMAError && <AMAError issues={issues} />}
           </>
         </View>
       </AMAContext.Provider>
diff --git a/packages/core/src/components/AutofocusContainer.test.tsx b/packages/core/src/components/AutofocusContainer.test.tsx
@@ -8,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,
@@ -20,7 +20,7 @@ describe('AutofocusContainer', () => {
       </AutofocusContainer>,
     );
 
-    await waitFor(() => expect(setFocus).toBeCalled());
+    await waitFor(() => expect(setFocus).toHaveBeenCalled());
   });
 
   it.each([undefined, true])(
@@ -37,7 +37,7 @@ describe('AutofocusContainer', () => {
         </AutofocusContainer>,
       );
 
-      await waitFor(() => expect(setFocus).toBeCalled());
+      await waitFor(() => expect(setFocus).toHaveBeenCalled());
 
       expect(
         renderAPI.getByTestId('autofocusContainer.accessibleView'),
@@ -57,7 +57,7 @@ describe('AutofocusContainer', () => {
       </AutofocusContainer>,
     );
 
-    await waitFor(() => expect(setFocus).toBeCalled());
+    await waitFor(() => expect(setFocus).toHaveBeenCalled());
 
     expect(
       renderAPI.queryByTestId('autofocusContainer.accessibleView'),
diff --git a/packages/core/src/components/HideChildrenFromAccessibilityTree.tsx b/packages/core/src/components/HideChildrenFromAccessibilityTree.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, type JSX } from 'react';
 import { Platform, View } from 'react-native';
 import { useAMAContext } from './AMAProvider';
 
@@ -38,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
   );
 };
diff --git a/packages/core/src/hooks/useChecks.ts b/packages/core/src/hooks/useChecks.ts
@@ -41,7 +41,7 @@ export const useChecks = () => {
   const hasErrors = React.useRef(false);
   const failedTests = React.useRef<string[]>([]);
   const shouldCheckLayout = React.useRef(true);
-  const layoutCheckTimeout = React.useRef<NodeJS.Timeout>();
+  const layoutCheckTimeout = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const [minimumSizeFailed, setMinimumSizeFailed] = React.useState(false);
   const [debugStyle, setDebugStyle] = React.useState<any>({});
 
@@ -178,8 +178,9 @@ export const useChecks = () => {
 
     shouldCheckLayout.current = false;
 
-    // @ts-ignore
-    clearTimeout(layoutCheckTimeout.current);
+    if (layoutCheckTimeout.current) {
+      clearTimeout(layoutCheckTimeout.current);
+    }
 
     layoutCheckTimeout.current = setTimeout(() => {
       shouldCheckLayout.current = true;
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -15,6 +15,8 @@ export { HideChildrenFromAccessibilityTree } from './components/HideChildrenFrom
 // Hooks
 export { useFocus } from './hooks/useFocus';
 export { useTimedAction } from './hooks/useTimedAction';
+export { useButtonChecks } from './hooks/useButtonChecks';
+export { useChecks } from './hooks/useChecks';
 
 export { default } from './ReactNativeAmaModule';
 export { default as ReactNativeAmaView } from './ReactNativeAmaView';
diff --git a/packages/core/src/internals/AMAError.tsx b/packages/core/src/internals/AMAError.tsx
@@ -35,7 +35,7 @@ const AMAErrorComponent = ({ issues }: { issues?: A11yIssue[] }) => {
 
         if (issueToView.current) {
             const position = await ReactNativeAmaModule.getPosition(issueToView.current.viewId);
-            console.info({ position })
+            console.info({ position });
 
             setActiveIssueIndex({ id: newIndex, position });
         } else {
@@ -79,7 +79,7 @@ const AMAErrorComponent = ({ issues }: { issues?: A11yIssue[] }) => {
                 logAMAError!(issue);
             }
         } else {
-            console.info('[React Native AMA]: No issues found')
+            console.info('[React Native AMA]: No issues found');
         }
     }, [issues]);
 
@@ -172,11 +172,11 @@ const AMAOverlay = ({ issue, position, closeOverlay }: AMAOverlayProps) => {
 
     useEffect(() => {
         logAMAError!(issue);
-    }, [issue.viewId]);
+    }, [issue]);
 
     return (
         <>
-            <Pressable style={styles!.transparentOverlay} onPress={closeOverlay} accessible={false} importantForAccessibility='no' />
+            <Pressable style={styles!.transparentOverlay} onPress={closeOverlay} accessible={false} importantForAccessibility="no" />
             <View style={[styles?.callout, {
                 top: y + height + POINTER_SIZE + SPACER,
             }]}>
@@ -199,7 +199,7 @@ const AMAOverlay = ({ issue, position, closeOverlay }: AMAOverlayProps) => {
     );
 };
 
-export const AMAError = __DEV__ ? AMAErrorComponent : null
+export const AMAError = __DEV__ ? AMAErrorComponent : null;
 
 const SPACER = 4;
 const POINTER_SIZE = 8;
diff --git a/packages/core/src/internals/getRuleErrorInfo.ts b/packages/core/src/internals/getRuleErrorInfo.ts
@@ -19,6 +19,7 @@ const RULES_HELP = __DEV__
         message: 'The component is missing the accessibility role.',
       },
       NO_KEYBOARD_TRAP: '/guidelines/forms',
+      NO_UNDEFINED: '/guidelines/accessibility-label',
       NO_FORM_LABEL: '/guidelines/forms',
       NO_FORM_ERROR: '/guidelines/forms',
       FLATLIST_NO_COUNT_IN_SINGULAR_MESSAGE:
@@ -36,13 +37,14 @@ export const getRuleErrorInfo = __DEV__
   ? (issue: A11yIssue) => {
       const ruleHelp = RULES_HELP![issue.rule];
 
-      let message = ruleHelp.message;
+      let message = typeof ruleHelp === 'string' ? '' : ruleHelp.message;
+      const helpUrl = typeof ruleHelp === 'string' ? ruleHelp : ruleHelp.url;
 
       if (issue.reason) {
         message += ': ' + issue.reason;
       }
 
-      const url = `https://nearform.com/open-source/react-native-ama/${ruleHelp.url}`;
+      const url = `https://nearform.com/open-source/react-native-ama${helpUrl}`;
 
       return { message, url };
     }
diff --git a/packages/core/src/internals/useAMADev.ts b/packages/core/src/internals/useAMADev.ts
@@ -55,7 +55,7 @@ export const useAMADev = () => {
 
     ReactNativeAmaModule.addListener(
       'onA11yIssues',
-      ({ issues }: { issues: A11yIssue[] }) => {
+      (issues: A11yIssue[]) => {
         setIssues(issues);
       },
     );
diff --git a/packages/extras/src/components/BottomSheet.tsx b/packages/extras/src/components/BottomSheet.tsx
@@ -39,10 +39,10 @@ export type BottomSheetProps = {
   bottomSheetStyle?: ViewStyle | ViewStyle[];
   closeActionAccessibilityLabel: string;
   closeDistance?: number;
-  footerComponent?: JSX.Element;
-  handleComponent?: JSX.Element | 'none';
+  footerComponent?: React.ReactElement;
+  handleComponent?: React.ReactElement | 'none';
   handleStyle?: ViewStyle | ViewStyle[];
-  headerComponent?: JSX.Element;
+  headerComponent?: React.ReactElement;
   maxHeight?: number;
   minVelocityToClose?: number;
   onBottomSheetHidden?: () => void;
diff --git a/packages/extras/src/components/Carousel.tsx b/packages/extras/src/components/Carousel.tsx
@@ -3,8 +3,9 @@ import { FlatListProps } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { useCarousel } from '../hooks/useCarousel';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function fixedForwardRef<T, P = {}>(
-  render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+  render: any,
 ): (props: P & React.RefAttributes<T>) => React.ReactNode {
   return React.forwardRef(render) as any;
 }
diff --git a/packages/forms/src/components/TextInput.tsx b/packages/forms/src/components/TextInput.tsx
@@ -15,12 +15,12 @@ import { UseTextInput, useTextInput } from '../hooks/useTextInput';
 
 export type TextInputProps = RNTextInputProps &
   Omit<UseTextInput, 'required' | 'accessibilityLabel'> & {
-    labelComponent: JSX.Element;
+    labelComponent: React.ReactElement;
     labelPosition?: 'beforeInput' | 'afterInput';
     nextFormField?: React.RefObject<RNTextInput>;
     id?: string;
     nextFieldId?: string;
-    errorComponent?: JSX.Element;
+    errorComponent?: React.ReactElement;
     errorPosition?: 'belowLabel' | 'afterInput';
   };
 
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts
@@ -1,5 +1,6 @@
 // Components
 
+import React from 'react';
 import { isFocused } from '@react-native-ama/internal';
 import {
   Form as FormProvider,
@@ -11,9 +12,9 @@ import { FormSubmit, type FormSubmitProps } from './components/FormSubmit';
 import { FormSwitch, type FormSwitchProps } from './components/FormSwitch';
 
 type FormComponent = React.FunctionComponent<FormProps> & {
-  Submit: (props: FormSubmitProps) => JSX.Element;
+  Submit: (props: FormSubmitProps) => React.ReactElement;
   Field: React.FunctionComponent<FormFieldProps>;
-  Switch: (props: FormSwitchProps) => JSX.Element;
+  Switch: (props: FormSwitchProps) => React.ReactElement;
 };
 
 // @ts-ignore
diff --git a/packages/internal/ama.rules.json b/packages/internal/ama.rules.json
@@ -0,0 +1,5 @@
+{
+  "rules": {},
+  "accessibilityLabelExceptions": [],
+  "highlight": "both"
+}
diff --git a/packages/internal/src/checks/contrastChecker.ts b/packages/internal/src/checks/contrastChecker.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import type { StyleProp } from 'react-native';
 import { score } from 'wcag-color';
 import { getPropertyFromStyle } from '../utils/getPropertyFromStyle';
diff --git a/packages/internal/src/utils/interpolateAnimation.test.ts b/packages/internal/src/utils/interpolateAnimation.test.ts
diff --git a/packages/internal/src/utils/logger.ts b/packages/internal/src/utils/logger.ts
diff --git a/packages/internal/src/utils/maybeGenerateStringFromElement.ts b/packages/internal/src/utils/maybeGenerateStringFromElement.ts
diff --git a/packages/react-native/src/components/Pressable.tsx b/packages/react-native/src/components/Pressable.tsx
diff --git a/packages/react-native/src/components/SwitchListItem.tsx b/packages/react-native/src/components/SwitchListItem.tsx
diff --git a/packages/react-native/src/hooks/useExpandable.ts b/packages/react-native/src/hooks/useExpandable.ts
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`import { NativeModule, requireNativeModule } from 'expo';`
	`2`	`+import { ReactNativeAmaModuleEvents } from './ReactNativeAma.types';`
`2`	`3`
`3`		`-declare class ReactNativeAmaModule extends NativeModule {`
	`4`	`+declare class ReactNativeAmaModule extends NativeModule<ReactNativeAmaModuleEvents> {`
`4`	`5`	`start(config?: any): void;`
`5`	`6`	`stop(): void;`
`6`	`7`	`}`