Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android: touch events are executed twice when talkback is enabled #2808

Closed
IvanIhnatsiuk opened this issue Mar 15, 2024 · 12 comments · Fixed by #3002
Closed

Android: touch events are executed twice when talkback is enabled #2808

IvanIhnatsiuk opened this issue Mar 15, 2024 · 12 comments · Fixed by #3002
Labels
Area: Accessibility This issue is related to accessibility problems Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS

Comments

@IvanIhnatsiuk
Copy link
Contributor

IvanIhnatsiuk commented Mar 15, 2024

Description

Hello, thanks for your library it is really good and very powerful 😎 .

I found an issue that when talkback is enabled, the onPress call occurs multiple times when interacting with the buttons.

Screen.Recording.2024-03-15.at.17.07.21.mov

In the video the goBack callback was called twice, so I was navigated to the Accounts tab :)

Steps to reproduce

  1. Enable talkback on android emulator
  2. Run your example application on android emulator/real device
  3. Press on any button
  4. observe that onPress was executed twice

Snack or a link to a repository

https://github.com/software-mansion/react-native-gesture-handler

Gesture Handler version

2.15.0

React Native version

0.72.10

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Pixel 7 pro

Acknowledgements

Yes

@github-actions github-actions bot added Platform: Android This issue is specific to Android Missing repro labels Mar 15, 2024
Copy link

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?

@m-bert
Copy link
Contributor

m-bert commented Mar 27, 2024

Hi @IvanIhnatsiuk! I've just tested that on my Samsung S20+ and Pixel 6a emulator - both work fine. To test that, I've added logs into onPress callbacks in RectButtons. Could you provide a reproduction that we can look at?

@IvanIhnatsiuk
Copy link
Contributor Author

@m-bert Hello, I think you can reproduce this in your example app. To reproduce this, I simply updated the App.tsx file to

import React from 'react';
import {
  BorderlessButton,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import { Text } from 'react-native';

const press = () => console.log('pressed');

export default function App() {
  return (
    <GestureHandlerRootView style={{ justifyContent: 'center', flex: 1 }}>
      <BorderlessButton onPress={press}>
        <Text>Press me</Text>
      </BorderlessButton>
    </GestureHandlerRootView>
  );
}
Screen.Recording.2024-03-28.at.10.15.14.mov

Please, let me know if you need more details :)

@m-bert
Copy link
Contributor

m-bert commented Apr 2, 2024

Hello @IvanIhnatsiuk! I've copied your code and everything is fine:

Nagranie.z.ekranu.2024-04-2.o.10.35.15.mov

It also works on my physical Samsung S20+

@m-bert
Copy link
Contributor

m-bert commented Apr 2, 2024

I can see that you're using another emulator, I'll try to test that on Pixel 7

@m-bert
Copy link
Contributor

m-bert commented Apr 2, 2024

Okay, I've tested that on Pixel 7 Pro emulator and I still wasn't able to reproduce this issue.

@m-bert m-bert added the Can't repro We can't reproduce this issue label Apr 2, 2024
@IvanIhnatsiuk
Copy link
Contributor Author

@m-bert Sorry for the long reply, could you please try this code?

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

const press = () => console.log('pressed');

export default function App() {
  return (
    <GestureHandlerRootView style={{ justifyContent: 'center', flex: 1 }}>
      <BorderlessButton onPress={press}>
        <View accessible accessibilityRole="button">
          <Text>Press me</Text>
        </View>
      </BorderlessButton>
    </GestureHandlerRootView>
  );
}

@m-bert
Copy link
Contributor

m-bert commented May 8, 2024

Thank you @IvanIhnatsiuk! Now I can reproduce this issue. Seems like the problem lies in additional View inside BorderlessButton - without it it works fine, but I guess that iOS doesn't work in that case (I have yet to check that).

@IvanIhnatsiuk
Copy link
Contributor Author

Yes, the problem is in additional view element. However, we need to add this view to make buttons accessible: https://docs.swmansion.com/react-native-gesture-handler/docs/components/buttons/

@IvanIhnatsiuk
Copy link
Contributor Author

Also, Could you please remove "can't repro" label? 🙂

@m-bert m-bert removed the Can't repro We can't reproduce this issue label May 9, 2024
@m-bert
Copy link
Contributor

m-bert commented May 9, 2024

Also, Could you please remove "can't repro" label? 🙂

Sure, done 😄

However, we need to add this view to make buttons accessible

I'm aware of that. As far as I can tell buttons should work without this View on android. I'm not sure about iOS though since I don't have access to iPhone right now and testing accessibility on simulator is not pleasant. I'll get back to you when we find a solution to this problem 😅

@latekvo latekvo added Platform: iOS This issue is specific to iOS Area: Accessibility This issue is related to accessibility problems and removed Missing repro labels Jul 15, 2024
@latekvo
Copy link
Contributor

latekvo commented Jul 24, 2024

Hey @IvanIhnatsiuk, could you please let me know if PR #3002 has fixed this issue for you?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Accessibility This issue is related to accessibility problems Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS
Projects
None yet
3 participants