Nested text not focusable by hardware keyboards

[gp3gp3gp3]

Description

Nested text components are not focusable by hardware keyboards. This is blocking react native applications from being able to use hardware keyboards when trying to render things like rich text with urls. If the focusable prop was exposed on text this would resolve this issue.

Version

0.70.4

Output of npx react-native info

System:
OS: macOS 12.6
CPU: (10) arm64 Apple M1 Pro
Memory: 187.17 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.10.0 - ~/.nvm/versions/node/v16.10.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm
Watchman: 2022.10.03.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
Android SDK:
Android NDK: 21.4.7075529
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9014738
Xcode: 14.1/14B47b - /usr/bin/xcodebuild
Languages:
Java: 11.0.16.1 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.4 => 0.70.4
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

1: Create nested text such as

<Text>Here is some text with <Text accessibilityRole="link" onPress={() => console.log('firing here')}>Nested text</Text></Text>

2: Plug in a physical keyboard either via usb or bluetooth to phone.
3: Notice pressing tab on keyboard does not focus nested text.

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

See example in steps to reproduce above.

[fabOnReact]

#31298

[ayush547]

Thanks for fixing the issue with talkback @fabriziobertoglio1987!
Is there any fix/work around for hardware keyboard navigation?

[fabOnReact]

@ayush547 I implemented similar functionality on Android with PR #33215
The functionality is structured as follows:

1. The user clicks on a ClickableSpan, a TextView span. The Span does not correspond to an Android View.
2. The View responsible for handling touches delegates to ReactAccessibilityDelegate and triggers getVirtualViewAt with the x and y coordinates where the user tapped
3. with the x,y coordinates getVirtualViewAt retrieves the ClickableSpan
4. getBoundsInParent is responsible for calculating the coordinates of the green rectangle around the link

When using hardware keyboard navigation, you don't tap or use the touch screen, but navigate using tab or other keys.

• STEPS 1-3 may not be the correct way to handle this type of interaction as they are based on tapping
• nextFocusRight supports only navigations between views and Android Nested Text are not real views, they all belong to the same TextView. The navigation with the ExploreByTouchHelper VirtualView, uses x/y coordinates to move the screenreader focus to Nested Text.
• The method ReactTextView onFocusChanged is responsible for moving the focus from the TextView to the next view (nextFocusRight)

More info on ReactTextView onFocusChanged

The onFocusChanged callback is not triggered with ReactTextView

View.AccessibilityDelegate#onFocusChanged

    /**
     * Called by the view system when the focus state of this view changes.
     * When the focus change event is caused by directional navigation, direction
     * and previouslyFocusedRect provide insight into where the focus is coming from.
     * When overriding, be sure to call up through to the super class so that
     * the standard focus handling will occur.
     *
     * @param gainFocus True if the View has focus; false otherwise.
     * @param direction The direction focus has moved when requestFocus()
     *                  is called to give this view focus. Values are
     *                  {@link #FOCUS_UP}, {@link #FOCUS_DOWN}, {@link #FOCUS_LEFT},
     *                  {@link #FOCUS_RIGHT}, {@link #FOCUS_FORWARD}, or {@link #FOCUS_BACKWARD}.
     *                  It may not always apply, in which case use the default.
     * @param previouslyFocusedRect The rectangle, in this view's coordinate
     *        system, of the previously focused view.  If applicable, this will be
     *        passed in as finer grained information about where the focus is coming
     *        from (in addition to direction).  Will be <code>null</code> otherwise.
     */
    @CallSuper
    protected void onFocusChanged(boolean gainFocus, @FocusDirection int direction,
            @Nullable Rect previouslyFocusedRect) {
    }

The ReactRootView delegates the touch events to JavaScript

react-native/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java

Line 341 in a53512f

protected void dispatchJSPointerEvent(MotionEvent event) {

react-native/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java

Line 360 in a53512f

mJSPointerDispatcher.handleMotionEvent(event, eventDispatcher);

react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/JSPointerDispatcher.java

Line 74 in a53512f

public void handleMotionEvent(MotionEvent motionEvent, EventDispatcher eventDispatcher) {

react-native/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java

Line 364 in a53512f

protected void dispatchJSTouchEvent(MotionEvent event) {

react-native/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java

Line 380 in a53512f

mJSTouchDispatcher.handleTouchEvent(event, eventDispatcher);

react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/JSTouchDispatcher.java

Line 65 in a53512f

public void handleTouchEvent(MotionEvent ev, EventDispatcher eventDispatcher) {

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java

Line 638 in a53512f

protected boolean dispatchHoverEvent(MotionEvent event) {

I'll be happy to help you build this functionality!

[github-actions]

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

[github-actions]

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