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

[amarlette]

Description

Collections on Android have a name defined by their contentDescription property. This name will be announced as part of the "in list" and "out of list" announcements. Since we do not support the list/grid/pager roles, the contentDescription's set on these components don't announce these names upon focus into or out of any descendant elements.

Collection Name not from collection Not supported by:

• Flatlist Collection Name not supported by Flatlist #30968
• SectionList Collection Name not supported by SectionList  #30969
• VirtualizedList Collection Name not supported by VirtualizedList #30970
• ScrollView Collection Name not supported by ScrollView  #30971

React Native version:

v0.63

Expected Behavior

If one of the list components has a contentDescription set on it, on first focus into that list, screen readers will announce "in list ". Upon focus out of the list, it should announce "out of list ".

Android Details

This should work properly if any of the collection roles were able to be set, which makes this task dependent on #30839. By adding these roles, and properly setting the contentDescription the collection name should automatically be announced.

[sidverma32]

Hi @amarlette , I would like to work on this. Please guide me with some initial steps on "collection roles" to proceed, that would be helpful.

[fabOnReact]

The accessibilityLabel is correctly announced when adding <FlatList accessibilityRole="grid" accessibilityLabel="my label for Flatlist" .../>.
ReactNative uses the accessibilityLabel prop to set the android contentDescription, but the role grid is not yet documented on the react-native website. I will prepare the documentation.

accessibilityLabel/contentDescrition announced when setting FlatList props accessibilityRole to "grid"

2022-07-25.15-58-39.mp4

same tasks from #30861 (comment)

• 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 Pager role fabOnReact@25a1612 https://github.com/google/talkback/blob/771de7cdbf55b6adb4ca4c64c27a52584f2337cc/utils/src/main/java/com/google/android/accessibility/utils/Role.java#L353-L358
• add pager role