Added Support for Entrance/exit from collection by Flatlist (#31630)

Summary:
Issue #30964 .When using a screen reader, flatlist does not announce entrance/ exit from the flat list.

## Changelog

[Android] [Changed] - Added support for accessibility role of "list" for flatlist and sectioned list

Pull Request resolved: #31630

Test Plan: I have added accessibility role prop in flatlist and sectioned list in rntester app, that will announce entrance/ exit from flatlist and sectioned list.

Reviewed By: kacieb

Differential Revision: D29599351

Pulled By: blavalla

fbshipit-source-id: e16ec69a694780d12f15f88a1e6bb5d7d77ac15f

Author: anaskhraza

Libraries/Components/View/ViewAccessibility.js

@@ -41,6 +41,7 @@ export type AccessibilityRole =
   | 'tab'
   | 'tablist'
   | 'timer'
+  | 'list'
   | 'toolbar';
 
 // the info associated with an accessibility action

Libraries/DeprecatedPropTypes/DeprecatedViewAccessibility.js

@@ -40,6 +40,7 @@ module.exports = {
     'tab',
     'tablist',
     'timer',
+    'list',
     'toolbar',
   ],
 };

React/Views/RCTViewManager.m

@@ -61,6 +61,7 @@ @implementation RCTConvert (UIAccessibilityTraits)
       @"tablist" : @(UIAccessibilityTraitNone),
       @"timer" : @(UIAccessibilityTraitNone),
       @"toolbar" : @(UIAccessibilityTraitNone),
+      @"list" : @(UIAccessibilityTraitNone),
     }),
     UIAccessibilityTraitNone,
     unsignedLongLongValue)

ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java

@@ -107,6 +107,7 @@ public enum AccessibilityRole {
     TAB,
     TABLIST,
     TIMER,
+    LIST,
     TOOLBAR;
 
     public static String getValue(AccessibilityRole role) {
@@ -135,6 +136,8 @@ public static String getValue(AccessibilityRole role) {
           return "android.widget.SpinButton";
         case SWITCH:
           return "android.widget.Switch";
+        case LIST:
+          return "android.widget.AbsListView";
         case NONE:
         case LINK:
         case SUMMARY:

packages/rn-tester/js/examples/FlatList/FlatListExample.js

@@ -196,6 +196,7 @@ class FlatListExample extends React.PureComponent<Props, State> {
             getItemLayout={
               this.state.fixedHeight ? this._getItemLayout : undefined
             }
+            accessibilityRole="list"
             horizontal={this.state.horizontal}
             inverted={this.state.inverted}
             key={

packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js

@@ -275,6 +275,7 @@ export function SectionList_scrollable(Props: {
         ItemSeparatorComponent={info => (
           <CustomSeparatorComponent {...info} text="ITEM SEPARATOR" />
         )}
+        accessibilityRole="list"
         debug={debug}
         inverted={inverted}
         disableVirtualization={!virtualized}

packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js

@@ -95,6 +95,7 @@ const SectionListBaseExample: React.AbstractComponent<
       <SectionList
         ref={ref}
         testID="section_list"
+        accessibilityRole="list"
         sections={DATA}
         keyExtractor={(item, index) => item + index}
         style={styles.list}