Open ceceppa opened 1 month ago
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:
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.
On Android RN exposes the following methods for a View:
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:
Is there an existing issue for this?
Code of Conduct
Feature Request