search

callstack / react-native-paper

Material Design for React Native (Android & iOS)
https://reactnativepaper.com
MIT License
12.54k stars 2.05k forks source link

TalkBack: FAB.Group breaks select with touch #4064

Open personalizedrefrigerator opened 10 months ago

personalizedrefrigerator commented 10 months ago

Current behaviour

When using TalkBack on Android, exploring the screen by touch (docs) doesn't work in apps that use a FAB.Group. Selecting items by tapping them also doesn't work.

Expected behaviour

Touch exploration/selection should work.

How to reproduce?

GitHub repository or Expo Snack

Preview

https://github.com/callstack/react-native-paper/assets/46334387/e51d4a30-fb2c-43e6-a00b-fed3eae20c09

What have you tried so far?

  1. Using an empty <Portal> element, rather than one containing a FAB.Group (works)
  2. Using a <Portal> element that displays a dialog (works)
  3. Using an absolutely-positioned FAB, rather than a FAB.Group (works)

Your Environment

software version
ios 16.6.1
android 10
react-native 0.72.4
react-native-paper 5.10.4
node 18.13.0
npm or yarn 9.6.7 (npm)
expo sdk N/A

Note: This issue seems only to be present on Android.

personalizedrefrigerator commented 4 months ago

The issue seems to be related to the use of ponter-events="box-none" on the FAB.Group container: https://github.com/callstack/react-native-paper/blob/813cdd47a90ee3bb693c6ec143af73092cd3edae/src/components/FAB/FABGroup.tsx#L344-L346

It seems to be possible to work around this issue by changing the size of the container when the FAB group is collapsed, as is done here. (Note: The linked example adjusts the container size using hardcoded values, which seems to work, but could be problematic).