Android: Entrance/exit from collection

[amarlette]

Requires API Proposal

This issue may require a new API or a change to an existing API. An API proposal should be added and discussed before proceeding with implementation. The API proposal can be added in the comments of this issue or linked as a separate issue.

Description

Entrance/exit from collection Not supported by:

• Flatlist Entrance/exit from collection Not supported by Flatlist #30964
• SectionList Entrance/exit from collection not supported by SectionList #30965
• VirtualizedList Entrance/exit from collection not supported by VirtualizedList  #30966
• ScrollView Entrance/exit from collection not supported by ScrollView #30967

No components can be set as any collection role. With support for "List" or "Grid" roles would these would likely work as expected.

React Native version:

v0.63

Snack

https://snack.expo.io/Dh_iVb7F5

Expected Behavior

When first focusing into a collection element, screen readers will announce "in " (e.g. list, grid, pager, etc.), and when first focusing out of a collection, it will announce "out of ". This behavior happens automatically if the element has the proper role applied.

Android Details

This behavior is hinged on adding the proper accessibility role for these elements. Right now the accessibilityRole prop does not support a role of "list", "grid", or "pager" (the 3 collection types on Android), and adding them would be one solution to this problem. These roles could instead be set directly by the Android implementations for the above list components if we don't want to support these roles elsewhere.

To do this, you will need to set the className property on the AccessibilityNodeInfo associated with the list's View in Java to the role that Talkback expects (shown here: https://github.com/google/talkback/blob/master/utils/src/main/java/Role.java).

[blavalla]

@lunaleaps , @kacieb , @nadiia , One way to fix this issue would be to have an accessibilityRole created for the collection types (list, grid, pager). These roles have no counterpart on iOS however.

Some roles that currently exist also seem to be no-ops for iOS, such as menubar (which just maps to a trait of "none" here: https://www.internalfb.com/intern/diffusion/FBS/browsefile/master/xplat/js/react-native-github/React/Views/RCTViewManager.m?lines=50), but this is not really documented that some of these properties are iOS only or Android only.

Is the reactnative.dev documentation also in this repo? If so, should we open a task to document which roles are supported on which platforms?

[kacieb]

One way to fix this issue would be to have an accessibilityRole created for the collection types (list, grid, pager). These roles have no counterpart on iOS however.

This sounds reasonable to me. I've marked that this one should have an API proposal before anyone implements it, since I imagine there are several ways of solving it (add new roles that are Android-only, or build it into the existing components natively, are two ways I can think of, although I think new roles makes the most sense).

Is the reactnative.dev documentation also in this repo? If so, should we open a task to document which roles are supported on which platforms?

We should definitely document which roles are supported on which platforms. Pull requests to update the website can be submitted here: https://github.com/facebook/react-native-website

[fabOnReact]

• test list/pager roles
• update documentation on reactnative website [Documentation] adding accessibilityRole grid to documentation react-native-website#3224
  add prop types grid and specify that is for android only
• read about Android ViewPager