Keyboard Focus Stuck in Hidden View - Unable to Navigate Using Tab/Shift+Arrow Keys

[RowlandOti]

Description

In an attempt to make app more accessible, we have added support for Talkback, screensreaders in react native screens of our hybrid app. These work fine, as accessibility roles, accessibility labels, and accessibility headers are defined in the accessible elements.

Some of our users also use keyboard navigation, and we have also tried adding that support. However, we are facing challenges in implementing that. One of the issues is that the keyboard focus seems to be getting stuck in views in the background instead of the currently visible view. This is most prevalent in nested React Native views i.e equivalent of the back stack in Android/iOS, where we show the back arrow on the top left of the screen. The View on top never gets to get keyboard focus, so users are left navigating through control elements that are off-screen. For back stack and navigation, we use react-native-navigation to layer our screens.

I have looked through the react native documentation and it seems to me that accessibility for RN ends with only Talkback and screenreaders. I have made the conclusion that accessibility focus seems to not be the same thing as keyboard focus, hence why the existing attributes for accessibility don't work. All the available props and attributes we could possibly use on views are only for screenreaders and talkback. It makes me wonder if I haven't looked hard enough. Does React Native support keyboard navigation? If yes, what attributes do I need to use to add the support?

In addition, I have looked through some of the issues filed around a similar theme, and they all seem open for a while now, with little to no engagement. Some of them are below:

• TextInput - Android/iOS Keyboard next/prev Buttons & tab Support #35077
• Nested text not focusable by hardware keyboards #35194
• Keyboard focus from a physical keyboard won't enter TextInput fields on Tab/Shift+Tab in Android #30464

Many more can be found from this search query: https://github.com/facebook/react-native/issues?q=physical+keyboard+focus+

I also saw a similar issue in react-navigation such as Navigating with a physical keyboard or TV remote gets focus out of the screen, which made me think the issue could also be caused by the navigation library in use.

Version

0.68.2

Output of npx react-native info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz
    Memory: 23.98 GB / 47.76 GB
  Binaries:
    Node: 15.5.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.3.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 27, 28, 29, 30, 31, 32, 33
      Build Tools: 27.0.3, 28.0.3, 29.0.2, 29.0.3, 30.0.0, 30.0.2, 30.0.3
      System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-25 | Google Play Intel x86 Atom, android-28 | Wear OS Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom_64
      Android NDK: 22.1.7171670
    Windows SDK: Not Found
  IDEs:
    Android Studio: AI-213.7172.25.2113.9014738
    Visual Studio: Not Found
  Languages:
    Java: 18.0.1.1 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.68.2 => 0.68.2
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Setup a nested React Native screen setup like below:

<StateProvider initialState={initialState} reducer={globalReducer}>
      <GestureHandlerRootView style={GestureHandler.container}>
        <NavigationContainer>
          <Stack.Navigator
            initialRouteName={Routes.Settings}
            screenOptions={{
              headerStyle: {
                backgroundColor: Colors.primary,
              }
            }}>

            <Stack.Screen
              name={Routes.Settings}
             component={settings}
              options={{
                headerLeft: backButton(onBackPressed(SETTINGS)),
              }}>
            </Stack.Screen>
            <Stack.Screen
              name={Routes.Registration}
              component={Registration}
              options={({ navigation }) => ({
                headerLeft:backButton(onNavigationBack(navigation))
              })}
            />
 
          </Stack.Navigator>
        </NavigationContainer>
      </GestureHandlerRootView>
    </StateProvider>

One can access the screen Routes.Registration from Routes.Settings. What we are facing is that when moving from one React Native screen to another, keyboard navigation seems to be stuck moving through elements in the previous screen, which is currently off-screen. The current screen on top does not get keyboard focus.

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

See the steps to repro

[azmainamin]

+1 to the issue. Bumping this up.

[pandu-supriyono]

Can't imagine you have found a solution to this, but could you share how you eventually may have tackled this issue?

Despite contributor efforts I still experience lots of difficulty trying to find (re)sources on accessibility w.r.t. React Native that is both comprehensive and keeps in mind the requirements of people most dependent on accessibility features.

