CODEWITHSUNDEEP
react-nativeaccessibilityreact-native-ios
Ananth
Ananth

Reputation: 845

Incorrect accessibility focus order for nested elements in React Native

I'm working in a mixed-match app where we use React Native components for a few modules. In this case, I've a tableview in which we add RN components in a few of the cells.

I was able to enable accessibility for nested elements in those React Native components but the order of focus seems to be incorrect when added in a UITableView.

The view hierarchy would be like the below:

 <E0>
    <E1 accessible={true}>
       <E11 accessible={true}>
       <E12 accessible={true}>...
    <E2 accessible={true}>
       <E21 accessible={true}>
       <E22 accessible={true}>...

I'm expecting the focus order to be E1, E11, E12, E2, E21, E22

but it's announcing in the order E1, E2, E11, E12, E21, E22 ie, parent elements and then child elements

In iOS we have the accessibilityElements property to set the order. Is there any way to set the focus order like that in React Native, or is there any other way to achieve that?

P.S.: The same component works as expected, (ie. voiceover is announced in the correct order) when I display the particular component in a view controller.

Any timely help / useful suggestions would be greatly appreciated as I've spent more than a couple of days in this issue.

Upvotes: 6

Views: 5177

Answers (4)

Artur Kalach
Artur Kalach

Reputation: 46

Thanks, @Andrew, for sharing react-native-a11y.

However, I have something new and better.

I have finished working on an "advanced" ordering system for React Native:

I will update react-native-a11y later, but if you need only ordering, I would suggest using react-native-a11y-order.

Upvotes: 1

Ananth
Ananth

Reputation: 845

We transitioned our app to more of a green field RN app where we are not facing issues like this again. That might be the only solution AFAIK.

Upvotes: 0

Andrew
Andrew

Reputation: 5240

While Nicolai's answer might achieve an acceptable result, in terms of whether there is a way to actually set the screen reader focus order in React Native:

  • Not within React Native itself, which is disappointing. See the beginning of this discussion.

There are some non-core potential solutions:

Upvotes: 0

Nicolai Lissau
Nicolai Lissau

Reputation: 8322

Under the assumption that people with a screen reader enabled does not use their visual as much, you can shift around the elements, making the screen reader read them in the right order.

In your case that would mean if the screen reader is enabled, then add a marginTop of for instance 50 to E2

Here's an example: Left is when the screenreader is enabled.

enter image description here

Checking whether the screen reader is enabled can be done with: AccessibilityInfo

Dislaimer: I know this is a rather ridicules answer, since it just avoids the issue instead of solving it, but I'm posting it anyway, because it did solve a similar problem to yours and it seems there is no solution coming from React Native.

Upvotes: 1

Related Questions