Accessibility focus order in React Native

[louy]

Introduction

I know the accessibility focus order of components have been mentioned a few times but I couldn't really find anything helpful, so I thought I'd start a new discussion about it here.

facebook/react-native#13152
facebook/react-native#24239

The Core of It

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 (and more specifically on iOS) this doesn't seem to be the case.

I'm not really quite sure how iOS decides which views are read first, but I suspect it has to do with the timing and order in which these views were added to the screen.

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

Discussion points

Have anyone here had this issue before? What was your solution for it? Is this something that should live in a package (and are there any packages that already do that), or is it something that can/should be done in react-native?

[louy]

Actually I've just understood what iOS does thanks to this great article from Reveal App.

In short, iOS looks at how the views are laid out on the screen and reads them left to right, top to bottom.

There are two ways to change this behaviour:

• Grouping subviews of a particular view together, so that iOS would read all the subviews that group before moving on to the next view outside the group. This is achieved using the method shouldGroupAccessibilityChildren, which is a BOOL.
• Specifying an explicit order for subviews, which is done using the accessibilityFields property on UIView, which is an NSArray

I've created a custom view that allows control of both these attributes (the latter using React refs), but I feel like this might be something that makes sense to have in RN core. Wdyt?

[zoharIOS]

Can you share your solution please ?

[louy]

This is what I have

https://gist.github.com/louy/6b66c45ae47bb4e3bac5a104dd0649ff

I think it should be built into RN core tbh, but this works well for now

[silverchen]

@louy Do you already have a PR on react-native core for this?

[louy]

@louy Do you already have a PR on react-native core for this?

Nope just the snippet I shared above

[AdamGerthel]

I'd love to see support for shouldGroupAccessibilityChildren. I'm having trouble with two sibling (visually) views. The layout makes sense for someone with full vision, but not at all for a screenreader. It's basically two fieldsets placed next to each other. See below (I'm using the default right-swipe to navigate):

Ideally I'd like to be able to make the screenreader understand that it should traverse the first fieldset before moving to the second, i.e.

"Stats, question mark, Slot, Head..." etc. rather than "Stats, question mark, When equipped, question mark"

[VNDRN]

@AdamGerthel did you find a solution to your problem? Facing the same issue here

[louy]

You can use this snippet as a temporary solution until it's built into RN

https://gist.github.com/louy/6b66c45ae47bb4e3bac5a104dd0649ff

When you wrap your views in a <AccessibilityWrapper>, the screen reader will treat them as a group and read them in order

[VNDRN]

thanks @louy , I'm fairly new to this but do I just copy the .tsx file into my project and use it like so? Or do I have to do something in the iOS folder as well?

[louy]

Yes add the tsx files, but also make sure to drag the iOS files into Xcode (not just to the iOS folder, you have to drag them into the project tree in Xcode UI)

[VNDRN]

Thanks @louy ! Your solution solved my problem!

[lmccormick3]

Thanks so much for creating this, @louy. Does anyone know if there is any movement on RN accessibility enhancements and focus order control? Given that so many of us are having to hack together multiple workarounds, a tabIndex-type option or more accessibility options and control should definitely be prioritized.