[ArturKalach]

Description

In an attempt to make app more accessible, we have added support for Talkback, screensreaders in react native screens of our hybrid app. These work fine, as accessibility roles, accessibility labels, and accessibility headers are defined in the accessible elements.

Some of our users also use keyboard navigation, and we have also tried adding that support. However, we are facing challenges in implementing that. One of the issues is that the keyboard focus seems to be getting stuck in views in the background instead of the currently visible view. This is most prevalent in nested React Native views i.e equivalent of the back stack in Android/iOS, where we show the back arrow on the top left of the screen. The View on top never gets to get keyboard focus, so users are left navigating through control elements that are off-screen. For back stack and navigation, we use react-native-navigation to layer our screens.

I have looked through the react native documentation and it seems to me that accessibility for RN ends with only Talkback and screenreaders. I have made the conclusion that accessibility focus seems to not be the same thing as keyboard focus, hence why the existing attributes for accessibility don't work. All the available props and attributes we could possibly use on views are only for screenreaders and talkback. It makes me wonder if I haven't looked hard enough. Does React Native support keyboard navigation? If yes, what attributes do I need to use to add the support?

In addition, I have looked through some of the issues filed around a similar theme, and they all seem open for a while now, with little to no engagement. Some of them are below:

• TextInput - Android/iOS Keyboard next/prev Buttons & tab Support #35077
• Nested text not focusable by hardware keyboards #35194
• Keyboard focus from a physical keyboard won't enter TextInput fields on Tab/Shift+Tab in Android #30464

Many more can be found from this search query: https://github.com/facebook/react-native/issues?q=physical+keyboard+focus+

I also saw a similar issue in react-navigation such as Navigating with a physical keyboard or TV remote gets focus out of the screen, which made me think the issue could also be caused by the navigation library in use.

Version

0.68.2

Output of npx react-native info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz
    Memory: 23.98 GB / 47.76 GB
  Binaries:
    Node: 15.5.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.3.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 27, 28, 29, 30, 31, 32, 33
      Build Tools: 27.0.3, 28.0.3, 29.0.2, 29.0.3, 30.0.0, 30.0.2, 30.0.3
      System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-25 | Google Play Intel x86 Atom, android-28 | Wear OS Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom_64
      Android NDK: 22.1.7171670
    Windows SDK: Not Found
  IDEs:
    Android Studio: AI-213.7172.25.2113.9014738
    Visual Studio: Not Found
  Languages:
    Java: 18.0.1.1 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.68.2 => 0.68.2
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Setup a nested React Native screen setup like below:

<StateProvider initialState={initialState} reducer={globalReducer}>
      <GestureHandlerRootView style={GestureHandler.container}>
        <NavigationContainer>
          <Stack.Navigator
            initialRouteName={Routes.Settings}
            screenOptions={{
              headerStyle: {
                backgroundColor: Colors.primary,
              }
            }}>

            <Stack.Screen
              name={Routes.Settings}
             component={settings}
              options={{
                headerLeft: backButton(onBackPressed(SETTINGS)),
              }}>
            </Stack.Screen>
            <Stack.Screen
              name={Routes.Registration}
              component={Registration}
              options={({ navigation }) => ({
                headerLeft:backButton(onNavigationBack(navigation))
              })}
            />
 
          </Stack.Navigator>
        </NavigationContainer>
      </GestureHandlerRootView>
    </StateProvider>

One can access the screen Routes.Registration from Routes.Settings. What we are facing is that when moving from one React Native screen to another, keyboard navigation seems to be stuck moving through elements in the previous screen, which is currently off-screen. The current screen on top does not get keyboard focus.

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

See the steps to repro

Hello @RowlandOti ,
I am looking for solution too, there are some hacks I would say, but still thinking about fixed. Everything looks fine in iOS, but there still question about Android, the easiest wat it's usage of Modal becouse they used new activity and keyboard focus stack in the activity. I am going to try ActivityFragment for fixing maybe this can help.

I also have a lib for supporting a11y: https://www.npmjs.com/package/react-native-a11y, there are solutions for keyboard too (force focus, focus change tracking, disable focus for element, etc).

[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.