Address Pressable accessibility review feedback

Author: sorinc03

packages/react-native-gesture-handler/src/__tests__/Pressable.accessibility.test.tsx

@@ -4,7 +4,10 @@ import { Platform, Text } from 'react-native';
 
 import GestureHandlerRootView from '../components/GestureHandlerRootView';
 import LegacyPressable from '../components/Pressable/Pressable';
-import type { PressableProps } from '../components/Pressable/PressableProps';
+import type {
+  PressableEvent,
+  PressableProps,
+} from '../components/Pressable/PressableProps';
 import Pressable from '../v3/components/Pressable';
 
 jest.unmock('../components/Pressable/Pressable');
@@ -26,23 +29,25 @@ const implementations = [
   ],
 ] as const;
 
-beforeEach(() => {
+const setPlatform = (platform: typeof Platform.OS) => {
   Object.defineProperty(Platform, 'OS', {
     configurable: true,
-    value: 'android',
+    value: platform,
   });
+};
+
+beforeEach(() => {
+  setPlatform('android');
 });
 
 afterEach(() => {
-  Object.defineProperty(Platform, 'OS', {
-    configurable: true,
-    value: originalPlatformOS,
-  });
+  setPlatform(originalPlatformOS);
 });
 
 function renderPressable(
   Component: React.ComponentType<TestPressableProps>,
-  props: TestPressableProps
+  props: TestPressableProps,
+  layout = { x: 0, y: 0, width: 100, height: 40 }
 ) {
   const result = render(
     <GestureHandlerRootView>
@@ -54,7 +59,7 @@ function renderPressable(
   const pressable = result.getByTestId('pressable');
 
   fireEvent(pressable, 'layout', {
-    nativeEvent: { layout: { x: 0, y: 0, width: 100, height: 40 } },
+    nativeEvent: { layout },
   });
 
   return { ...result, pressable };
@@ -79,6 +84,40 @@ describe.each(implementations)(
       expect(calls).toEqual(['in', 'out', 'press']);
     });
 
+    test('uses separate layout-local synthetic events for press in and out', () => {
+      const onPressIn = jest.fn<void, [PressableEvent]>();
+      const onPressOut = jest.fn<void, [PressableEvent]>();
+
+      const { pressable } = renderPressable(
+        Component,
+        {
+          onPressIn,
+          onPressOut,
+          onPress: jest.fn(),
+        },
+        { x: 10, y: 20, width: 100, height: 40 }
+      );
+
+      fireEvent(pressable, 'accessibilityAction', {
+        nativeEvent: { actionName: 'activate' },
+      });
+
+      const pressInEvent = onPressIn.mock.calls[0][0];
+      const pressOutEvent = onPressOut.mock.calls[0][0];
+
+      expect(pressInEvent.nativeEvent).toEqual(
+        expect.objectContaining({
+          locationX: 50,
+          locationY: 20,
+          pageX: 60,
+          pageY: 40,
+        })
+      );
+      expect(pressOutEvent.nativeEvent.timestamp).toBeGreaterThan(
+        pressInEvent.nativeEvent.timestamp
+      );
+    });
+
     test('routes longpress accessibility action to onLongPress on Android', () => {
       const onLongPress = jest.fn();
       const onPress = jest.fn();
@@ -149,5 +188,59 @@ describe.each(implementations)(
       expect(onPress).toHaveBeenCalledTimes(1);
       expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
     });
+
+    test('does not add or handle press accessibility actions when disabled', () => {
+      const onPress = jest.fn();
+
+      const { pressable } = renderPressable(Component, {
+        accessibilityActions: [{ name: 'magic', label: 'Magic' }],
+        disabled: true,
+        onPress,
+      });
+
+      expect(pressable.props.accessibilityActions).toEqual([
+        { name: 'magic', label: 'Magic' },
+      ]);
+      expect(pressable.props.onAccessibilityAction).toBeUndefined();
+
+      fireEvent(pressable, 'accessibilityAction', {
+        nativeEvent: { actionName: 'activate' },
+      });
+
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    test('does not add or handle press accessibility actions outside Android', () => {
+      setPlatform('ios');
+      const onPress = jest.fn();
+
+      const { pressable } = renderPressable(Component, {
+        accessibilityActions: [{ name: 'magic', label: 'Magic' }],
+        onPress,
+      });
+
+      expect(pressable.props.accessibilityActions).toEqual([
+        { name: 'magic', label: 'Magic' },
+      ]);
+      expect(pressable.props.onAccessibilityAction).toBeUndefined();
+
+      fireEvent(pressable, 'accessibilityAction', {
+        nativeEvent: { actionName: 'activate' },
+      });
+
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    test('keeps the user accessibility action handler unchanged outside Android', () => {
+      setPlatform('ios');
+      const onAccessibilityAction = jest.fn();
+
+      const { pressable } = renderPressable(Component, {
+        onAccessibilityAction,
+        onPress: jest.fn(),
+      });
+
+      expect(pressable.props.onAccessibilityAction).toBe(onAccessibilityAction);
+    });
   }
 );

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

@@ -28,14 +28,12 @@ import type {
 } from './PressableProps';
 import { getStatesConfig, StateMachineEvent } from './stateDefinitions';
 import { PressableStateMachine } from './StateMachine';
+import { usePressableAccessibility } from './usePressableAccessibility';
 import {
   addInsets,
   gestureToPressableEvent,
   gestureTouchToPressableEvent,
-  getPressableAccessibilityActions,
   isTouchWithinInset,
-  isUserHandledAccessibilityAction,
-  makeSyntheticPressableEvent,
   numberAsInset,
 } from './utils';
 
@@ -205,63 +203,17 @@ const LegacyPressable = (props: LegacyPressableProps) => {
     [handleFinalize, innerHandlePressIn, onPress, onPressOut]
   );
 
-  const shouldUsePressableAccessibilityActions =
-    Platform.OS === 'android' &&
-    disabled !== true &&
-    (onPress != null || onLongPress != null);
-  const accessibilityActions = useMemo(
-    () =>
-      shouldUsePressableAccessibilityActions
-        ? getPressableAccessibilityActions(
-            userAccessibilityActions,
-            onPress,
-            onLongPress
-          )
-        : userAccessibilityActions,
-    [
-      onLongPress,
-      onPress,
-      shouldUsePressableAccessibilityActions,
-      userAccessibilityActions,
-    ]
-  );
-  const handleAccessibilityAction = useCallback<
-    NonNullable<LegacyPressableProps['onAccessibilityAction']>
-  >(
-    (event) => {
-      const actionName = event.nativeEvent.actionName;
-      const shouldHandleAction =
-        shouldUsePressableAccessibilityActions &&
-        !isUserHandledAccessibilityAction(
-          actionName,
-          userAccessibilityActions,
-          userOnAccessibilityAction
-        );
-
-      if (shouldHandleAction && actionName === 'activate' && onPress) {
-        const pressableEvent = makeSyntheticPressableEvent(dimensions.current);
-        handlePressIn(pressableEvent);
-        handlePressOut(pressableEvent);
-      } else if (shouldHandleAction && actionName === 'longpress') {
-        onLongPress?.(makeSyntheticPressableEvent(dimensions.current));
-      }
-
-      userOnAccessibilityAction?.(event);
-    },
-    [
+  const { accessibilityActions, onAccessibilityAction } =
+    usePressableAccessibility({
+      accessibilityActions: userAccessibilityActions,
+      dimensions,
+      disabled,
       handlePressIn,
       handlePressOut,
+      onAccessibilityAction: userOnAccessibilityAction,
       onLongPress,
       onPress,
-      shouldUsePressableAccessibilityActions,
-      userAccessibilityActions,
-      userOnAccessibilityAction,
-    ]
-  );
-  const onAccessibilityAction =
-    shouldUsePressableAccessibilityActions || userOnAccessibilityAction
-      ? handleAccessibilityAction
-      : undefined;
+    });
 
   const stateMachine = useMemo(() => new PressableStateMachine(), []);
   const isScreenReaderEnabled = useIsScreenReaderEnabled();

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

@@ -12,7 +12,12 @@ import type {
 import type { AnyGesture } from '../../v3/types';
 import type { RelationPropType } from '../utils';
 
-export type PressableDimensions = { width: number; height: number };
+export type PressableDimensions = {
+  x?: number;
+  y?: number;
+  width: number;
+  height: number;
+};
 
 export type PressableStateCallbackType = RNPressableStateCallbackType;
 export type PressableAndroidRippleConfig = RNPressableAndroidRippleConfig;

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

@@ -0,0 +1,124 @@
+import type { MutableRefObject } from 'react';
+import { useCallback, useMemo } from 'react';
+import { Platform } from 'react-native';
+
+import findNodeHandle from '../../findNodeHandle';
+import type {
+  PressableDimensions,
+  PressableEvent,
+  PressableProps,
+} from './PressableProps';
+import {
+  getPressableAccessibilityActions,
+  isUserHandledAccessibilityAction,
+  makeSyntheticPressableEvent,
+} from './utils';
+
+type UsePressableAccessibilityParams = {
+  accessibilityActions: PressableProps['accessibilityActions'];
+  dimensions: MutableRefObject<PressableDimensions>;
+  disabled: PressableProps['disabled'];
+  handlePressIn: (event: PressableEvent) => void;
+  handlePressOut: (event: PressableEvent) => void;
+  onAccessibilityAction: PressableProps['onAccessibilityAction'];
+  onLongPress: PressableProps['onLongPress'];
+  onPress: PressableProps['onPress'];
+};
+
+const getAccessibilityActionTargetId = (
+  event: Parameters<NonNullable<PressableProps['onAccessibilityAction']>>[0]
+) => {
+  if (event.target == null) {
+    return 0;
+  }
+
+  return (
+    findNodeHandle(
+      event.target as unknown as Parameters<typeof findNodeHandle>[0]
+    ) ?? 0
+  );
+};
+
+function usePressableAccessibility({
+  accessibilityActions: userAccessibilityActions,
+  dimensions,
+  disabled,
+  handlePressIn,
+  handlePressOut,
+  onAccessibilityAction: userOnAccessibilityAction,
+  onLongPress,
+  onPress,
+}: UsePressableAccessibilityParams) {
+  const shouldUsePressableAccessibilityActions =
+    Platform.OS === 'android' &&
+    disabled !== true &&
+    (onPress != null || onLongPress != null);
+  const accessibilityActions = useMemo(
+    () =>
+      shouldUsePressableAccessibilityActions
+        ? getPressableAccessibilityActions(
+            userAccessibilityActions,
+            onPress,
+            onLongPress
+          )
+        : userAccessibilityActions,
+    [
+      onLongPress,
+      onPress,
+      shouldUsePressableAccessibilityActions,
+      userAccessibilityActions,
+    ]
+  );
+  const handleAccessibilityAction = useCallback<
+    NonNullable<PressableProps['onAccessibilityAction']>
+  >(
+    (event) => {
+      const actionName = event.nativeEvent.actionName;
+      const shouldHandleAction =
+        shouldUsePressableAccessibilityActions &&
+        !isUserHandledAccessibilityAction(
+          actionName,
+          userAccessibilityActions,
+          userOnAccessibilityAction
+        );
+      const targetId = getAccessibilityActionTargetId(event);
+
+      if (shouldHandleAction && actionName === 'activate' && onPress) {
+        const timestamp = Date.now();
+        handlePressIn(
+          makeSyntheticPressableEvent(dimensions.current, timestamp, targetId)
+        );
+        handlePressOut(
+          makeSyntheticPressableEvent(
+            dimensions.current,
+            timestamp + 1,
+            targetId
+          )
+        );
+      } else if (shouldHandleAction && actionName === 'longpress') {
+        onLongPress?.(
+          makeSyntheticPressableEvent(dimensions.current, undefined, targetId)
+        );
+      }
+
+      userOnAccessibilityAction?.(event);
+    },
+    [
+      dimensions,
+      handlePressIn,
+      handlePressOut,
+      onLongPress,
+      onPress,
+      shouldUsePressableAccessibilityActions,
+      userAccessibilityActions,
+      userOnAccessibilityAction,
+    ]
+  );
+  const onAccessibilityAction = shouldUsePressableAccessibilityActions
+    ? handleAccessibilityAction
+    : userOnAccessibilityAction;
+
+  return { accessibilityActions, onAccessibilityAction };
+}
+
+export { usePressableAccessibility };