Accessibility focus on React Native
Sometimes you need to programmatically move the accessibility focus to a specific element. For example, when you present a modal, the assistive technology should move it's focus to it. Or when moving to a new screen, you might want assistive technologies to focus a specific element.
In React Native you can move accessibility focus by using the setAccessibilityFocus
method from the AccessibilityInfo class
. This method requires a reactTag
, which you can find by calling the findNodeHandle
method.
function Component() {
const ref = useRef(null);
function setFocus() {
const reactTag = findNodeHandle(ref.current);
if (reactTag) {
AccessibilityInfo.setAccessibilityFocus(reactTag);
}
}
return <View ref={ref} accessible accessibilityLabel="Modal" />
};