[Android] [Talkback] [Accessible] Cannot select other components on screen after moving the Bottomsheet

[namtran-axonvibemta]

Description

[Android] [Talkback] [Accessible] Cannot select other components on screen after moving

Steps to reproduce

1. Enable Talkback on Android then move to the Bottomsheet
2. Try to move to full screen or even just a little move only then cannot tap any elements on screen anymore.
3. User can move the Bottomsheet back to mini or medium mode but cannot tap any elements on screen (even elements inside the bottomsheet).

Snack or a link to a repository

""

Gesture Handler version

2.18.1

React Native version

0.74

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[namtran-axonvibemta]

It seems wrong in implementation of Hover feature that make this conflicted with scroll event. https://github.com/software-mansion/react-native-gesture-handler/commit/16a266e3af637c24cf690a3c76995b178d40f453

After editing the override function then Talkback now can work again after moving bottomsheet. node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootView.kt

override fun dispatchGenericMotionEvent(event: MotionEvent) =
    super.dispatchGenericMotionEvent(event)

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[coado]

Hey @namtran-axonvibemta, could you provide some repro for this? I have tried using bottom sheet with some Pressable in the background and with talkback turned on. It seems to work on react native 0.75. I've tested on Xiaomi Redmi Note 9.

import React, {useRef, useCallback} from 'react';
import {SafeAreaView, StyleSheet, Text, Pressable} from 'react-native';

import BottomSheet, {BottomSheetView} from '@gorhom/bottom-sheet';

import {GestureHandlerRootView} from 'react-native-gesture-handler';

function App(): React.JSX.Element {
  const [counter, setCounter] = React.useState(0);
  const bottomSheetRef = useRef<BottomSheet>(null);
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  const handleClick = () => {
    setCounter(counter + 1);
  };

  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <SafeAreaView style={styles.container}>
        <Pressable onPress={handleClick} style={styles.pressable}>
          <Text style={styles.pressableText}>Click me {counter}</Text>
        </Pressable>
        <BottomSheet
          snapPoints={['20%', '95%']}
          ref={bottomSheetRef}
          onChange={handleSheetChanges}>
          <BottomSheetView style={styles.contentContainer}>
            <Text>Awesome 🎉</Text>
          </BottomSheetView>
        </BottomSheet>
      </SafeAreaView>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  contentContainer: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'white',
  },
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'grey',
  },
  pressable: {
    backgroundColor: 'cyan',
    padding: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  pressableText: {
    color: 'black',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default App;

[alexfov]

I can confirm that it is a HUGE issue on android. User just can't do anything if the screen reader is on.

Just use an the example from doc

import { StyleSheet, Text } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
} from 'react-native-reanimated';

const END_POSITION = 200;

export default function App() {
  const onLeft = useSharedValue(true);
  const position = useSharedValue(0);

  const panGesture = Gesture.Pan()
    .onUpdate((e) => {
      if (onLeft.value) {
        position.value = e.translationX;
      } else {
        position.value = END_POSITION + e.translationX;
      }
    })
    .onEnd((e) => {
      if (position.value > END_POSITION / 2) {
        position.value = withTiming(END_POSITION, { duration: 100 });
        onLeft.value = false;
      } else {
        position.value = withTiming(0, { duration: 100 });
        onLeft.value = true;
      }
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: position.value }],
  }));

  return (
    <GestureDetector gesture={panGesture}>
      <Animated.View style={[styles.box, animatedStyle]}>
        <Text>I am not accessible after gestures</Text>
      </Animated.View>
    </GestureDetector>
  );
}

const styles = StyleSheet.create({
  box: {
    height: 120,
    width: 120,
    backgroundColor: '#b58df1',
    borderRadius: 20,
    marginBottom: 30,
  },
});

commenting override fun dispatchGenericMotionEvent(event: MotionEvent) ... fixes the issue.

[RohovDmytro]

I can double-confirm and tripple-ensure it's an issue and a huge one :( I'm in the process of figuring our that the navigation is very broken when TalkBack is enabled.