[android] fix talkback on pressable (#4017)

## Description

When TalkBack is activated, pressable cannot be clicked on android. This
PR fixes the issue.

The reason was that Pressable requires a specific order of events. This
order of events is hardcoded and found empirically. However, with
talback enabled the order of events is different, I added a function
which queries native side whether or not talback is enabled and adjusts
expected event order accordingly.
Moreover with talback enabled longPress gets both onPointerUp and
onPointerDown before native side receives its events, thus we must not
reset the state machine state on onPointerUp.

## Test plan
Tested on the following example:

<details>

```tsx

import React from 'react';
import { Text, StyleSheet, View } from 'react-native';
import { Pressable, GestureHandlerRootView } from 'react-native-gesture-handler'

const PressableExample = () => {
  const [count, setCount] = React.useState(0);
  return (
    <GestureHandlerRootView style={styles.container}>
      <Pressable onPress={() => setCount((c) => c + 1)}>
        <View style={styles.pressable}>
          <Text>{count}</Text>
        </View>
      </Pressable>
    </GestureHandlerRootView >
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  pressable: {
    alignItems: 'center', justifyContent: 'center', backgroundColor: 'green', width: 100, height: 100
  },
  wrapperCustom: {
    borderRadius: 8,
    padding: 16,
    minWidth: 150,
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    color: 'white',
    fontWeight: '600',
  },
});

export default PressableExample;

```

</details>

Author: akwasniewski

packages/react-native-gesture-handler/src/components/Pressable/Pressable.tsx

@@ -36,6 +36,7 @@ import {
 } from '../utils';
 import { getStatesConfig, StateMachineEvent } from './stateDefinitions';
 import { PressableStateMachine } from './StateMachine';
+import { useIsScreenReaderEnabled } from '../../useIsScreenReaderEnabled';
 
 const DEFAULT_LONG_PRESS_DURATION = 500;
 const IS_TEST_ENV = isTestEnv();
@@ -202,11 +203,16 @@ const LegacyPressable = (props: LegacyPressableProps) => {
   );
 
   const stateMachine = useMemo(() => new PressableStateMachine(), []);
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
   useEffect(() => {
-    const configuration = getStatesConfig(handlePressIn, handlePressOut);
+    const configuration = getStatesConfig(
+      handlePressIn,
+      handlePressOut,
+      isScreenReaderEnabled
+    );
     stateMachine.setStates(configuration);
-  }, [handlePressIn, handlePressOut, stateMachine]);
+  }, [handlePressIn, handlePressOut, stateMachine, isScreenReaderEnabled]);
 
   const hoverInTimeout = useRef<number | null>(null);
   const hoverOutTimeout = useRef<number | null>(null);
@@ -259,7 +265,7 @@ const LegacyPressable = (props: LegacyPressableProps) => {
           );
         })
         .onTouchesUp(() => {
-          if (Platform.OS === 'android') {
+          if (Platform.OS === 'android' && !isScreenReaderEnabled) {
             // Prevents potential soft-locks
             stateMachine.reset();
             handleFinalize();
@@ -280,7 +286,7 @@ const LegacyPressable = (props: LegacyPressableProps) => {
             handleFinalize();
           }
         }),
-    [stateMachine, handleFinalize, handlePressOut]
+    [stateMachine, handleFinalize, handlePressOut, isScreenReaderEnabled]
   );
 
   // RNButton is placed inside ButtonGesture to enable Android's ripple and to capture non-propagating events

packages/react-native-gesture-handler/src/components/Pressable/stateDefinitions.ts

@@ -29,6 +29,25 @@ function getAndroidStatesConfig(
   ];
 }
 
+function getAndroidAccessibilityStatesConfig(
+  handlePressIn: (event: PressableEvent) => void,
+  handlePressOut: (event: PressableEvent) => void
+) {
+  return [
+    {
+      eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
+      callback: handlePressIn,
+    },
+    {
+      eventName: StateMachineEvent.NATIVE_BEGIN,
+    },
+    {
+      eventName: StateMachineEvent.FINALIZE,
+      callback: handlePressOut,
+    },
+  ];
+}
+
 function getIosStatesConfig(
   handlePressIn: (event: PressableEvent) => void,
   handlePressOut: (event: PressableEvent) => void
@@ -109,10 +128,13 @@ function getUniversalStatesConfig(
 
 export function getStatesConfig(
   handlePressIn: (event: PressableEvent) => void,
-  handlePressOut: (event: PressableEvent) => void
+  handlePressOut: (event: PressableEvent) => void,
+  screenReaderActive: boolean
 ): StateDefinition[] {
   if (Platform.OS === 'android') {
-    return getAndroidStatesConfig(handlePressIn, handlePressOut);
+    return screenReaderActive
+      ? getAndroidAccessibilityStatesConfig(handlePressIn, handlePressOut)
+      : getAndroidStatesConfig(handlePressIn, handlePressOut);
   } else if (Platform.OS === 'ios') {
     return getIosStatesConfig(handlePressIn, handlePressOut);
   } else if (Platform.OS === 'web') {

packages/react-native-gesture-handler/src/useIsScreenReaderEnabled.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+export function useIsScreenReaderEnabled() {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  useEffect(() => {
+    const checkStatus = async () => {
+      try {
+        const res = await AccessibilityInfo.isScreenReaderEnabled();
+        setIsEnabled(res);
+      } catch (error) {
+        console.warn('Could not read accessibility info: defaulting to false');
+      }
+    };
+
+    checkStatus();
+
+    const listener = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      (enabled) => {
+        setIsEnabled(enabled);
+      }
+    );
+
+    return () => {
+      listener.remove();
+    };
+  }, []);
+  return isEnabled;
+}

packages/react-native-gesture-handler/src/v3/components/Pressable.tsx

@@ -40,6 +40,7 @@ import { PureNativeButton } from './GestureButtons';
 
 import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
 import { INT32_MAX, isTestEnv } from '../../utils';
+import { useIsScreenReaderEnabled } from '../../useIsScreenReaderEnabled';
 
 const DEFAULT_LONG_PRESS_DURATION = 500;
 const IS_TEST_ENV = isTestEnv();
@@ -199,11 +200,16 @@ const Pressable = (props: PressableProps) => {
   );
 
   const stateMachine = useMemo(() => new PressableStateMachine(), []);
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
   useEffect(() => {
-    const configuration = getStatesConfig(handlePressIn, handlePressOut);
+    const configuration = getStatesConfig(
+      handlePressIn,
+      handlePressOut,
+      isScreenReaderEnabled
+    );
     stateMachine.setStates(configuration);
-  }, [handlePressIn, handlePressOut, stateMachine]);
+  }, [handlePressIn, handlePressOut, stateMachine, isScreenReaderEnabled]);
 
   const hoverInTimeout = useRef<number | null>(null);
   const hoverOutTimeout = useRef<number | null>(null);
@@ -257,7 +263,7 @@ const Pressable = (props: PressableProps) => {
       );
     },
     onTouchesUp: () => {
-      if (Platform.OS === 'android') {
+      if (Platform.OS === 'android' && !isScreenReaderEnabled) {
         // Prevents potential soft-locks
         stateMachine.reset();
         handleFinalize();