diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index 76f1ca2d234593..99a890be998ef6 100644 --- a/Libraries/Lists/FlatList.js +++ b/Libraries/Lists/FlatList.js @@ -600,13 +600,6 @@ class FlatList extends React.PureComponent, 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. @@ -623,14 +616,13 @@ class FlatList extends React.PureComponent, void> { {item.map((it, kk) => { const itemIndex = index * numColumns + kk; const accessibilityCollectionItem = { - ...defaultAccessibilityCollectionItem, - rowIndex: index, + ...info.accessibilityCollectionItem, columnIndex: itemIndex % numColumns, itemIndex: itemIndex, }; const element = renderer({ item: it, - index: index * numColumns + kk, + index: itemIndex, separators: info.separators, accessibilityCollectionItem, }); @@ -641,16 +633,7 @@ class FlatList extends React.PureComponent, void> { ); } else { - const accessibilityCollectionItem = { - ...defaultAccessibilityCollectionItem, - rowIndex: info.index, - itemIndex: info.index, - }; - - return renderer({ - ...info, - accessibilityCollectionItem, - }); + return renderer(info); } }, }; @@ -670,11 +653,7 @@ class FlatList extends React.PureComponent, void> { getItem={this._getItem} getItemCount={this._getItemCount} keyExtractor={this._keyExtractor} - numColumns={numColumnsOrDefault(this.props.numColumns)} - accessibilityRole={Platform.select({ - android: - numColumnsOrDefault(this.props.numColumns) > 1 ? 'grid' : 'list', - })} + numColumns={numColumnsOrDefault(numColumns)} ref={this._captureRef} viewabilityConfigCallbackPairs={this._virtualizedListPairs} removeClippedSubviews={removeClippedSubviewsOrDefault( diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js index af5580ca802573..6fc24cc76baf6e 100644 --- a/Libraries/Lists/VirtualizedList.js +++ b/Libraries/Lists/VirtualizedList.js @@ -12,6 +12,7 @@ const Batchinator = require('../Interaction/Batchinator'); const FillRateHelper = require('./FillRateHelper'); 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'); @@ -305,6 +306,11 @@ type Props = {| ...OptionalProps, |}; +// numColumnsOrDefault(this.props.numColumns) +function numColumnsOrDefault(numColumns: ?number) { + return numColumns ?? 1; +} + let _usedIndexForKey = false; let _keylessItemComponentName: string = ''; @@ -1233,18 +1239,8 @@ class VirtualizedList extends React.PureComponent { ); } - _getAccessibilityCollection = () => { - const accessibilityCollectionProps = { - itemCount: this.props.data ? this.props.data.length : 0, - rowCount: this.props.getItemCount(this.props.data), - columnCount: this.props.numColumns, - hierarchical: false, - }; - - return accessibilityCollectionProps; - }; - _defaultRenderScrollComponent = props => { + const {getItemCount, data} = props; const onRefresh = props.onRefresh; if (this._isNestedWithSameOrientation()) { // $FlowFixMe[prop-missing] - Typing ReactNativeComponent revealed errors @@ -1256,11 +1252,22 @@ class VirtualizedList extends React.PureComponent { JSON.stringify(props.refreshing ?? 'undefined') + '`', ); + const numColumns = numColumnsOrDefault(props.numColumns); + const accessibilityRole = Platform.select({ + android: numColumns > 1 ? 'grid' : 'list', + }); + const accessibilityCollection = { + itemCount: data ? data.length : 0, + rowCount: getItemCount(data), + columnCount: numColumnsOrDefault(numColumns), + hierarchical: false, + }; return ( // $FlowFixMe[prop-missing] Invalid prop usage { ); } else { // $FlowFixMe[prop-missing] Invalid prop usage - return ; + return ( + + ); } }; @@ -2015,10 +2028,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, }); }