removing container View in renderItem callback

facebook@4c3182a The accessibilityCollectionItem is available in the parameter item.accessibilityCollectionItem As in the below rn-tester example, the collectionItem is set as follows ```jsx <View importantForAccessibility="yes" accessibilityCollectionItem={item.accessibilityCollectionItem}> <Item /> </View> ```
fabOnReact · Mar 13, 2022 · 1a98f56 · 1a98f56
1 parent fb795ad
commit 1a98f56
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 24 deletions.
diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js
@@ -600,6 +600,13 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
       }
     };
 
+    const defaultAccessibilityCollectionItem = {
+      rowSpan: 1,
+      columnIndex: 0,
+      columnSpan: 1,
+      heading: false,
+    };
+
     return {
       /* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb)
        * This comment suppresses an error found when Flow v0.111 was deployed.
@@ -611,24 +618,23 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
             Array.isArray(item),
             'Expected array of items with numColumns > 1',
           );
+
           return (
             <View style={StyleSheet.compose(styles.row, columnWrapperStyle)}>
               {item.map((it, kk) => {
                 const itemIndex = index * numColumns + kk;
                 const accessibilityCollectionItem = {
+                  ...defaultAccessibilityCollectionItem,
                   rowIndex: index,
-                  rowSpan: 1,
                   columnIndex: itemIndex % numColumns,
-                  columnSpan: 1,
-                  heading: false,
                   itemIndex: itemIndex,
                 };
+                const accessibleItem = {...it, accessibilityCollectionItem};
 
                 const element = renderer({
-                  item: it,
+                  item: accessibleItem,
                   index: index * numColumns + kk,
                   separators: info.separators,
-                  accessibilityCollectionItem: accessibilityCollectionItem,
                 });
 
                 return element != null ? (
@@ -641,15 +647,16 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
           const {index} = info;
 
           const accessibilityCollectionItem = {
+            ...defaultAccessibilityCollectionItem,
             rowIndex: index,
-            rowSpan: 1,
-            columnIndex: 0,
-            columnSpan: 1,
-            heading: false,
             itemIndex: index,
           };
+          const accessibleInfo = {
+            ...info,
+            item: {...info.item, accessibilityCollectionItem},
+          };
 
-          return renderer({info, accessibilityCollectionItem});
+          return renderer(accessibleInfo);
         }
       },
     };

diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
@@ -276,17 +276,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]: ({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={item.accessibilityCollectionItem}
+            style={styles.card}>
+            <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
@@ -140,15 +140,13 @@ class MultiColumnExample extends React.PureComponent<
       getItemLayout(data, index).length + 2 * (CARD_MARGIN + BORDER_WIDTH);
     return {length, offset: length * index, index};
   }
-  _renderItemComponent = (props: any) => {
-    const {item, accessibilityCollectionItem} = props;
+  _renderItemComponent = ({item}: RenderItemProps<any | Item>) => {
     return (
       <View
         importantForAccessibility="yes"
-        accessibilityCollectionItem={accessibilityCollectionItem}
+        accessibilityCollectionItem={item.accessibilityCollectionItem}
         style={styles.card}>
         <ItemComponent
-          {...props}
           item={item}
           fixedHeight={this.state.fixedHeight}
           onPress={this._pressItem}