Unable to set focus for accessibility VoiceOver

[disha98]

Description

I'm trying to set the focus order of elements in my screen for voiceover to announce in my Swift+RN project, however there is no provision to do the same. I also wanted to discuss if there's any straightforward way to set the focus to an element when a page loads.

We have made multiple attempts to use useRef (Setting focus for accessibility in RN) and none of these seem to be working for us.

iOS uses accessibilityElements to do the same and allows us to set the order of elements. I'm trying to find something similar on React Native which would help me set the reference.

On the web, screen readers determine the flow of which things are read by looking at the DOM tree and going from top the bottom, and this is the way accessibility is managed in React DOM.

However, on the native side this doesn't seem to be the case.

iOS exposes some APIs to allow developers to control this order, but React Native doesn't seem to expose that to the Javascript side.

I am displaying a RN module using the bridge from Swift, as a ViewController.

React Native version:

react-native: 0.63.3 => 0.63.3
OS: macOS 10.15.7
Xcode: 12.2

Steps To Reproduce

Navigating to the next screen in my React Native project does not allow me to set the focus to the first element that I want and the focus is incorrect. In cases where a view is presented in top of another view, the focus falls to the background instead. There are also multiple other issues we face in terms of VoiceOver flexibility.

Expected Results

Be able to set the focus order explicitly, set focus on a particular element when we navigate to a new page.

Apart from these issues on iOS, we also face issues on our parallel Android + RN app, where we are missing Keyboard (Physical BT Keyboard) focus (something similar to what is already mentioned in this issue. The issue of setting focus on a new page persists too.

[nickmcmillan]

Facing the same problem. The ordering of my layout makes sense visually, but not for folks using Voiceover.

Looks like this has been an unresolved issue for a while, here's an issue with a bit more activity: react-native-community/discussions-and-proposals#118

[amarlette]

This issue should be resolved by #30888 once that issue is closed as part of the Improved React Native Accessibility Project

[frags51]

+1, would appreciate this addition.

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

[unyo]

@nickmcmillan try grouping your elements using a <ScrollView> instead of a <View> react-native-community/discussions-and-proposals#389 (comment).

@disha98 focus can be set using AccessibilityInfo.setAccessibilityFocus, but I think the problem with the 'screens' (react-navigation?) kind of has to do with the fact that react-navigation uses virtual 'Views' instead of iOS's native 'Views', which I think trigger the Voiceover 'boop' saying a new View was loaded. This is similar to the issue we see in browser-based client-routed apps on the web, where Voiceover focus in IOS Safari (Chome is super broken) will focus in the middle of the page after a client-side route (<Link>), but if you click on a normal link (<a>), it will focus to the top of the page (and in OSX, will read through the page).

If I had the time I'd maybe check out react-navigation's native stack?

(See below: In swift, when using native View's the focus changes to the first item in the page - I added some native code to change the focus to the lower button, but as you can see it still focuses the first item on the page first - which (I think) means the only good option to control what iOS focuses on (even native) View load is the accessibility prop). Android is not as much of a pain as iOS, iirc it seems to follow DOM order and setAccessibilityFocus works as expected.

RPReplay_Final1705956302.2.MP4