From 76d7d14f909293595a5cdf4d28a86a077fb6bf77 Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Tue, 19 Apr 2022 19:45:10 -0700
Subject: [PATCH] TalkBack support for ScrollView accessibility announcements
 (list and grid) (#33180)

Summary:
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]

[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: D34518929

Pulled By: blavalla

fbshipit-source-id: 410a05263a56162bf505a4cad957b24005ed65ed
---
 .../Components/View/ViewAccessibility.js      |   1 +
 Libraries/Components/View/ViewPropTypes.js    |  17 +
 Libraries/Lists/FlatList.js                   |  10 +-
 Libraries/Lists/VirtualizedList.js            |  67 +++-
 Libraries/Lists/VirtualizedSectionList.js     |  16 +-
 .../__snapshots__/FlatList-test.js.snap       |  59 +++
 .../__snapshots__/SectionList-test.js.snap    |  52 ++-
 .../VirtualizedList-test.js.snap              | 360 ++++++++++++++++++
 .../VirtualizedSectionList-test.js.snap       |  88 +++++
 .../react/uimanager/BaseViewManager.java      |  14 +
 .../uimanager/BaseViewManagerAdapter.java     |   8 +
 .../uimanager/BaseViewManagerDelegate.java    |   6 +
 .../uimanager/BaseViewManagerInterface.java   |   4 +
 .../uimanager/ReactAccessibilityDelegate.java |  20 +
 .../facebook/react/uimanager/ViewProps.java   |   2 +
 .../scroll/ReactHorizontalScrollView.java     |  26 +-
 .../react/views/scroll/ReactScrollView.java   |  20 +
 .../ReactScrollViewAccessibilityDelegate.java | 154 ++++++++
 .../main/res/views/uimanager/values/ids.xml   |   8 +-
 .../js/examples/FlatList/FlatList-basic.js    |  27 +-
 .../examples/FlatList/FlatList-multiColumn.js |   7 +-
 .../js/examples/FlatList/FlatList-nested.js   | 114 ++++++
 .../SectionList/SectionList-scrollable.js     |  18 +-
 .../js/utils/RNTesterList.android.js          |   5 +
 24 files changed, 1051 insertions(+), 52 deletions(-)
 create mode 100644 ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewAccessibilityDelegate.java
 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 89e07889bd14a0..de4f9e44ad505d 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'
   | 'menubutton'; // [macOS]
 
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
index 273c316947e918..ea556fc46fa34e 100644
--- a/Libraries/Components/View/ViewPropTypes.js
+++ b/Libraries/Components/View/ViewPropTypes.js
@@ -577,6 +577,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 eca9de8ef4baee..e7f1a37622ab8d 100644
--- a/Libraries/Lists/FlatList.js
+++ b/Libraries/Lists/FlatList.js
@@ -660,11 +660,18 @@ 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,
                   isSelected: info.isSelected, // [macOS]
                   separators: info.separators,
+                  accessibilityCollectionItem,
                 });
                 return element != null ? (
                   <React.Fragment key={kk}>{element}</React.Fragment>
@@ -695,6 +702,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 d81b91cbc29db7..b2b16fc9b85dc7 100644
--- a/Libraries/Lists/VirtualizedList.js
+++ b/Libraries/Lists/VirtualizedList.js
@@ -13,6 +13,7 @@ const FillRateHelper = require('./FillRateHelper');
 const Platform = require('../Utilities/Platform'); // [macOS]
 const ReactNative = require('../Renderer/shims/ReactNative');
 const RefreshControl = require('../Components/RefreshControl/RefreshControl');
+const Platform = require('../Utilities/Platform');
 const ScrollView = require('../Components/ScrollView/ScrollView');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const View = require('../Components/View/View');
@@ -54,11 +55,21 @@ 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,
   isSelected: ?boolean, // [macOS]
   separators: Separators,
+  accessibilityCollectionItem: AccessibilityCollectionItem,
   ...
 };
 
@@ -93,9 +104,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>,
@@ -360,6 +381,10 @@ type Props = {|
   ...OptionalProps,
 |};
 
