Android: Position in Collection not supported by Flatlist, SectionList, VirtualizedList, or ScrollView

[amarlette]

Description

Collections on Android have a CollectionInfo property which defines the size of the entire collection, and whether those elements are in rows, columns, or both. This information will be announced as part of the "in list" and "out of list" announcements, as well as when the list scrolls. Currently React Native does not support any way to define this information, and also doesn't support the list/grid/pager roles required to surface it.

Position in Collection not from collection Not supported by:

• Flatlist Position in Collection not supported by Flatlist #30973
• SectionList Position in Collection not supported by SectionList  #30974
• VirtualizedList Position in Collection not supported by VirtualizedList  #30975
• ScrollView Position in Collection not supported by ScrollView  #30976

Since this behavior depends on both the collection info being present and the component having the proper accessibility role set, this task is dependent on #30839.

React Native version:

v0.63

Expected Behavior

On focus of a list component, screen readers should announce "In list, N items". Upon scroll of the list via the next page/previous page gestures, it should announce "Showing items X to Y of Z".

Android Details

Collection-type views on android (lists, grids, and pagers) all have a CollectionInfo object attached to their AccessibilityNodeInfo. This CollectionInfo object contains the total count of the items in the collection, how many rows the collection has, how many columns it has, and whether its hierarchical. Each item in the collection (ie. every direct child element) has a CollectionItemInfo object on its AccessibilityNodeInfo. This object defines the row/column index, the row/column span, and whether the item is selected and whether it is a heading.

https://developer.android.com/reference/android/view/accessibility/AccessibilityNodeInfo.CollectionInfo
https://developer.android.com/reference/android/view/accessibility/AccessibilityNodeInfo.CollectionItemInfo

Right now, some of this information might be being added to these list components, depending on what native Android components they are being mapped to. But it's currently not being surfaced to the user if that is the case, due to the components not having the ability to set (or a hard coded value set) of the proper accessibilityRole.

[blavalla]

@kacieb, @lunaleaps, @nadiia, this one may require some API to be added to set this information, for example <View accessibilityCollectionInfo={{count: 10, rows: 1, columns, 2}} />.

Or alternatively, if you don't want a user to be able to set the collection info directly (as iOS has no counterpart here), it should be automatically set based on the number of child elements passed into these lists. Either approach will work, as long as the accessibility system can parse out the collection info.

You may be able to re-purpose the accessibilityValue prop, which has a "min", "max", and "current" value, but it wouldn't be able to work for grid-like structures (although we don't have any core grid component currently to worry about).

[kacieb]

Potentially a prop like this could be exposed as a native prop on ScrollView.js.

Maybe an automatic count could be accomplished in the native Android React Native ScrollView component. What does "count" mean in this context? Number of children? Number of items in the list? Number of focusable items in the list? Is it possible for us to automatically understand this? I would think with an infinitely available number of structures, it might be hard to automatically determine what counts as a list item, so we might have to rely on this information getting passed in by the user.

[kacieb]

This is an issue I think would be great to see a proposal for before anyone begins working on it, since there are likely multiple ways to solve this.

[blavalla]

What does "count" mean in this context?

Count should be the number of child elements, not the number of descendants. Technically speaking, Talkback treats all children of collections as focusable elements, as this is one if its weird edge cases in its focusability logic.

[kacieb]

Count should be the number of child elements

That's great, I think that means this can be done automatically in the native ScrollView (I have to double check, but I know there's a way to get children, so I'd think we can count them in native) so that the user doesn't have to think about it.

Something worth noting for implementing this - ScrollView.js is it is internally structured (this is pseudocode):

<ScrollViewNativeView>
   <ScrollViewContentView>
      // actual user content here
   </...>
</...>

So we'll want to make sure the count is the number of children in the content view.