feat: Add accessibility collection support to VirtualizedList

This enables Android TalkBack to announce "item X of Y" when navigating
through VirtualizedList/FlatList items.

Changes:
- Add AccessibilityCollectionItem type to VirtualizedListProps
- Compute and pass accessibilityCollectionItem to each cell in VirtualizedList
- Apply accessibilityCollectionItem prop on cell wrapper View
- Add accessibilityCollection (rowCount/columnCount) to ScrollView
- Add Flow types for AccessibilityCollection and AccessibilityCollectionItem
- Fix FlatList multi-column grid accessibility with proper row/column indices

Closes #30975

Author: nathannewyen

packages/react-native/Libraries/Components/View/ViewAccessibility.js

@@ -211,7 +211,39 @@ export type AccessibilityValue = Readonly<{
   text?: Stringish,
 }>;
 
-export type AccessibilityPropsAndroid = Readonly<{
+/**
+ * Accessibility collection info for screen readers.
+ * Used to describe a collection of items (e.g., list, grid).
+ *
+ * @platform android
+ */
+export type AccessibilityCollection = $ReadOnly<{
+  // The number of rows in the collection
+  rowCount: number,
+  // The number of columns in the collection
+  columnCount: number,
+}>;
+
+/**
+ * Accessibility collection item info for screen readers.
+ * Used to announce position in collection (e.g., "item 3 of 10").
+ *
+ * @platform android
+ */
+export type AccessibilityCollectionItem = $ReadOnly<{
+  // The row index of this item in the collection
+  rowIndex: number,
+  // The column index of this item in the collection
+  columnIndex: number,
+  // The number of rows this item spans
+  rowSpan: number,
+  // The number of columns this item spans
+  columnSpan: number,
+  // Whether this item is a heading
+  heading: boolean,
+}>;
+
+export type AccessibilityPropsAndroid = $ReadOnly<{
   /**
    * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
    * the text is read aloud. The value should should match the nativeID of the related element.
@@ -220,6 +252,22 @@ export type AccessibilityPropsAndroid = Readonly<{
    */
   accessibilityLabelledBy?: ?string | ?Array<string>,
 
+  /**
+   * Describes a collection of items for screen readers.
+   * Used on container elements like lists and grids.
+   *
+   * @platform android
+   */
+  accessibilityCollection?: ?AccessibilityCollection,
+
+  /**
+   * Describes the position of an item within a collection for screen readers.
+   * Enables TalkBack to announce "item X of Y" when navigating.
+   *
+   * @platform android
+   */
+  accessibilityCollectionItem?: ?AccessibilityCollectionItem,
+
   /**
    * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
    * the text is read aloud. The value should should match the nativeID of the related element.

packages/react-native/Libraries/Lists/FlatList.js

@@ -646,11 +646,21 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
         return (
           <View style={StyleSheet.compose(styles.row, columnWrapperStyle)}>
             {item.map((it, kk) => {
+              // Compute accessibility collection item info for grid layouts
+              // rowIndex is the row index, columnIndex is position within the row
+              const accessibilityCollectionItem = {
+                rowIndex: index,
+                columnIndex: kk,
+                rowSpan: 1,
+                columnSpan: 1,
+                heading: false,
+              };
               const element = render({
                 // $FlowFixMe[incompatible-type]
                 item: it,
                 index: index * cols + kk,
                 separators: info.separators,
+                accessibilityCollectionItem,
               });
               return element != null ? (
                 <React.Fragment key={kk}>{element}</React.Fragment>