Collection Name now supported by SectionList

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

@@ -238,6 +238,8 @@ export default class SectionList<
   render(): React.Node {
     const {
       stickySectionHeadersEnabled: _stickySectionHeadersEnabled,
+      accessibilityRole,
+      accessibilityCollection,
       ...restProps
     } = this.props;
     const stickySectionHeadersEnabled =
@@ -251,6 +253,8 @@ export default class SectionList<
         {...restProps}
         stickySectionHeadersEnabled={stickySectionHeadersEnabled}
         ref={this._captureRef}
+        accessibilityRole={accessibilityRole}
+        accessibilityCollection={accessibilityCollection}
         // $FlowFixMe[missing-local-annot]
         getItemCount={items => items.length}
         // $FlowFixMe[missing-local-annot]

packages/rn-tester/js/examples/SectionList/SectionList-collection-roles.js

@@ -0,0 +1,129 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import {
+  FooterComponent,
+  HeaderComponent,
+  ItemComponent,
+  SeparatorComponent,
+} from '../../components/ListExampleShared';
+import RNTesterPage from '../../components/RNTesterPage';
+import React from 'react';
+import {
+  SectionList,
+  StyleSheet,
+  Text,
+  View,
+  Platform,
+} from 'react-native';
+
+const DATA = [
+  {
+    title: 'Section 1',
+    data: [
+      {title: 'Item 1', text: 'Section 1'},
+      {title: 'Item 2', text: 'Section 1'},
+      {title: 'Item 3', text: 'Section 1'},
+    ],
+  },
+  {
+    title: 'Section 2',
+    data: [
+      {title: 'Item 4', text: 'Section 2'},
+      {title: 'Item 5', text: 'Section 2'},
+      {title: 'Item 6', text: 'Section 2'},
+    ],
+  },
+];
+
+const renderSectionHeader = ({section}) => (
+  <View style={styles.header}>
+    <Text style={styles.headerText}>SECTION HEADER: {section.title}</Text>
+    <SeparatorComponent />
+  </View>
+);
+
+const renderItem = ({item}) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{item.title}</Text>
+    <Text>{item.text}</Text>
+  </View>
+);
+
+function SectionListCollectionRolesExample() {
+  return (
+    <RNTesterPage
+      title="SectionList with Collection Roles"
+      noSpacer={true}
+      noScroll={true}>
+      <View style={styles.container}>
+        <Text style={styles.title}>List Role Example</Text>
+        <SectionList
+          sections={DATA}
+          renderItem={renderItem}
+          renderSectionHeader={renderSectionHeader}
+          ListHeaderComponent={HeaderComponent}
+          ListFooterComponent={FooterComponent}
+          ItemSeparatorComponent={SeparatorComponent}
+          accessibilityRole="list"
+          style={styles.list}
+        />
+
+        <Text style={styles.title}>Grid Role Example</Text>
+        <SectionList
+          sections={DATA}
+          renderItem={renderItem}
+          renderSectionHeader={renderSectionHeader}
+          ListHeaderComponent={HeaderComponent}
+          ListFooterComponent={FooterComponent}
+          ItemSeparatorComponent={SeparatorComponent}
+          accessibilityRole="grid"
+          accessibilityCollection={{
+            rowCount: 3,
+            columnCount: 2,
+            hierarchical: false,
+          }}
+          style={styles.list}
+        />
+      </View>
+    </RNTesterPage>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    padding: 10,
+  },
+  list: {
+    flex: 1,
+  },
+  header: {
+    backgroundColor: '#e9eaed',
+  },
+  headerText: {
+    padding: 4,
+    fontWeight: '600',
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    backgroundColor: 'pink',
+  },
+});
+
+export default SectionListCollectionRolesExample; 

packages/virtualized-lists/Lists/VirtualizedSectionList.js

@@ -102,6 +102,20 @@ export type VirtualizedSectionListProps<ItemT, SectionT = DefaultSectionT> = {
   ...RequiredProps<ItemT, SectionT>,
   ...OptionalProps<ItemT, SectionT>,
   ...Omit<VirtualizedListProps, 'data' | 'renderItem'>,
+  /**
+   * The accessibility role for the list. Can be 'list' or 'grid'.
+   * @platform android
+   */
+  accessibilityRole?: 'list' | 'grid',
+  /**
+   * Collection information for accessibility. Used when accessibilityRole is 'grid'.
+   * @platform android
+   */
+  accessibilityCollection?: {
+    rowCount: number,
+    columnCount: number,
+    hierarchical: boolean,
+  },
 };
 export type ScrollToLocationParamsType = {
   animated?: ?boolean,
@@ -163,6 +177,8 @@ class VirtualizedSectionList<
       renderSectionHeader,
       sections: _sections,
       stickySectionHeadersEnabled,
+      accessibilityRole,
+      accessibilityCollection,
       ...passThroughProps
     } = this.props;
 
@@ -202,6 +218,8 @@ class VirtualizedSectionList<
             : undefined
         }
         ref={this._captureRef}
+        accessibilityRole={accessibilityRole}
+        accessibilityCollection={accessibilityCollection}
       />
     );
   }