+function numColumnsOrDefault(numColumns: ?number) {
+  return numColumns ?? 1;
+}
+
 let _usedIndexForKey = false;
 let _keylessItemComponentName: string = '';
 
@@ -1338,6 +1363,17 @@ 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 => {
     // [macOS
     const preferredScrollerStyleDidChangeHandler =
@@ -1362,7 +1398,21 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       onKeyDown: this._handleKeyDown,
     };
     // macOS]
+    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} />;
@@ -1383,6 +1433,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
             preferredScrollerStyleDidChangeHandler
           } // macOS]
           {...props}
+          accessibilityRole={accessibilityRole}
+          accessibilityCollection={accessibilityCollection}
           refreshControl={
             props.refreshControl == null ? (
               <RefreshControl
@@ -1398,7 +1450,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       );
     } else {
       return (
-        // $FlowFixMe Invalid prop usage
+        // $FlowFixMe[prop-missing] Invalid prop usage
         <ScrollView
           // [macOS
           {...(props.enableSelectionOnKeyPress && keyboardNavigationProps)}
@@ -1407,6 +1459,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
             preferredScrollerStyleDidChangeHandler
           } // macOS]
           {...props}
+          accessibilityRole={accessibilityRole}
+          accessibilityCollection={accessibilityCollection}
         />
       );
     }
@@ -2231,11 +2285,20 @@ 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,
         isSelected, // [macOS]
         separators: this._separators,
+        accessibilityCollectionItem,
       });
     }
 
diff --git a/Libraries/Lists/VirtualizedSectionList.js b/Libraries/Lists/VirtualizedSectionList.js
index e8b81a519caaee..0010e2cd3191b4 100644
--- a/Libraries/Lists/VirtualizedSectionList.js
+++ b/Libraries/Lists/VirtualizedSectionList.js
@@ -13,6 +13,7 @@ import invariant from 'invariant';
 import type {ViewToken} from './ViewabilityHelper';
 import type {SelectedRowIndexPathType} from './VirtualizedList'; // [macOS]
 import type {KeyEvent} from '../Types/CoreEventTypes'; // [macOS]
+import type {AccessibilityCollectionItem} from './VirtualizedList';
 import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
 import {View, VirtualizedList} from 'react-native';
 import * as React from 'react';
@@ -508,7 +509,16 @@ class VirtualizedSectionList<
 
   _renderItem =
     (listItemCount: number) =>
