From 2d5882132fb2c533fe9bbba83576b8fac4aca727 Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Fri, 17 Jun 2022 17:59:51 -0700
Subject: [PATCH] TalkBack support for ScrollView accessibility announcements
 (list and grid) - Javascript Only Changes (#33180)

Summary:
This is the Javascript-only changes from D34518929 (https://github.com/facebook/react-native/commit/dd6325bafe1a539d348f3710e717a6344576b859), split out for push safety. Original summary and test plan below:

This issue fixes [30977][17] . The Pull Request was previously published by [intergalacticspacehighway][13] with [31666][19].
The solution consists of:
1. Adding Javascript logic in the [FlatList][14], SectionList, VirtualizedList components to provide accessibility information (row and column position) for each cell in the method [renderItem][20] as a fourth parameter [accessibilityCollectionItem][21]. The information is saved on the native side in the AccessibilityNodeInfo and announced by TalkBack when changing row, column, or page ([video example][12]). The prop accessibilityCollectionItem is available in the View component which wraps each FlatList cell.
2. Adding Java logic in [ReactScrollView.java][16] and HorizontalScrollView to announce pages with TalkBack when scrolling up/down. The missing AOSP logic in [ScrollView.java][10] (see also the [GridView][11] example) is responsible for announcing Page Scrolling with TalkBack.

Relevant Links:
x [Additional notes on this PR][18]
x [discussion on the additional container View around each FlatList cell][22]
x [commit adding prop getCellsInItemCount to VirtualizedList][23]

## Changelog

[Android] [Added] - Accessibility announcement for list and grid in FlatList

Pull Request resolved: https://github.com/facebook/react-native/pull/33180

Test Plan:
[1]. TalkBack announces pages and cells with Horizontal Flatlist in the Paper Renderer ([link][1])
[2]. TalkBack announces pages and cells with Vertical Flatlist in the Paper Renderer ([link][2])
[3]. `FlatList numColumns={undefined}` Should not trigger Runtime Error NoSuchKey exception columnCount when enabling TalkBack. ([link][3])
[4]. TalkBack announces pages and cells with Nested Horizontal Flatlist in the rn-tester app ([link][4])

[1]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1050452894
[2]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1050462465
[3]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1032340879
[4]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1050618308
[10]:https://github.com/aosp-mirror/platform_frameworks_base/blob/1ac46f932ef88a8f96d652580d8105e361ffc842/core/java/android/widget/AdapterView.java#L1027-L1029 "GridView.java method responsible for calling setFromIndex and setToIndex"
[11]:https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1042518901 "test case on Android GridView"
[12]:https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1050452894 "TalkBack announces pages and cells with Horizontal Flatlist in the Paper Renderer"
[13]:https://github.com/intergalacticspacehighway "github intergalacticspacehighway"
[14]:https://github.com/fabriziobertoglio1987/react-native/blob/80acf523a4410adac8005d5c9472fb87f78e12ee/Libraries/Lists/FlatList.js#L617-L636 "FlatList accessibilityCollectionItem"
[16]:https://github.com/fabriziobertoglio1987/react-native/blob/5706bd7d3ee35dca48f85322a2bdcaec0bce2c85/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java#L183-L184 "logic added to ReactScrollView.java"
[17]: https://github.com/facebook/react-native/issues/30977
[18]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6
[19]: https://github.com/facebook/react-native/pull/31666
[20]: https://reactnative.dev/docs/next/flatlist#required-renderitem "FlatList renderItem documentation"
[21]: https://github.com/fabriziobertoglio1987/react-native/commit/75147359c5d070406ebbe488c57c3cd94c08c19d "commit that introduces fourth param accessibilityCollectionItem in callback renderItem"
[22]: https://github.com/facebook/react-native/pull/33180#discussion_r826748664 "discussion on the additional container View around each FlatList cell"
[23]: https://github.com/fabriziobertoglio1987/react-native/commit/d50fd1a68112f40f4be3ac3aa4d67f96df33e387 "commit adding prop getCellsInItemCount to VirtualizedList"

Reviewed By: kacieb

Differential Revision: D37189197

Pulled By: blavalla

fbshipit-source-id: 3765213c5d8bfde56e0e5f155cdd899c368512e7
---
 .../Components/View/ViewAccessibility.js      |   1 +
 Libraries/Components/View/ViewPropTypes.js    |  17 +
 Libraries/Lists/FlatList.js                   |  10 +-
 Libraries/Lists/VirtualizedList.js            |  73 +++-
 Libraries/Lists/VirtualizedSectionList.js     |  17 +-
 .../__snapshots__/FlatList-test.js.snap       |  59 +++
 .../__snapshots__/SectionList-test.js.snap    |  52 ++-
 .../VirtualizedList-test.js.snap              | 360 ++++++++++++++++++
 .../VirtualizedSectionList-test.js.snap       |  88 +++++
 .../js/examples/FlatList/FlatList-basic.js    |  24 +-
 .../examples/FlatList/FlatList-multiColumn.js |   7 +-
 .../js/examples/FlatList/FlatList-nested.js   | 124 ++++++
 .../SectionList/SectionList-scrollable.js     |  18 +-
 .../js/utils/RNTesterList.android.js          |   5 +
 14 files changed, 824 insertions(+), 31 deletions(-)
 create mode 100644 packages/rn-tester/js/examples/FlatList/FlatList-nested.js

diff --git a/Libraries/Components/View/ViewAccessibility.js b/Libraries/Components/View/ViewAccessibility.js
index 51343752c55e4e..182112160c680e 100644
--- a/Libraries/Components/View/ViewAccessibility.js
+++ b/Libraries/Components/View/ViewAccessibility.js
@@ -43,6 +43,7 @@ export type AccessibilityRole =
   | 'tablist'
   | 'timer'
   | 'list'
+  | 'grid'
   | 'toolbar';
 
 // the info associated with an accessibility action
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
index 0d6753be9f755c..aff394035d2093 100644
--- a/Libraries/Components/View/ViewPropTypes.js
+++ b/Libraries/Components/View/ViewPropTypes.js
@@ -464,6 +464,23 @@ export type ViewProps = $ReadOnly<{|
    */
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
 
+  /**
+   *
+   * Node Information of a FlatList, VirtualizedList or SectionList collection item.
+   * A collection item starts at a given row and column in the collection, and spans one or more rows and columns.
+   *
+   * @platform android
+   *
+   */
+  accessibilityCollectionItem?: ?{
+    rowIndex: number,
+    rowSpan: number,
+    columnIndex: number,
+    columnSpan: number,
+    heading: boolean,
+    itemIndex: number,
+  },
+
   /**
    * Specifies the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
    *
diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js
index 8e810372bd74d7..e08fb950dd5c20 100644
--- a/Libraries/Lists/FlatList.js
+++ b/Libraries/Lists/FlatList.js
@@ -624,10 +624,17 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
           return (
             <View style={StyleSheet.compose(styles.row, columnWrapperStyle)}>
               {item.map((it, kk) => {
+                const itemIndex = index * cols + kk;
+                const accessibilityCollectionItem = {
+                  ...info.accessibilityCollectionItem,
+                  columnIndex: itemIndex % cols,
+                  itemIndex: itemIndex,
+                };
                 const element = renderer({
                   item: it,
-                  index: index * cols + kk,
+                  index: itemIndex,
                   separators: info.separators,
+                  accessibilityCollectionItem,
                 });
                 return element != null ? (
                   <React.Fragment key={kk}>{element}</React.Fragment>
@@ -658,6 +665,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     return (
       <VirtualizedList
         {...restProps}
+        numColumns={numColumns}
         getItem={this._getItem}
         getItemCount={this._getItemCount}
         keyExtractor={this._keyExtractor}
diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js
index 685a0269e7eed5..26ce07756e6f98 100644
--- a/Libraries/Lists/VirtualizedList.js
+++ b/Libraries/Lists/VirtualizedList.js
@@ -35,6 +35,7 @@ const ScrollView = require('../Components/ScrollView/ScrollView');
 const View = require('../Components/View/View');
 const Batchinator = require('../Interaction/Batchinator');
 const ReactNative = require('../Renderer/shims/ReactNative');
+const Platform = require('../Utilities/Platform');
 const flattenStyle = require('../StyleSheet/flattenStyle');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const infoLog = require('../Utilities/infoLog');
@@ -53,10 +54,20 @@ export type Separators = {
   ...
 };
 
+export type AccessibilityCollectionItem = {
+  itemIndex: number,
+  rowIndex: number,
+  rowSpan: number,
+  columnIndex: number,
+  columnSpan: number,
+  heading: boolean,
+};
+
 export type RenderItemProps<ItemT> = {
   item: ItemT,
   index: number,
   separators: Separators,
+  accessibilityCollectionItem: AccessibilityCollectionItem,
   ...
 };
 
@@ -85,9 +96,19 @@ type RequiredProps = {|
    */
   getItem: (data: any, index: number) => ?Item,
   /**
-   * Determines how many items are in the data blob.
+   * Determines how many items (rows) are in the data blob.
    */
   getItemCount: (data: any) => number,
+  /**
+   * Determines how many cells are in the data blob
+   * see https://bit.ly/35RKX7H
+   */
+  getCellsInItemCount?: (data: any) => number,
+  /**
+   * The number of columns used in FlatList.
+   * The default of 1 is used in other components to calculate the accessibilityCollection prop.
+   */
+  numColumns?: ?number,
 |};
 type OptionalProps = {|
   renderItem?: ?RenderItemType<Item>,
@@ -308,6 +329,10 @@ type Props = {|
   ...OptionalProps,
 |};
 
+function numColumnsOrDefault(numColumns: ?number) {
+  return numColumns ?? 1;
+}
+
 let _usedIndexForKey = false;
 let _keylessItemComponentName: string = '';
 
@@ -1253,8 +1278,33 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     );
   }
 
+  _getCellsInItemCount = props => {
+    const {getCellsInItemCount, data} = props;
+    if (getCellsInItemCount) {
+      return getCellsInItemCount(data);
+    }
+    if (Array.isArray(data)) {
+      return data.length;
+    }
+    return 0;
+  };
+
   _defaultRenderScrollComponent = props => {
+    const {getItemCount, data} = props;
     const onRefresh = props.onRefresh;
+    const numColumns = numColumnsOrDefault(props.numColumns);
+    const accessibilityRole = Platform.select({
+      android: numColumns > 1 ? 'grid' : 'list',
+    });
+    const rowCount = getItemCount(data);
+    const accessibilityCollection = {
+      // over-ride _getCellsInItemCount to handle Objects or other data formats
+      // see https://bit.ly/35RKX7H
+      itemCount: this._getCellsInItemCount(props),
+      rowCount,
+      columnCount: numColumns,
+      hierarchical: false,
+    };
     if (this._isNestedWithSameOrientation()) {
       // $FlowFixMe[prop-missing] - Typing ReactNativeComponent revealed errors
       return <View {...props} />;
@@ -1269,6 +1319,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         // $FlowFixMe[prop-missing] Invalid prop usage
         <ScrollView
           {...props}
+          accessibilityRole={accessibilityRole}
+          accessibilityCollection={accessibilityCollection}
           refreshControl={
             props.refreshControl == null ? (
               <RefreshControl
@@ -1284,8 +1336,14 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         />
       );
     } else {
-      // $FlowFixMe[prop-missing] Invalid prop usage
-      return <ScrollView {...props} />;
+      return (
+        // $FlowFixMe[prop-missing] Invalid prop usage
+        <ScrollView
+          {...props}
+          accessibilityRole={accessibilityRole}
+          accessibilityCollection={accessibilityCollection}
+        />
+      );
     }
   };
 
@@ -2056,10 +2114,19 @@ class CellRenderer extends React.Component<
     }
 
     if (renderItem) {
+      const accessibilityCollectionItem = {
+        itemIndex: index,
+        rowIndex: index,
+        rowSpan: 1,
+        columnIndex: 0,
+        columnSpan: 1,
+        heading: false,
+      };
       return renderItem({
         item,
         index,
         separators: this._separators,
+        accessibilityCollectionItem,
       });
     }
 
diff --git a/Libraries/Lists/VirtualizedSectionList.js b/Libraries/Lists/VirtualizedSectionList.js
index 396ad7b58ca2de..82f9048c8a46e8 100644
--- a/Libraries/Lists/VirtualizedSectionList.js
+++ b/Libraries/Lists/VirtualizedSectionList.js
@@ -9,7 +9,7 @@
  */
 
 import type {ViewToken} from './ViewabilityHelper';
-
+import type {AccessibilityCollectionItem} from './VirtualizedList';
 import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
 import invariant from 'invariant';
 import * as React from 'react';
@@ -341,7 +341,16 @@ class VirtualizedSectionList<
   _renderItem =
     (listItemCount: number) =>
     // eslint-disable-next-line react/no-unstable-nested-components
-    ({item, index}: {item: Item, index: number, ...}) => {
+    ({
+      item,
+      index,
+      accessibilityCollectionItem,
+    }: {
+      item: Item,
+      index: number,
+      accessibilityCollectionItem: AccessibilityCollectionItem,
+      ...
+    }) => {
       const info = this._subExtractor(index);
       if (!info) {
         return null;
@@ -370,6 +379,7 @@ class VirtualizedSectionList<
             LeadingSeparatorComponent={
               infoIndex === 0 ? this.props.SectionSeparatorComponent : undefined
             }
+            accessibilityCollectionItem={accessibilityCollectionItem}
             cellKey={info.key}
             index={infoIndex}
             item={item}
@@ -482,6 +492,7 @@ type ItemWithSeparatorProps = $ReadOnly<{|
   updatePropsFor: (prevCellKey: string, value: Object) => void,
   renderItem: Function,
   inverted: boolean,
+  accessibilityCollectionItem: AccessibilityCollectionItem,
 |}>;
 
 function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
@@ -499,6 +510,7 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
     index,
     section,
     inverted,
+    accessibilityCollectionItem,
   } = props;
 
   const [leadingSeparatorHiglighted, setLeadingSeparatorHighlighted] =
@@ -572,6 +584,7 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
     index,
     section,
     separators,
+    accessibilityCollectionItem,
   });
   const leadingSeparator = LeadingSeparatorComponent != null && (
     <LeadingSeparatorComponent
diff --git a/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
index c8b33bb98df2de..062bf63589c965 100644
--- a/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
+++ b/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
@@ -6,6 +6,14 @@ exports[`FlatList renders all the bells and whistles 1`] = `
   ListEmptyComponent={[Function]}
   ListFooterComponent={[Function]}
   ListHeaderComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 2,
+      "hierarchical": false,
+      "itemCount": 5,
+      "rowCount": 3,
+    }
+  }
   data={
     Array [
       Object {
@@ -29,6 +37,7 @@ exports[`FlatList renders all the bells and whistles 1`] = `
   getItemCount={[Function]}
   getItemLayout={[Function]}
   keyExtractor={[Function]}
+  numColumns={2}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
   onMomentumScrollBegin={[Function]}
@@ -121,6 +130,14 @@ exports[`FlatList renders all the bells and whistles 1`] = `
 
 exports[`FlatList renders empty list 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 0,
+      "rowCount": 0,
+    }
+  }
   data={Array []}
   getItem={[Function]}
   getItemCount={[Function]}
