Issue in testing button inside bottom sheet modal [v.1.3.3]

[Othman2001]

Describe the bug
I have an app which uses bottom sheet modal https://github.com/gorhom/react-native-bottom-sheet
I am trying to test a button rendered inside the bottom sheet (the user clicks on text called "Find out" and then the bottom sheet modal opens that has a button "Getting Started"
I have added assert for tapOn: - tapOn: "Getting started". but the test fails, i have tried master studio but it can't inspect the bottom sheet it shows the bottom sheet as component and i can't inspect any of it is children

To Reproduce
create react native app
install bottom sheet from npm https://github.com/gorhom/react-native-bottom-sheet
use the bottom sheet in your app and try to inspect any of it is children

• Maestro version [e.g. v1.3.3]
• Platform: [e.g. iOS 15.4.1]
• Framework: [react native]
• Device model and OS version: [Iphone 14 pro max]
• Simulato
• Host [mac m1 ]

Workspace (if applicable)
Please share your workspace with Flow files and application binary if you are able to do so as that greatly helps in reproduction efforts.

Bugreport output (if applicable)
The zip files created when maestro bugreport can be uploaded here as well if applicable.

Additional context
Add any other context about the problem here.

[markholland]

Same here. Assigning a testID doesn't work either.

[warcello]

In my case tapping on text works in following way:

- tapOn: 
    text: "someText"

However it does not work with an id...

[beqramo]

same here too...

[StefanWallin]

Same here! When I try tapping something in Maestro studio, it only gives me some container view:

Reproduction repo:
StefanWallin/Maestro-character-bug#1

Bug over at bottom-sheet:
gorhom/react-native-bottom-sheet#1753

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.0
react-native	0.72.9
react-native-reanimated	3.6.1
react-native-gesture-handler	2.14.0
maestro	1.36.0

Steps To Reproduce

1. Add text Awesome Text in Bottom Sheet into content section of gorhom bottom sheet
2. Run maestro flow that tries to - assertVisible: 'Awesome Text in Bottom Sheet'
3. Maestro cannot find the text

Describe what you expected to happen:
I expect maestro to find the text.

Reproducible sample code

StefanWallin/Maestro-character-bug#1

1. Git checkout branch maestro-gorhom-bottom-sheet-1493
2. npm i
3. npx pod-install
4. npm run ios
5. Install maestro : curl -Ls "https://get.maestro.mobile.dev" | bash
6. maestro test .maestro/main.yaml

[vyobukhov]

If it will help to find a source of issue:

• the issue is IOS only
• BottomSheetModal is used
• Only "Bottom Sheet" and "Bottom Sheet Handle" are visible to Maestro and can be selected by it's accessibilityLabel.
• Everything inside the bottom sheet is not available and not listed in maestro view hierarchy

Here are two screenshots to compare

IOS	Android

[flo-sch]

This might (my knowledges of accessibility roles being limited to my own experience) be a side-effect of the default attributes introduced by the BottomSheet component in 4.6.0: https://github.com/gorhom/react-native-bottom-sheet/pull/1288/files#diff-5a2db14facf13a3da647cb85a27700e0cddade0c6a5e136428e7e63fea4ac242R39

I believe it can be worked around by overriding accessible={false} to the BottomSheet component on iOS, which then allow the children to be read by Voice Over on iOS (at least in my case).
I wonder if the issue comes from the role being set to "adjustable" by default or something else, and there are surely better ways to fix that, but give it a try perhaps?

import { Platform } from 'react-native';
import { BottomSheetModal } from '@gorhom/bottom-sheet';

<BottomSheetModal
  accessible={Platform.select({
    // setting it to false on Android seems to cause issues with TalkBack instead
    ios: false
  })}
  // ...
>
  // ...
</BottomSheetModal>

[beqramo]

@flo-sch that worked. Thank you.

[flo-sch]

NOTE: it seems that I am unable to select text components on Android within the modal for some reasons. Digging into that.
Seems to be a different issue though: gorhom/react-native-bottom-sheet#687

[Leland-Takamine]

This might (my knowledges of accessibility roles being limited to my own experience) be a side-effect of the default attributes introduced by the BottomSheet component in 4.6.0: https://github.com/gorhom/react-native-bottom-sheet/pull/1288/files#diff-5a2db14facf13a3da647cb85a27700e0cddade0c6a5e136428e7e63fea4ac242R39

I believe it can be worked around by overriding accessible={false} to the BottomSheet component on iOS, which then allow the children to be read by Voice Over on iOS (at least in my case). I wonder if the issue comes from the role being set to "adjustable" by default or something else, and there are surely better ways to fix that, but give it a try perhaps?

import { Platform } from 'react-native';
import { BottomSheetModal } from '@gorhom/bottom-sheet';

<BottomSheetModal
  accessible={Platform.select({
    // setting it to false on Android seems to cause issues with TalkBack instead
    ios: false
  })}
  // ...
>
  // ...
</BottomSheetModal>

Indeed this seems to be an instance of the situation described here: https://maestro.mobile.dev/platform-support/react-native#interacting-with-nested-components-on-ios

Going to close this out as the correct solution is described above. Please let us know if this didn't end up resolving the issue!

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar problem, please file a new issue. Make sure to follow the template and provide all the information necessary to reproduce the issue.
Thank you for helping keep us our issue tracker clean!