-    ({item, index}: {item: Item, index: number, ...}) => {
+    ({
+      item,
+      index,
+      accessibilityCollectionItem,
+    }: {
+      item: Item,
+      index: number,
+      accessibilityCollectionItem: AccessibilityCollectionItem,
+      ...
+    }) => {
       const info = this._subExtractor(index);
       if (!info) {
         return null;
@@ -537,6 +547,7 @@ class VirtualizedSectionList<
             LeadingSeparatorComponent={
               infoIndex === 0 ? this.props.SectionSeparatorComponent : undefined
             }
+            accessibilityCollectionItem={accessibilityCollectionItem}
             cellKey={info.key}
             index={infoIndex}
             isSelected={this._isItemSelected(item)} // [macOS]
@@ -651,6 +662,7 @@ type ItemWithSeparatorProps = $ReadOnly<{|
   updatePropsFor: (prevCellKey: string, value: Object) => void,
   renderItem: Function,
   inverted: boolean,
+  accessibilityCollectionItem: AccessibilityCollectionItem,
 |}>;
 
 function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
@@ -669,6 +681,7 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
     index,
     section,
     inverted,
+    accessibilityCollectionItem,
   } = props;
 
   const [leadingSeparatorHiglighted, setLeadingSeparatorHighlighted] =
@@ -743,6 +756,7 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
     isSelected, // [macOS]
     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 6bfee501d4dc4c..e59c13ee1132f5 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 {
@@ -68,6 +76,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 {
@@ -119,6 +135,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 {
@@ -169,6 +193,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 {
@@ -266,7 +298,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,isSelected:false,section:s1,separators:[object Object]"
+          v="item:i1s1,index:0,isSelected:false,section:s1,separators:[object Object],accessibilityCollectionItem:[object Object]"
         />
         <itemSeparatorForSection1
           v="highlighted:false,leadingItem:i1s1,leadingSection:undefined,section:s1,trailingItem:i2s1,trailingSection:s2"
@@ -279,7 +311,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
     >
       <View>
         <itemForSection1
-          v="item:i2s1,index:1,isSelected:false,section:s1,separators:[object Object]"
+          v="item:i2s1,index:1,,isSelected:false,section:s1,separators:[object Object],accessibilityCollectionItem:[object Object]"
         />
         <sectionSeparator
           v="highlighted:false,leadingItem:i2s1,leadingSection:undefined,section:s1,trailingItem:undefined,trailingSection:s2"
@@ -311,7 +343,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,isSelected:false,section:s2,separators:[object Object]"
+          v="item:i1s2,index:0,,isSelected:false,section:s2,separators:[object Object],accessibilityCollectionItem:[object Object]"
         />
         <defaultItemSeparator
           v="highlighted:false,leadingItem:i1s2,leadingSection:s1,section:s2,trailingItem:i2s2,trailingSection:s3"
@@ -324,7 +356,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
     >
       <View>
         <defaultItem
-          v="item:i2s2,index:1,isSelected:false,section:s2,separators:[object Object]"
+          v="item:i2s2,index:1,,isSelected:false,section:s2,separators:[object Object],accessibilityCollectionItem:[object Object]"
         />
         <sectionSeparator
           v="highlighted:false,leadingItem:i2s2,leadingSection:s1,section:s2,trailingItem:undefined,trailingSection:s3"
@@ -356,7 +388,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,isSelected:false,section:s3,separators:[object Object]"
+          v="item:i1s3,index:0,,isSelected:false,section:s3,separators:[object Object],accessibilityCollectionItem:[object Object]"
         />
         <defaultItemSeparator
           v="highlighted:false,leadingItem:i1s3,leadingSection:s2,section:s3,trailingItem:i2s3,trailingSection:undefined"
@@ -369,7 +401,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
     >
       <View>
         <defaultItem
-          v="item:i2s3,index:1,isSelected:false,section:s3,separators:[object Object]"
+          v="item:i2s3,index:1,,isSelected:false,section:s3,separators:[object Object],accessibilityCollectionItem:[object Object]"
         />
         <sectionSeparator
           v="highlighted:false,leadingItem:i2s3,leadingSection:s2,section:s3,trailingItem:undefined,trailingSection:undefined"
@@ -397,6 +429,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 ad93703101b2ad..790aff7ea22e05 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 after scrolled 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 after scrolled 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 adjust render area with non-zero initialScrollIndex until scrolled 1`] = `
 <RCTScrollView
+  accessibilityCollection={
+    Object {
+      "columnCount": 1,
+      "hierarchical": false,
+      "itemCount": 20,
+      "rowCount": 20,
+    }
+  }
   data={
     Array [
       Object {
@@ -2347,6 +2547,14 @@ exports[`does not adjust render area with non-zero initialScrollIndex until scro
 
 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 {
@@ -2474,6 +2682,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 {
@@ -2604,6 +2820,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 {
@@ -2711,6 +2935,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 {
@@ -2854,6 +3086,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 {
@@ -2940,6 +3180,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 {
@@ -3044,6 +3292,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 {
@@ -3144,6 +3400,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 {
@@ -3252,6 +3516,14 @@ exports[`renders items before initialScrollIndex on first batch tick when virtua
 
 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 {
@@ -3325,6 +3597,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 {
@@ -3445,6 +3725,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 {
@@ -3549,6 +3837,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 {
@@ -3645,6 +3941,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 {
@@ -3752,6 +4056,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 {
@@ -3845,6 +4157,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 {
@@ -3973,6 +4293,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 {
@@ -4061,6 +4389,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 {
@@ -4198,6 +4534,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 {
@@ -4285,6 +4629,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 {
@@ -4492,6 +4844,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 cc0891f27b9563..a0b20c453195b5 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 {
@@ -106,6 +114,14 @@ exports[`VirtualizedSectionList handles nested lists 1`] = `
       style={null}
     >
       <RCTScrollView
+        accessibilityCollection={
+          Object {
+            "columnCount": 1,
+            "hierarchical": false,
+            "itemCount": 1,
+            "rowCount": 4,
+          }
+        }
         data={
           Array [
             Object {
@@ -204,6 +220,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 {
@@ -339,6 +363,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 {
@@ -474,6 +506,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 {
@@ -610,6 +650,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 {
@@ -749,6 +797,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 {
@@ -992,6 +1048,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]}
@@ -1018,6 +1082,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]}
@@ -1054,6 +1126,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 {
@@ -1105,6 +1185,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/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
index 3cf7db7be1b55f..f5dc62ef5352db 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
@@ -175,6 +175,20 @@ public void setAccessibilityRole(@NonNull T view, @Nullable String accessibility
     view.setTag(R.id.accessibility_role, AccessibilityRole.fromValue(accessibilityRole));
   }
 
+  @Override
+  @ReactProp(name = ViewProps.ACCESSIBILITY_COLLECTION)
+  public void setAccessibilityCollection(
+      @NonNull T view, @Nullable ReadableMap accessibilityCollection) {
+    view.setTag(R.id.accessibility_collection, accessibilityCollection);
+  }
+
+  @Override
+  @ReactProp(name = ViewProps.ACCESSIBILITY_COLLECTION_ITEM)
+  public void setAccessibilityCollectionItem(
+      @NonNull T view, @Nullable ReadableMap accessibilityCollectionItem) {
+    view.setTag(R.id.accessibility_collection_item, accessibilityCollectionItem);
+  }
+
   @Override
   @ReactProp(name = ViewProps.ACCESSIBILITY_STATE)
   public void setViewState(@NonNull T view, @Nullable ReadableMap accessibilityState) {
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerAdapter.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerAdapter.java
index 6a19c5a7cd2030..afd33e22eb1ba5 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerAdapter.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerAdapter.java
@@ -31,6 +31,14 @@ public void setAccessibilityLiveRegion(@NonNull T view, @Nullable String liveReg
   @Override
   public void setAccessibilityRole(@NonNull T view, @Nullable String accessibilityRole) {}
 
+  @Override
+  public void setAccessibilityCollection(
+      @NonNull T view, @Nullable ReadableMap accessibilityCollection) {}
+
+  @Override
+  public void setAccessibilityCollectionItem(
+      @NonNull T view, @Nullable ReadableMap accessibilityCollectionItem) {}
+
   @Override
   public void setViewState(@NonNull T view, @Nullable ReadableMap accessibilityState) {}
 
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerDelegate.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerDelegate.java
index 6bc0b1bc0449d5..5c2ca1b828f07a 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerDelegate.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerDelegate.java
@@ -48,6 +48,12 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case ViewProps.ACCESSIBILITY_STATE:
         mViewManager.setViewState(view, (ReadableMap) value);
         break;
+      case ViewProps.ACCESSIBILITY_COLLECTION:
+        mViewManager.setAccessibilityCollection(view, (ReadableMap) value);
+        break;
+      case ViewProps.ACCESSIBILITY_COLLECTION_ITEM:
+        mViewManager.setAccessibilityCollectionItem(view, (ReadableMap) value);
+        break;
       case ViewProps.BACKGROUND_COLOR:
         mViewManager.setBackgroundColor(
             view, value == null ? 0 : ColorPropConverter.getColor(value, view.getContext()));
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerInterface.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerInterface.java
index cfdc791caf5f79..0a6a9a561d5c61 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerInterface.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerInterface.java
@@ -28,6 +28,10 @@ public interface BaseViewManagerInterface<T extends View> {
 
   void setAccessibilityRole(T view, @Nullable String accessibilityRole);
 
+  void setAccessibilityCollection(T view, @Nullable ReadableMap accessibilityCollection);
+
+  void setAccessibilityCollectionItem(T view, @Nullable ReadableMap accessibilityCollectionItem);
+
   void setViewState(T view, @Nullable ReadableMap accessibilityState);
 
   void setBackgroundColor(T view, int backgroundColor);
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java
index 7d38333ccf3074..3e6d1b36b08467 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java
@@ -122,6 +122,7 @@ public enum AccessibilityRole {
     TABLIST,
     TIMER,
     LIST,
+    GRID,
     TOOLBAR;
 
     public static String getValue(AccessibilityRole role) {
@@ -152,6 +153,8 @@ public static String getValue(AccessibilityRole role) {
           return "android.widget.Switch";
         case LIST:
           return "android.widget.AbsListView";
+        case GRID:
+          return "android.widget.GridView";
         case NONE:
         case LINK:
         case SUMMARY:
@@ -242,6 +245,22 @@ public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCo
     }
     final ReadableArray accessibilityActions =
         (ReadableArray) host.getTag(R.id.accessibility_actions);
+
+    final ReadableMap accessibilityCollectionItem =
+        (ReadableMap) host.getTag(R.id.accessibility_collection_item);
+    if (accessibilityCollectionItem != null) {
+      int rowIndex = accessibilityCollectionItem.getInt("rowIndex");
+      int columnIndex = accessibilityCollectionItem.getInt("columnIndex");
+      int rowSpan = accessibilityCollectionItem.getInt("rowSpan");
+      int columnSpan = accessibilityCollectionItem.getInt("columnSpan");
+      boolean heading = accessibilityCollectionItem.getBoolean("heading");
+
+      AccessibilityNodeInfoCompat.CollectionItemInfoCompat collectionItemCompat =
+          AccessibilityNodeInfoCompat.CollectionItemInfoCompat.obtain(
+              rowIndex, rowSpan, columnIndex, columnSpan, heading);
+      info.setCollectionItemInfo(collectionItemCompat);
+    }
+
     if (accessibilityActions != null) {
       for (int i = 0; i < accessibilityActions.size(); i++) {
         final ReadableMap action = accessibilityActions.getMap(i);
@@ -466,6 +485,7 @@ public static void setDelegate(
             || view.getTag(R.id.accessibility_state) != null
             || view.getTag(R.id.accessibility_actions) != null
             || view.getTag(R.id.react_test_id) != null
+            || view.getTag(R.id.accessibility_collection_item) != null
             || view.getTag(R.id.accessibility_links) != null)) {
       ViewCompat.setAccessibilityDelegate(
           view,
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
index 661c3466dde96f..d78d1f7e5a8e8b 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
@@ -146,6 +146,8 @@ public class ViewProps {
   public static final String Z_INDEX = "zIndex";
   public static final String RENDER_TO_HARDWARE_TEXTURE = "renderToHardwareTextureAndroid";
   public static final String ACCESSIBILITY_LABEL = "accessibilityLabel";
+  public static final String ACCESSIBILITY_COLLECTION = "accessibilityCollection";
+  public static final String ACCESSIBILITY_COLLECTION_ITEM = "accessibilityCollectionItem";
   public static final String ACCESSIBILITY_HINT = "accessibilityHint";
   public static final String ACCESSIBILITY_LIVE_REGION = "accessibilityLiveRegion";
   public static final String ACCESSIBILITY_ROLE = "accessibilityRole";
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java b/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java
index eb0de9d470e043..83f14c50c4c104 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java
@@ -25,13 +25,10 @@
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewGroup;
-import android.view.accessibility.AccessibilityEvent;
 import android.widget.HorizontalScrollView;
 import android.widget.OverScroller;
 import androidx.annotation.Nullable;
-import androidx.core.view.AccessibilityDelegateCompat;
 import androidx.core.view.ViewCompat;
-import androidx.core.view.accessibility.AccessibilityNodeInfoCompat;
 import com.facebook.common.logging.FLog;
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.common.ReactConstants;
@@ -118,22 +115,7 @@ public ReactHorizontalScrollView(Context context, @Nullable FpsListener fpsListe
     mReactBackgroundManager = new ReactViewBackgroundManager(this);
     mFpsListener = fpsListener;
 
-    ViewCompat.setAccessibilityDelegate(
-        this,
-        new AccessibilityDelegateCompat() {
-          @Override
-          public void onInitializeAccessibilityEvent(View host, AccessibilityEvent event) {
-            super.onInitializeAccessibilityEvent(host, event);
-            event.setScrollable(mScrollEnabled);
-          }
-
-          @Override
-          public void onInitializeAccessibilityNodeInfo(
-              View host, AccessibilityNodeInfoCompat info) {
-            super.onInitializeAccessibilityNodeInfo(host, info);
-            info.setScrollable(mScrollEnabled);
-          }
-        });
+    ViewCompat.setAccessibilityDelegate(this, new ReactScrollViewAccessibilityDelegate());
 
     mScroller = getOverScrollerFromParent();
     mReactScrollViewScrollState =
@@ -143,6 +125,10 @@ public void onInitializeAccessibilityNodeInfo(
                 : ViewCompat.LAYOUT_DIRECTION_LTR);
   }
 
+  public boolean getScrollEnabled() {
+    return mScrollEnabled;
+  }
+
   @Nullable
   private OverScroller getOverScrollerFromParent() {
     OverScroller scroller;
@@ -404,7 +390,7 @@ private boolean isScrolledInView(View descendent) {
   }
 
   /** Returns whether the given descendent is partially scrolled in view */
-  private boolean isPartiallyScrolledInView(View descendent) {
+  public boolean isPartiallyScrolledInView(View descendent) {
     int scrollDelta = getScrollDelta(descendent);
     descendent.getDrawingRect(mTempRect);
     return scrollDelta != 0 && Math.abs(scrollDelta) < mTempRect.width();
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java b/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java
index 9c77f01ddc39b2..d33c08f1fdbc72 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java
@@ -73,6 +73,7 @@ public class ReactScrollView extends ScrollView
   private final @Nullable OverScroller mScroller;
   private final VelocityHelper mVelocityHelper = new VelocityHelper();
   private final Rect mRect = new Rect(); // for reuse to avoid allocation
+  private final Rect mTempRect = new Rect();
   private final Rect mOverflowInset = new Rect();
 
   private boolean mActivelyScrolling;
@@ -116,6 +117,8 @@ public ReactScrollView(Context context, @Nullable FpsListener fpsListener) {
     mScroller = getOverScrollerFromParent();
     setOnHierarchyChangeListener(this);
     setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);
+
+    ViewCompat.setAccessibilityDelegate(this, new ReactScrollViewAccessibilityDelegate());
   }
 
   @Override
@@ -187,6 +190,10 @@ public void setScrollEnabled(boolean scrollEnabled) {
     mScrollEnabled = scrollEnabled;
   }
 
+  public boolean getScrollEnabled() {
+    return mScrollEnabled;
+  }
+
   public void setPagingEnabled(boolean pagingEnabled) {
     mPagingEnabled = pagingEnabled;
   }
@@ -295,6 +302,19 @@ public void requestChildFocus(View child, View focused) {
     super.requestChildFocus(child, focused);
   }
 
+  private int getScrollDelta(View descendent) {
+    descendent.getDrawingRect(mTempRect);
+    offsetDescendantRectToMyCoords(descendent, mTempRect);
+    return computeScrollDeltaToGetChildRectOnScreen(mTempRect);
+  }
+
+  /** Returns whether the given descendent is partially scrolled in view */
+  public boolean isPartiallyScrolledInView(View descendent) {
+    int scrollDelta = getScrollDelta(descendent);
+    descendent.getDrawingRect(mTempRect);
+    return scrollDelta != 0 && Math.abs(scrollDelta) < mTempRect.width();
+  }
+
   private void scrollToChild(View child) {
     Rect tempRect = new Rect();
     child.getDrawingRect(tempRect);
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewAccessibilityDelegate.java b/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewAccessibilityDelegate.java
new file mode 100644
index 00000000000000..6cf22db90c04e1
--- /dev/null
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewAccessibilityDelegate.java
@@ -0,0 +1,154 @@
+/*
+ * 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.
+ */
+
+package com.facebook.react.views.scroll;
+
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.accessibility.AccessibilityEvent;
+import androidx.core.view.AccessibilityDelegateCompat;
+import androidx.core.view.accessibility.AccessibilityNodeInfoCompat;
+import com.facebook.react.R;
+import com.facebook.react.bridge.AssertionException;
+import com.facebook.react.bridge.ReactSoftExceptionLogger;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.uimanager.ReactAccessibilityDelegate;
+
+public class ReactScrollViewAccessibilityDelegate extends AccessibilityDelegateCompat {
+  private final String TAG = ReactScrollViewAccessibilityDelegate.class.getSimpleName();
+
+  @Override
+  public void onInitializeAccessibilityEvent(View host, AccessibilityEvent event) {
+    super.onInitializeAccessibilityEvent(host, event);
+    if (host instanceof ReactScrollView || host instanceof ReactHorizontalScrollView) {
+      onInitializeAccessibilityEventInternal(host, event);
+    } else {
+      ReactSoftExceptionLogger.logSoftException(
+          TAG,
+          new AssertionException(
+              "ReactScrollViewAccessibilityDelegate should only be used with ReactScrollView or ReactHorizontalScrollView, not with class: "
+                  + host.getClass().getSimpleName()));
+    }
+  }
+
+  @Override
+  public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCompat info) {
+    super.onInitializeAccessibilityNodeInfo(host, info);
+    if (host instanceof ReactScrollView || host instanceof ReactHorizontalScrollView) {
+      onInitializeAccessibilityNodeInfoInternal(host, info);
+    } else {
+      ReactSoftExceptionLogger.logSoftException(
+          TAG,
+          new AssertionException(
+              "ReactScrollViewAccessibilityDelegate should only be used with ReactScrollView or ReactHorizontalScrollView, not with class: "
+                  + host.getClass().getSimpleName()));
+    }
+  };
+
+  private void onInitializeAccessibilityEventInternal(View view, AccessibilityEvent event) {
+    final ReadableMap accessibilityCollection =
+        (ReadableMap) view.getTag(R.id.accessibility_collection);
+
+    if (accessibilityCollection != null) {
+      event.setItemCount(accessibilityCollection.getInt("itemCount"));
+      View contentView;
+      if (view instanceof ViewGroup) {
+        ViewGroup viewGroup = (ViewGroup) view;
+        contentView = viewGroup.getChildAt(0);
+      } else {
+        return;
+      }
+      Integer firstVisibleIndex = null;
+      Integer lastVisibleIndex = null;
+
+      if (!(contentView instanceof ViewGroup)) {
+        return;
+      }
+
+      for (int index = 0; index < ((ViewGroup) contentView).getChildCount(); index++) {
+        View nextChild = ((ViewGroup) contentView).getChildAt(index);
+        boolean isVisible;
+        if (view instanceof ReactScrollView) {
+          ReactScrollView scrollView = (ReactScrollView) view;
+          isVisible = scrollView.isPartiallyScrolledInView(nextChild);
+        } else if (view instanceof ReactHorizontalScrollView) {
+          ReactHorizontalScrollView scrollView = (ReactHorizontalScrollView) view;
+          isVisible = scrollView.isPartiallyScrolledInView(nextChild);
+        } else {
+          return;
+        }
+        ReadableMap accessibilityCollectionItem =
+            (ReadableMap) nextChild.getTag(R.id.accessibility_collection_item);
+
+        if (!(nextChild instanceof ViewGroup)) {
+          return;
+        }
+
+        int childCount = ((ViewGroup) nextChild).getChildCount();
+
+        // If this child's accessibilityCollectionItem is null, we'll check one more
+        // nested child.
+        // Happens when getItemLayout is not passed in FlatList which adds an additional
+        // View in the hierarchy.
+        if (childCount > 0 && accessibilityCollectionItem == null) {
+          View nestedNextChild = ((ViewGroup) nextChild).getChildAt(0);
+          if (nestedNextChild != null) {
+            ReadableMap nestedChildAccessibility =
+                (ReadableMap) nestedNextChild.getTag(R.id.accessibility_collection_item);
+            if (nestedChildAccessibility != null) {
+              accessibilityCollectionItem = nestedChildAccessibility;
+            }
+          }
+        }
+
+        if (isVisible == true && accessibilityCollectionItem != null) {
+          if (firstVisibleIndex == null) {
+            firstVisibleIndex = accessibilityCollectionItem.getInt("itemIndex");
+          }
+          lastVisibleIndex = accessibilityCollectionItem.getInt("itemIndex");
+        }
+
+        if (firstVisibleIndex != null && lastVisibleIndex != null) {
+          event.setFromIndex(firstVisibleIndex);
+          event.setToIndex(lastVisibleIndex);
+        }
+      }
+    }
+  }
+
+  private void onInitializeAccessibilityNodeInfoInternal(
+      View view, AccessibilityNodeInfoCompat info) {
+    final ReactAccessibilityDelegate.AccessibilityRole accessibilityRole =
+        (ReactAccessibilityDelegate.AccessibilityRole) view.getTag(R.id.accessibility_role);
+
+    if (accessibilityRole != null) {
+      ReactAccessibilityDelegate.setRole(info, accessibilityRole, view.getContext());
+    }
+
+    final ReadableMap accessibilityCollection =
+        (ReadableMap) view.getTag(R.id.accessibility_collection);
+
+    if (accessibilityCollection != null) {
+      int rowCount = accessibilityCollection.getInt("rowCount");
+      int columnCount = accessibilityCollection.getInt("columnCount");
+      boolean hierarchical = accessibilityCollection.getBoolean("hierarchical");
+
+      AccessibilityNodeInfoCompat.CollectionInfoCompat collectionInfoCompat =
+          AccessibilityNodeInfoCompat.CollectionInfoCompat.obtain(
+              rowCount, columnCount, hierarchical);
+      info.setCollectionInfo(collectionInfoCompat);
+    }
+
+    if (view instanceof ReactScrollView) {
+      ReactScrollView scrollView = (ReactScrollView) view;
+      info.setScrollable(scrollView.getScrollEnabled());
+    } else if (view instanceof ReactHorizontalScrollView) {
+      ReactHorizontalScrollView scrollView = (ReactHorizontalScrollView) view;
+      info.setScrollable(scrollView.getScrollEnabled());
+    }
+  }
+};
diff --git a/ReactAndroid/src/main/res/views/uimanager/values/ids.xml b/ReactAndroid/src/main/res/views/uimanager/values/ids.xml
index b9e9b732bb3595..bd525ea13c91d8 100644
--- a/ReactAndroid/src/main/res/views/uimanager/values/ids.xml
+++ b/ReactAndroid/src/main/res/views/uimanager/values/ids.xml
@@ -15,7 +15,13 @@
   <!--tag is used to store accessibilityRole tag-->
   <item type="id" name="accessibility_role"/>
 
-  <!--tag is used to store accessibilityState -->
+  <!--tag is used to store accessibilityCollection -->
+  <item type="id" name="accessibility_collection"/>
+
+  <!--tag is used to store accessibilityCollectionItem -->
+  <item type="id" name="accessibility_collection_item"/>
+
+ <!--tag is used to store accessibilityState -->
   <item type="id" name="accessibility_state"/>
 
   <!--tag is used to store accessibilityLabel tag-->
diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
index 64431eed54663e..25756e56173c6d 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
+++ b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
@@ -312,19 +312,22 @@ 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]: props => {
-        const {item, separators, isSelected} = props; // [macOS]
+      [flatListPropKey]: ({item, separators, accessibilityCollectionItem, isSelected}) => {  // [macOS]
         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}
-            isSelected={isSelected} // [macOS]
-          />
+          <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}
+              isSelected={isSelected} // [macOS]
+            />
+          </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..9e4bbe073cdc06
--- /dev/null
+++ b/packages/rn-tester/js/examples/FlatList/FlatList-nested.js
@@ -0,0 +1,114 @@
+import 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 = () => {
+  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 d478424f4c51fd..b0ae6d1879aa7d 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',