@@ -144,6 +161,14 @@ exports[`FlatList renders empty list 1`] = `
 
 exports[`FlatList renders null list 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 0,
+      "rowCount": 0,
+    }
+  }
   getItem={[Function]}
   getItemCount={[Function]}
   keyExtractor={[Function]}
@@ -166,6 +191,14 @@ exports[`FlatList renders null list 1`] = `
 
 exports[`FlatList renders simple list (multiple columns) 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 2,
+      "hierarchical": false,
+      "itemCount": 3,
+      "rowCount": 2,
+    }
+  }
   data={
     Array [
       Object {
@@ -182,6 +215,7 @@ exports[`FlatList renders simple list (multiple columns) 1`] = `
   getItem={[Function]}
   getItemCount={[Function]}
   keyExtractor={[Function]}
+  numColumns={2}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
   onMomentumScrollBegin={[Function]}
@@ -237,6 +271,14 @@ exports[`FlatList renders simple list (multiple columns) 1`] = `
 
 exports[`FlatList renders simple list 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 3,
+      "rowCount": 3,
+    }
+  }
   data={
     Array [
       Object {
@@ -298,6 +340,14 @@ exports[`FlatList renders simple list 1`] = `
 exports[`FlatList renders simple list using ListItemComponent (multiple columns) 1`] = `
 <RCTScrollView
   ListItemComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 2,
+      "hierarchical": false,
+      "itemCount": 3,
+      "rowCount": 2,
+    }
+  }
   data={
     Array [
       Object {
@@ -314,6 +364,7 @@ exports[`FlatList renders simple list using ListItemComponent (multiple columns)
   getItem={[Function]}
   getItemCount={[Function]}
   keyExtractor={[Function]}
+  numColumns={2}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
   onMomentumScrollBegin={[Function]}
@@ -369,6 +420,14 @@ exports[`FlatList renders simple list using ListItemComponent (multiple columns)
 exports[`FlatList renders simple list using ListItemComponent 1`] = `
 <RCTScrollView
   ListItemComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 3,
+      "rowCount": 3,
+    }
+  }
   data={
     Array [
       Object {
diff --git a/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap
index 8e63455db938e0..139204914c5315 100644
--- a/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap
+++ b/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap
@@ -2,6 +2,14 @@
 
 exports[`SectionList rendering empty section headers is fine 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 1,
+      "rowCount": 4,
+    }
+  }
   data={
     Array [
       Object {
@@ -66,6 +74,14 @@ exports[`SectionList rendering empty section headers is fine 1`] = `
 
 exports[`SectionList renders a footer when there is no data 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 1,
+      "rowCount": 2,
+    }
+  }
   data={
     Array [
       Object {
@@ -115,6 +131,14 @@ exports[`SectionList renders a footer when there is no data 1`] = `
 
 exports[`SectionList renders a footer when there is no data and no header 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 1,
+      "rowCount": 2,
+    }
+  }
   data={
     Array [
       Object {
@@ -163,6 +187,14 @@ exports[`SectionList renders all the bells and whistles 1`] = `
   ListEmptyComponent={[Function]}
   ListFooterComponent={[Function]}
   ListHeaderComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 3,
+      "rowCount": 12,
+    }
+  }
   data={
     Array [
       Object {
@@ -258,7 +290,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
           v="highlighted:false,leadingItem:undefined,leadingSection:undefined,section:s1,trailingItem:i1s1,trailingSection:s2"
         />
         <itemForSection1
-          v="item:i1s1,index:0,section:s1,separators:[object Object]"
+          v="item:i1s1,index:0,section:s1,separators:[object Object],accessibilityCollectionItem:[object Object]"
         />
         <itemSeparatorForSection1
           v="highlighted:false,leadingItem:i1s1,leadingSection:undefined,section:s1,trailingItem:i2s1,trailingSection:s2"
@@ -271,7 +303,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
     >
       <View>
         <itemForSection1
-          v="item:i2s1,index:1,section:s1,separators:[object Object]"
+          v="item:i2s1,index:1,section:s1,separators:[object Object],accessibilityCollectionItem:[object Object]"
         />
         <sectionSeparator
           v="highlighted:false,leadingItem:i2s1,leadingSection:undefined,section:s1,trailingItem:undefined,trailingSection:s2"
@@ -303,7 +335,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
           v="highlighted:false,leadingItem:undefined,leadingSection:s1,section:s2,trailingItem:i1s2,trailingSection:s3"
         />
         <defaultItem
-          v="item:i1s2,index:0,section:s2,separators:[object Object]"
+          v="item:i1s2,index:0,section:s2,separators:[object Object],accessibilityCollectionItem:[object Object]"
         />
         <defaultItemSeparator
           v="highlighted:false,leadingItem:i1s2,leadingSection:s1,section:s2,trailingItem:i2s2,trailingSection:s3"
@@ -316,7 +348,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
     >
       <View>
         <defaultItem
-          v="item:i2s2,index:1,section:s2,separators:[object Object]"
+          v="item:i2s2,index:1,section:s2,separators:[object Object],accessibilityCollectionItem:[object Object]"
         />
         <sectionSeparator
           v="highlighted:false,leadingItem:i2s2,leadingSection:s1,section:s2,trailingItem:undefined,trailingSection:s3"
@@ -348,7 +380,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
           v="highlighted:false,leadingItem:undefined,leadingSection:s2,section:s3,trailingItem:i1s3,trailingSection:undefined"
         />
         <defaultItem
-          v="item:i1s3,index:0,section:s3,separators:[object Object]"
+          v="item:i1s3,index:0,section:s3,separators:[object Object],accessibilityCollectionItem:[object Object]"
         />
         <defaultItemSeparator
           v="highlighted:false,leadingItem:i1s3,leadingSection:s2,section:s3,trailingItem:i2s3,trailingSection:undefined"
@@ -361,7 +393,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
     >
       <View>
         <defaultItem
-          v="item:i2s3,index:1,section:s3,separators:[object Object]"
+          v="item:i2s3,index:1,section:s3,separators:[object Object],accessibilityCollectionItem:[object Object]"
         />
         <sectionSeparator
           v="highlighted:false,leadingItem:i2s3,leadingSection:s2,section:s3,trailingItem:undefined,trailingSection:undefined"
@@ -389,6 +421,14 @@ exports[`SectionList renders all the bells and whistles 1`] = `
 
 exports[`SectionList renders empty list 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 0,
+      "rowCount": 0,
+    }
+  }
   data={Array []}
   getItem={[Function]}
   getItemCount={[Function]}
diff --git a/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
index 7c8cbb8edd6f5f..525d51cbb86285 100644
--- a/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
+++ b/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
@@ -3,6 +3,14 @@
 exports[`VirtualizedList forwards correct stickyHeaderIndices when ListHeaderComponent present 1`] = `
 <RCTScrollView
   ListHeaderComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -149,6 +157,14 @@ exports[`VirtualizedList forwards correct stickyHeaderIndices when ListHeaderCom
 
 exports[`VirtualizedList forwards correct stickyHeaderIndices when all in initial render window 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -290,6 +306,14 @@ exports[`VirtualizedList forwards correct stickyHeaderIndices when all in initia
 
 exports[`VirtualizedList forwards correct stickyHeaderIndices when partially in initial render window 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -399,6 +423,14 @@ exports[`VirtualizedList forwards correct stickyHeaderIndices when partially in
 
 exports[`VirtualizedList handles nested lists 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 2,
+      "rowCount": 2,
+    }
+  }
   data={
     Array [
       Object {
@@ -475,6 +507,14 @@ exports[`VirtualizedList handles nested lists 1`] = `
       style={null}
     >
       <RCTScrollView
+        accessibilityCollection={
+          Object {
+            "columnCount": 1,
+            "hierarchical": false,
+            "itemCount": 2,
+            "rowCount": 2,
+          }
+        }
         data={
           Array [
             Object {
@@ -540,6 +580,14 @@ exports[`VirtualizedList handles nested lists 1`] = `
 exports[`VirtualizedList handles separators correctly 1`] = `
 <RCTScrollView
   ItemSeparatorComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 3,
+      "rowCount": 3,
+    }
+  }
   data={
     Array [
       Object {
@@ -614,6 +662,14 @@ exports[`VirtualizedList handles separators correctly 1`] = `
 exports[`VirtualizedList handles separators correctly 2`] = `
 <RCTScrollView
   ItemSeparatorComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 3,
+      "rowCount": 3,
+    }
+  }
   data={
     Array [
       Object {
@@ -688,6 +744,14 @@ exports[`VirtualizedList handles separators correctly 2`] = `
 exports[`VirtualizedList handles separators correctly 3`] = `
 <RCTScrollView
   ItemSeparatorComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 3,
+      "rowCount": 3,
+    }
+  }
   data={
     Array [
       Object {
@@ -762,6 +826,14 @@ exports[`VirtualizedList handles separators correctly 3`] = `
 
 exports[`VirtualizedList keeps sticky headers above viewport visualized 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 20,
+      "rowCount": 20,
+    }
+  }
   data={
     Array [
       Object {
@@ -980,6 +1052,14 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
   ListEmptyComponent={[Function]}
   ListFooterComponent={[Function]}
   ListHeaderComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 5,
+      "rowCount": 5,
+    }
+  }
   data={
     Array [
       Object {
@@ -1176,6 +1256,14 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
 
 exports[`VirtualizedList renders empty list 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 0,
+      "rowCount": 0,
+    }
+  }
   data={Array []}
   getItem={[Function]}
   getItemCount={[Function]}
@@ -1196,6 +1284,14 @@ exports[`VirtualizedList renders empty list 1`] = `
 
 exports[`VirtualizedList renders empty list after batch 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 0,
+      "rowCount": 0,
+    }
+  }
   data={Array []}
   getItem={[Function]}
   getItemCount={[Function]}
@@ -1219,6 +1315,14 @@ exports[`VirtualizedList renders empty list with empty component 1`] = `
   ListEmptyComponent={[Function]}
   ListFooterComponent={[Function]}
   ListHeaderComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 0,
+      "rowCount": 0,
+    }
+  }
   data={Array []}
   getItem={[Function]}
   getItemCount={[Function]}
@@ -1252,6 +1356,14 @@ exports[`VirtualizedList renders empty list with empty component 1`] = `
 exports[`VirtualizedList renders list with empty component 1`] = `
 <RCTScrollView
   ListEmptyComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 1,
+      "rowCount": 1,
+    }
+  }
   data={
     Array [
       Object {
@@ -1287,6 +1399,14 @@ exports[`VirtualizedList renders list with empty component 1`] = `
 
 exports[`VirtualizedList renders null list 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 0,
+      "rowCount": 0,
+    }
+  }
   getItem={[Function]}
   getItemCount={[Function]}
   onContentSizeChange={[Function]}
@@ -1306,6 +1426,14 @@ exports[`VirtualizedList renders null list 1`] = `
 
 exports[`VirtualizedList renders simple list 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 3,
+      "rowCount": 3,
+    }
+  }
   data={
     Array [
       Object {
@@ -1364,6 +1492,14 @@ exports[`VirtualizedList renders simple list 1`] = `
 exports[`VirtualizedList renders simple list using ListItemComponent 1`] = `
 <RCTScrollView
   ListItemComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 3,
+      "rowCount": 3,
+    }
+  }
   data={
     Array [
       Object {
@@ -1420,6 +1556,14 @@ exports[`VirtualizedList renders simple list using ListItemComponent 1`] = `
 
 exports[`VirtualizedList renders sticky headers in viewport on batched render 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -1530,6 +1674,14 @@ exports[`VirtualizedList renders sticky headers in viewport on batched render 1`
 
 exports[`VirtualizedList test getItem functionality where data is not an Array 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 0,
+      "rowCount": 1,
+    }
+  }
   data={
     Map {
       "id_0" => Object {
@@ -1566,6 +1718,14 @@ exports[`VirtualizedList test getItem functionality where data is not an Array 1
 exports[`VirtualizedList warns if both renderItem or ListItemComponent are specified. Uses ListItemComponent 1`] = `
 <RCTScrollView
   ListItemComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 1,
+      "rowCount": 1,
+    }
+  }
   data={
     Array [
       Object {
@@ -1602,6 +1762,14 @@ exports[`VirtualizedList warns if both renderItem or ListItemComponent are speci
 
 exports[`adjusts render area with non-zero initialScrollIndex 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 20,
+      "rowCount": 20,
+    }
+  }
   data={
     Array [
       Object {
@@ -1831,6 +1999,14 @@ exports[`adjusts render area with non-zero initialScrollIndex 1`] = `
 
 exports[`constrains batch render region when an item is removed 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 5,
+      "rowCount": 5,
+    }
+  }
   data={
     Array [
       Object {
@@ -1908,6 +2084,14 @@ exports[`constrains batch render region when an item is removed 1`] = `
 
 exports[`discards intitial render if initialScrollIndex != 0 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 20,
+      "rowCount": 20,
+    }
+  }
   data={
     Array [
       Object {
@@ -2080,6 +2264,14 @@ exports[`discards intitial render if initialScrollIndex != 0 1`] = `
 
 exports[`does not adjust render area until content area layed out 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 20,
+      "rowCount": 20,
+    }
+  }
   data={
     Array [
       Object {
@@ -2209,6 +2401,14 @@ exports[`does not adjust render area until content area layed out 1`] = `
 
 exports[`does not over-render when there is less than initialNumToRender cells 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -2336,6 +2536,14 @@ exports[`does not over-render when there is less than initialNumToRender cells 1
 
 exports[`eventually renders all items when virtualization disabled 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -2466,6 +2674,14 @@ exports[`eventually renders all items when virtualization disabled 1`] = `
 
 exports[`expands first in viewport to render up to maxToRenderPerBatch on initial render 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -2573,6 +2789,14 @@ exports[`expands first in viewport to render up to maxToRenderPerBatch on initia
 
 exports[`expands render area by maxToRenderPerBatch on tick 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 20,
+      "rowCount": 20,
+    }
+  }
   data={
     Array [
       Object {
@@ -2716,6 +2940,14 @@ exports[`expands render area by maxToRenderPerBatch on tick 1`] = `
 
 exports[`renders a zero-height tail spacer on initial render if getItemLayout not defined 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -2802,6 +3034,14 @@ exports[`renders a zero-height tail spacer on initial render if getItemLayout no
 
 exports[`renders full tail spacer if all cells measured 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -2906,6 +3146,14 @@ exports[`renders full tail spacer if all cells measured 1`] = `
 
 exports[`renders initialNumToRender cells when virtualization disabled 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -3006,6 +3254,14 @@ exports[`renders initialNumToRender cells when virtualization disabled 1`] = `
 
 exports[`renders items before initialScrollIndex on first batch tick when virtualization disabled 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -3114,6 +3370,14 @@ exports[`renders items before initialScrollIndex on first batch tick when virtua
 
 exports[`renders new items when data is updated with non-zero initialScrollIndex 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 4,
+      "rowCount": 4,
+    }
+  }
   data={
     Array [
       Object {
@@ -3183,6 +3447,14 @@ exports[`renders new items when data is updated with non-zero initialScrollIndex
 
 exports[`renders no spacers up to initialScrollIndex on first render when virtualization disabled 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -3256,6 +3528,14 @@ exports[`renders no spacers up to initialScrollIndex on first render when virtua
 
 exports[`renders offset cells in initial render when initialScrollIndex set 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -3376,6 +3656,14 @@ exports[`renders offset cells in initial render when initialScrollIndex set 1`]
 
 exports[`renders tail spacer up to last measured index if getItemLayout not defined 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -3480,6 +3768,14 @@ exports[`renders tail spacer up to last measured index if getItemLayout not defi
 
 exports[`renders tail spacer up to last measured with irregular layout when getItemLayout undefined 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -3576,6 +3872,14 @@ exports[`renders tail spacer up to last measured with irregular layout when getI
 
 exports[`renders windowSize derived region at bottom 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -3683,6 +3987,14 @@ exports[`renders windowSize derived region at bottom 1`] = `
 
 exports[`renders windowSize derived region at top 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -3776,6 +4088,14 @@ exports[`renders windowSize derived region at top 1`] = `
 
 exports[`renders windowSize derived region in middle 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -3904,6 +4224,14 @@ exports[`renders windowSize derived region in middle 1`] = `
 
 exports[`renders zero-height tail spacer on batch render if cells not yet measured and getItemLayout not defined 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 10,
+      "rowCount": 10,
+    }
+  }
   data={
     Array [
       Object {
@@ -3992,6 +4320,14 @@ exports[`renders zero-height tail spacer on batch render if cells not yet measur
 
 exports[`retains batch render region when an item is appended 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 11,
+      "rowCount": 11,
+    }
+  }
   data={
     Array [
       Object {
@@ -4129,6 +4465,14 @@ exports[`retains batch render region when an item is appended 1`] = `
 
 exports[`retains initial render region when an item is appended 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 11,
+      "rowCount": 11,
+    }
+  }
   data={
     Array [
       Object {
@@ -4216,6 +4560,14 @@ exports[`retains initial render region when an item is appended 1`] = `
 
 exports[`retains intitial render if initialScrollIndex == 0 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 20,
+      "rowCount": 20,
+    }
+  }
   data={
     Array [
       Object {
@@ -4423,6 +4775,14 @@ exports[`retains intitial render if initialScrollIndex == 0 1`] = `
 
 exports[`unmounts sticky headers moved below viewport 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 20,
+      "rowCount": 20,
+    }
+  }
   data={
     Array [
       Object {
diff --git a/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
index d0fc9fa107c237..5c32fe8f76d8bb 100644
--- a/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
+++ b/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
@@ -2,6 +2,14 @@
 
 exports[`VirtualizedSectionList handles nested lists 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 1,
+      "rowCount": 4,
+    }
+  }
   data={
     Array [
       Object {
@@ -102,6 +110,14 @@ exports[`VirtualizedSectionList handles nested lists 1`] = `
       style={null}
     >
       <RCTScrollView
+        accessibilityCollection={
+          Object {
+            "columnCount": 1,
+            "hierarchical": false,
+            "itemCount": 1,
+            "rowCount": 4,
+          }
+        }
         data={
           Array [
             Object {
@@ -198,6 +214,14 @@ exports[`VirtualizedSectionList handles nested lists 1`] = `
 
 exports[`VirtualizedSectionList handles separators correctly 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 1,
+      "rowCount": 5,
+    }
+  }
   data={
     Array [
       Object {
@@ -331,6 +355,14 @@ exports[`VirtualizedSectionList handles separators correctly 1`] = `
 
 exports[`VirtualizedSectionList handles separators correctly 2`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 1,
+      "rowCount": 5,
+    }
+  }
   data={
     Array [
       Object {
@@ -464,6 +496,14 @@ exports[`VirtualizedSectionList handles separators correctly 2`] = `
 
 exports[`VirtualizedSectionList handles separators correctly 3`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 1,
+      "rowCount": 5,
+    }
+  }
   data={
     Array [
       Object {
@@ -598,6 +638,14 @@ exports[`VirtualizedSectionList handles separators correctly 3`] = `
 
 exports[`VirtualizedSectionList handles separators correctly 4`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 1,
+      "rowCount": 5,
+    }
+  }
   data={
     Array [
       Object {
@@ -735,6 +783,14 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
   ListEmptyComponent={[Function]}
   ListFooterComponent={[Function]}
   ListHeaderComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 1,
+      "rowCount": 7,
+    }
+  }
   data={
     Array [
       Object {
@@ -976,6 +1032,14 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
 
 exports[`VirtualizedSectionList renders empty list 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 0,
+      "rowCount": 0,
+    }
+  }
   data={Array []}
   getItem={[Function]}
   getItemCount={[Function]}
@@ -1000,6 +1064,14 @@ exports[`VirtualizedSectionList renders empty list with empty component 1`] = `
   ListEmptyComponent={[Function]}
   ListFooterComponent={[Function]}
   ListHeaderComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 0,
+      "rowCount": 0,
+    }
+  }
   data={Array []}
   getItem={[Function]}
   getItemCount={[Function]}
@@ -1034,6 +1106,14 @@ exports[`VirtualizedSectionList renders empty list with empty component 1`] = `
 exports[`VirtualizedSectionList renders list with empty component 1`] = `
 <RCTScrollView
   ListEmptyComponent={[Function]}
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 1,
+      "rowCount": 3,
+    }
+  }
   data={
     Array [
       Object {
@@ -1083,6 +1163,14 @@ exports[`VirtualizedSectionList renders list with empty component 1`] = `
 
 exports[`VirtualizedSectionList renders simple list 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 1,
+      "rowCount": 5,
+    }
+  }
   data={
     Array [
       Object {
diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
index e222efbd0d7507..378a4b734f6b6a 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
+++ b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
@@ -297,17 +297,21 @@ class FlatListExample extends React.PureComponent<Props, State> {
       /* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb)
        * This comment suppresses an error found when Flow v0.111 was deployed.
        * To see the error, delete this comment and run Flow. */
-      [flatListPropKey]: ({item, separators}) => {
+      [flatListPropKey]: ({item, separators, accessibilityCollectionItem}) => {
         return (
-          <ItemComponent
-            item={item}
-            horizontal={this.state.horizontal}
-            fixedHeight={this.state.fixedHeight}
-            onPress={this._onPressCallback()}
-            onShowUnderlay={separators.highlight}
-            onHideUnderlay={separators.unhighlight}
-            textSelectable={this.state.textSelectable}
-          />
+          <View
+            importantForAccessibility="yes"
+            accessibilityCollectionItem={accessibilityCollectionItem}>
+            <ItemComponent
+              item={item}
+              horizontal={this.state.horizontal}
+              fixedHeight={this.state.fixedHeight}
+              onPress={this._onPressCallback()}
+              onShowUnderlay={separators.highlight}
+              onHideUnderlay={separators.unhighlight}
+              textSelectable={this.state.textSelectable}
+            />
+          </View>
         );
       },
     };
diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js b/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js
index a4ec63a8c4d397..eb673afc1686e0 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js
+++ b/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js
@@ -140,9 +140,12 @@ class MultiColumnExample extends React.PureComponent<
       getItemLayout(data, index).length + 2 * (CARD_MARGIN + BORDER_WIDTH);
     return {length, offset: length * index, index};
   }
-  _renderItemComponent = ({item}: RenderItemProps<any | Item>) => {
+  _renderItemComponent = ({item, accessibilityCollectionItem}) => {
     return (
-      <View style={styles.card}>
+      <View
+        importantForAccessibility="yes"
+        accessibilityCollectionItem={accessibilityCollectionItem}
+        style={styles.card}>
         <ItemComponent
           item={item}
           fixedHeight={this.state.fixedHeight}
diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-nested.js b/packages/rn-tester/js/examples/FlatList/FlatList-nested.js
new file mode 100644
index 00000000000000..dcbed8f732a653
--- /dev/null
+++ b/packages/rn-tester/js/examples/FlatList/FlatList-nested.js
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+import * as React from 'react';
+import {
+  SafeAreaView,
+  View,
+  FlatList,
+  StyleSheet,
+  Text,
+  StatusBar,
+} from 'react-native';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb8bbb',
+    title: 'Fourth Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97676',
+    title: 'Fifth Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e27234',
+    title: 'Sixth Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29234',
+    title: 'Seven Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571429234',
+    title: 'Eight Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-115571429234',
+    title: 'Nine Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-1155h1429234',
+    title: 'Ten Item',
+  },
+];
+
+const Item = ({item, accessibilityCollectionItem}) => (
+  <View
+    importantForAccessibility="yes"
+    accessibilityCollectionItem={accessibilityCollectionItem}
+    style={styles.item}>
+    <Text style={styles.title}>{item.title}</Text>
+  </View>
+);
+
+const renderItem = props => <Item {...props} />;
+
+const renderFlatList = ({item}) => {
+  return (
+    <View>
+      <Text>Flatlist {item}</Text>
+      <FlatList renderItem={renderItem} horizontal data={DATA} />
+    </View>
+  );
+};
+
+const FlatListNested = (): React.Node => {
+  return (
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={[1, 2, 3]}
+        renderItem={renderFlatList}
+        keyExtractor={item => item.toString()}
+      />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 16,
+  },
+});
+
+exports.title = 'FlatList Nested';
+exports.testTitle = 'Test accessibility announcement in nested flatlist';
+exports.category = 'ListView';
+exports.documentationURL = 'https://reactnative.dev/docs/flatlist';
+exports.description = 'Nested flatlist example';
+exports.examples = [
+  {
+    title: 'FlatList Nested example',
+    render: function (): React.Element<typeof FlatListNested> {
+      return <FlatListNested />;
+    },
+  },
+];
diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js b/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js
index 88fda4e8171869..962af98305bae4 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js
@@ -109,7 +109,7 @@ const EmptySectionList = () => (
 
 const renderItemComponent =
   setItemState =>
-  ({item, separators}) => {
+  ({item, separators, accessibilityCollectionItem}) => {
     if (isNaN(item.key)) {
       return;
     }
@@ -119,12 +119,16 @@ const renderItemComponent =
     };
 
     return (
-      <ItemComponent
-        item={item}
-        onPress={onPress}
-        onHideUnderlay={separators.unhighlight}
-        onShowUnderlay={separators.highlight}
-      />
+      <View
+        importantForAccessibility="yes"
+        accessibilityCollectionItem={accessibilityCollectionItem}>
+        <ItemComponent
+          item={item}
+          onPress={onPress}
+          onHideUnderlay={separators.unhighlight}
+          onShowUnderlay={separators.highlight}
+        />
+      </View>
     );
   };
 
diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js
index f150ea666b1109..61e5318eab352c 100644
--- a/packages/rn-tester/js/utils/RNTesterList.android.js
+++ b/packages/rn-tester/js/utils/RNTesterList.android.js
@@ -31,6 +31,11 @@ const Components: Array<RNTesterModuleInfo> = [
     category: 'ListView',
     supportsTVOS: true,
   },
+  {
+    key: 'FlatList-nested',
+    module: require('../examples/FlatList/FlatList-nested'),
+    category: 'ListView',
+  },
   {
     key: 'ImageExample',
     category: 'Basic',