`accessible=true` prop on Fluent Tester root view breaks element querying on iOS E2E tests

Willing to submit a PR to fix?

• I am willing to submit a PR to fix

Requested priority

Normal

Products/applications affected

CI fails without disabling the accessible prop on ios for this PR: https://github.com/microsoft/fluentui-react-native/pull/2226

Package version(s)

- yarn 1.22.19
- npm 8.0.0
- react-native ^0.68.0
- react-native-macos ^0.68.0
- appium 2.0.0-beta.41
- appium-xcuitest-driver 4.11.1

OS version(s)

iOS 15.5

Platform

• iOS
• macOS
• win32
• windows
• android

Xcode version

xCode 14.0.1

Please provide a reproduction of the bug

1. Clone this PR: https://github.com/microsoft/fluentui-react-native/pull/2226
2. In apps/fluent-tester/src/FluentTester.tsx, change the accessible prop on the View with testID={ROOT_VIEW} from Platform.OS === 'ios' to true.

  return (
    // TODO: Figure out why making this view accessible breaks element querying on iOS.
    <View accessible={Platform.OS !== 'ios'} testID={ROOT_VIEW} style={commonTestStyles.flex}>
      {Platform.OS === ('win32' as any) ? (
        <FocusTrapZone style={themedStyles.root}>
          <TesterContent />
        </FocusTrapZone>
      ) : (
        <RootView style={themedStyles.root}>
          <TesterContent />
        </RootView>
      )}
    </View>
  );

1. From apps/fluent-tester, run yarn ios to build the iOS app. Then, once the app is running, run yarn e2etest:ios to run the E2E test suite. Watch the tests fail. (if you don’t have a mac, just run this in the CI)

Actual behavior

The compiled native app returns this view hierarchy:

When querying elements in appium with strategy accessibility id, we start from the highlighted RCTView with accessibility id Fluent_Tester_Root_View. For each chained query, we try and find the RCTTextView saying “Fluent UI Tests”, which is a direct child of Fluent_Tester_Root_View. This query always fails when the view is accessible.

Expected behavior

Given that the RCTTextView is a direct child of our starting View, our query should succeed and return the text view.

[Saadnajmi]

Thanks. I opened a bug internally with my team mirroring this one too.

[lyzhan7]

Update - seems like setting accessible=true is the right thing to do on windows, and I also tested the macOS FluentTester with the accessibility inspector, and confirmed that it doesn’t have the same issue as iOS. Confirmed that iOS is the exception here and we should keep accessible=false for iOS only. Updated the comment in FluentTester to explain this, and closing this issue