[v4] | [v2] Keyboard accessibility not working if adding bottom sheet inside a <Tab.Screen> (@react-navigation/material-top-tabs library)

[gpurbia]

Bug

I am using a bottom sheet library in one the screen inside the <Tab.Navigator>. I am trying to access the bottom sheet library content via keyboard for achieve accessibility related stuffs. But i am not able to focus any content inside the bottom sheet and not able to navigate contents by keyboard.

Bottom sheet is getting focused if i tap first time, and if try to tap again to access content its going out of the content and next element is getting selected.

https://github.com/gorhom/react-native-bottom-sheet/assets/38748120/f8ca5897-58e5-41c4-9774-d520dbdc5fa5

Environment info

Library	Version
@gorhom/bottom-sheet	^4.4.6
react-native	0.74.1
react-native-reanimated	~3.10.1
react-native-gesture-handler	~2.16.1

Steps To Reproduce

1. In device settings, go to keyboards, Full Keyboard Access, turn it on.
2. Visit the screen, where the bottom sheet is implemented.
3. Connect your device to external keyboard or if you are using simulator than device keyboard should work.
4. Open bottom sheet, and try to focus or access any content via keyboard tap key or arrow key.

Describe what you expected to happen:

1. Focus should be goes inside the bottom sheet.
2. Each item can be focused via the keyboard through tap or arrow keys.

Reproducible sample code

here is the reproducible example snack (https://snack.expo.dev/@giteshpurbia/gorhom-bottom-sheet)

[SkMamtajuddin]

Bug

I am using a bottom sheet library in one the screen inside the <Tab.Navigator>. I am trying to access the bottom sheet library content via keyboard for achieve accessibility related stuffs. But i am not able to focus any content inside the bottom sheet and not able to navigate contents by keyboard.

Bottom sheet is getting focused if i tap first time, and if try to tap again to access content its going out of the content and next element is getting selected.

Uploading IMG_0.MOV…

Environment info

Library Version @gorhom/bottom-sheet ^4.4.6 react-native 0.74.1 react-native-reanimated ~3.10.1 react-native-gesture-handler ~2.16.1

Steps To Reproduce

1. In device settings, go to keyboards, Full Keyboard Access, turn it on.
2. Visit the screen, where the bottom sheet is implemented.
3. Connect your device to external keyboard or if you are using simulator than device keyboard should work.
4. Open bottom sheet, and try to focus or access any content via keyboard tap key or arrow key.

Describe what you expected to happen:

1. Focus should be goes inside the bottom sheet.
2. Each item can be focused via the keyboard through tap or arrow keys.

Reproducible sample code

here is the reproducible example snack (https://snack.expo.dev/@giteshpurbia/gorhom-bottom-sheet)

Thanks @gpurbia for raised this issue i am also facing same issue on bottomSheet when we use it under Tab.Navigator

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.