Tests done:

https://github.com/workday-accessibility/accessibility-eval/blob/main/keyboard.md

After a quick investigation, RN has decent keyboard support for both Android and iOS. Some features missing:

Handling "Go back"

A user should be able to dismiss a Bottom Sheet / Modal when performing the "Go back" action. This does not work with a custom modal or our bottom sheet.

[ ] #236

Customise focus order

On Android RN exposes the following methods for a View:

nextFocusDown
nextFocusForward
nextFocusLeft
nextFocusRight
nextFocusUp

Those methods allows "forcing" a custom focus order when the user navigates using the arrow keys, a dummy example:

import { useRef, useState } from "react";
import { Pressable, Text, View, findNodeHandle } from "react-native";

export const Test = () => {
    let doIt = true;
    const b1 = useRef();
    const [test, setTest] = useState(-1)

    const onLayout = () => {
        setTimeout(() => {
          const elementId = findNodeHandle(b1.current);
            if (doIt && elementId) {
                doIt = false;

                console.info({elementId});
                setTest(elementId);
            }
        }, 0);
    }

    return (
        <>
            <Pressable style={{ borderWidth: 1, padding: 12 }} ref={b1}><Text>One</Text></Pressable>
            <View style={{ flexDirection: 'row' }}>
                <Pressable style={{ borderWidth: 1, padding: 12 }} nextFocusRight={test}><Text>Two</Text></Pressable>
                <Pressable style={{ borderWidth: 1, padding: 12 }} onLayout={onLayout}><Text>Tree</Text></Pressable>
            </View>
        </>
    )
}

The downside are:

this method works on Android only
tab focus is not affected, so the logical focus order might not be respected

TODO:

[ ] Add ability to customise the focus order, see https://github.com/ArturKalach/react-native-a11y/tree/master for some reference

FormidableLabs / react-native-ama

Keyboard support #230

Is there an existing issue for this?

Code of Conduct

Feature Request

Handling "Go back"

Customise focus order

TODO: