Keyboard support

[ceceppa]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature Request

Investigate on the status of Keyboard support in React Native and React Native AMA

[ceceppa]

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.

• [Keyboard]: Closable Bottom sheet should listen to go back event #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