setAccessibilityFocus() does not work with all components (e.g Popup, Text)

[YajurG]

Problem Description

The setAccessibilityFocus() method does not set Narrator focus on specific components when using Narrator. Some example components that don't work include Popup and Text. With these components, they have to be wrapped within a View, and then setAccessibilityFocus() has to be called onto the View.

Steps To Reproduce

1. Create a Popup and/or a Text component
2. Call setAccessibilityFocus onto the Popup or Text component directly (not the parent View)
3. Start Narrator and run it on the Popup/Text component

Expected Results

When running Narrator, focus should always shift to any component that setAccessibilityFocus is called on.

CLI version

10.0.0

Environment

System:
    OS: Windows 10 10.0.22621
    CPU: (24) x64 AMD Ryzen Threadripper PRO 3945WX 12-Cores
    Memory: 49.79 GB / 63.86 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 30, 31, 33
      Build Tools: 30.0.3, 31.0.0, 33.0.0
      System Images: android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64, android-33 | Google APIs Intel x86 Atom_64
      Android NDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.18362.0, 10.0.19041.0, 10.0.22000.0, 10.0.22621.0
  IDEs:
    Android Studio: AI-213.7172.25.2113.9123335
    Visual Studio: 17.5.33516.290 (Visual Studio Enterprise 2022), 16.11.33423.256 (Visual Studio Enterprise 2019)
  Languages:
    Java: 18.0.2.1 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Target Platform Version

None

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

Semi-psueodo code

      <TouchableHighlight
         onPress={() => {
         setShowPopup1(true);
         setAccessibilityFocus(popupRef)}}
      </TouchableHighlight>
      <Popup isOpen={showPopup1} ref={popupRef}>
          <View
            style={{
              backgroundColor: colors.background,
            }}>
            <Text style={{color: colors.text}}>This is a popup.</Text>
            <TouchableHighlight
              onPress={() => {
                setShowPopup1(false);
              }}
              activeOpacity={0.2}
              underlayColor={colors.border}>
              <Text style={{color: colors.text}}>Close Popup</Text>
            </TouchableHighlight>
          </View>
        </Popup>

[chrisglein]

Add the Text repro to pair with this Popup repro. Text shouldn't be focusable by default, but can be enabled to be focusable.

[YajurG]

Add the Text repro to pair with this Popup repro. Text shouldn't be focusable by default, but can be enabled to be focusable.

Tested the focus API again on a Text component, and Text components have an accessible prop but not the focusable prop - may explain why when calling focus() or setAccessibilityFocus() on a text component causes gallery to break.

Text repro sample:

<Text 
     accessible
     style={{color: colors.text}} 
     ref={textRef}>This is a popup.
</Text>

[YajurG]

Issue on Paper so marking as not planned