TalkBack support for ScrollView accessibility announcements (list and grid)

Libraries/Lists/FlatList.js

@@ -614,24 +614,72 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
           return (
             <View style={StyleSheet.compose(styles.row, columnWrapperStyle)}>
               {item.map((it, kk) => {
-                const element = renderer({
-                  item: it,
-                  index: index * numColumns + kk,
-                  separators: info.separators,
-                });
+                const accessibilityCollectionItem = {
+                  rowIndex: index,
+                  rowSpan: 1,
+                  columnIndex: (index * numColumns + kk) % numColumns,
+                  columnSpan: 1,
+                  heading: false,
+                  itemIndex: index * numColumns + kk,
+                };
+
+                const element = (
+                  // $FlowFixMe[prop-missing] https://bit.ly/3viYSh8
+                  <View
+                    importantForAccessibility="yes"
+                    style={styles.cellStyle}
+                    accessibilityCollectionItem={accessibilityCollectionItem}>
+                    {renderer({
+                      item: it,
+                      index: index * numColumns + kk,
+                      separators: info.separators,
+                    })}
+                  </View>
+                );
                 return element != null ? (
                   <React.Fragment key={kk}>{element}</React.Fragment>
                 ) : null;
               })}
             </View>
           );
         } else {
-          return renderer(info);
+          const {index} = info;
+
+          const accessibilityCollectionItem = {
+            rowIndex: index,
+            rowSpan: 1,
+            columnIndex: 0,
+            columnSpan: 1,
+            heading: false,
+            itemIndex: index,
+          };
+
+          return (
+            // $FlowFixMe[prop-missing] https://bit.ly/3viYSh8
+            <View
+              importantForAccessibility="yes"
+              style={styles.cellStyle}
+              accessibilityCollectionItem={accessibilityCollectionItem}>
+              {renderer(info)}
+            </View>
+          );
         }
       },
     };
   };
 
+  _getAccessibilityCollection = () => {
+    const accessibilityCollectionProps = {
+      itemCount: this.props.data ? this.props.data.length : 0,
+      //$FlowFixMe[incompatible-call] see https://bit.ly/3viYSh8
+      rowCount: this._getItemCount(this.props.data),
+      columnCount: numColumnsOrDefault(this.props.numColumns),
+      hierarchical: false,
+    };
+
+    return accessibilityCollectionProps;
+  };
+
   render(): React.Node {
     const {
       numColumns,
@@ -646,6 +694,11 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
         getItem={this._getItem}
         getItemCount={this._getItemCount}
         keyExtractor={this._keyExtractor}
+        accessibilityCollection={this._getAccessibilityCollection()}
+        accessibilityRole={Platform.select({
+          android:
+            numColumnsOrDefault(this.props.numColumns) > 1 ? 'grid' : 'list',
+        })}
         ref={this._captureRef}
         viewabilityConfigCallbackPairs={this._virtualizedListPairs}
         removeClippedSubviews={removeClippedSubviewsOrDefault(
@@ -659,6 +712,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
 
 const styles = StyleSheet.create({
   row: {flexDirection: 'row'},
+  cellStyle: {flex: 1},
 });
 
 module.exports = FlatList;