From 4bb551d0183b2426638c3eedfef33ab0060a38ee Mon Sep 17 00:00:00 2001 From: Kacie Bawiec Date: Fri, 17 Jun 2022 22:08:57 -0700 Subject: [PATCH] Back out "TalkBack support for ScrollView accessibility announcements (list and grid) - Javascript Only Changes" Summary: Original commit changeset: 3765213c5d8b Original Phabricator Diff: D37189197 (https://github.com/facebook/react-native/commit/2d5882132fb2c533fe9bbba83576b8fac4aca727) Changelog: [Internal] Reviewed By: bvanderhoof Differential Revision: D37260990 fbshipit-source-id: bfcb10f2d5a2a1427b72a10ef380df194b041ba0 --- .../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, 31 insertions(+), 824 deletions(-) delete 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 182112160c6..51343752c55 100644 --- a/Libraries/Components/View/ViewAccessibility.js +++ b/Libraries/Components/View/ViewAccessibility.js @@ -43,7 +43,6 @@ 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 aff394035d2..0d6753be9f7 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/Libraries/Components/View/ViewPropTypes.js @@ -464,23 +464,6 @@ export type ViewProps = $ReadOnly<{| */ accessibilityActions?: ?$ReadOnlyArray, - /** - * - * 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 e08fb950dd5..8e810372bd7 100644 --- a/Libraries/Lists/FlatList.js +++ b/Libraries/Lists/FlatList.js @@ -624,17 +624,10 @@ class FlatList extends React.PureComponent, void> { return ( {item.map((it, kk) => { - const itemIndex = index * cols + kk; - const accessibilityCollectionItem = { - ...info.accessibilityCollectionItem, - columnIndex: itemIndex % cols, - itemIndex: itemIndex, - }; const element = renderer({ item: it, - index: itemIndex, + index: index * cols + kk, separators: info.separators, - accessibilityCollectionItem, }); return element != null ? ( {element} @@ -665,7 +658,6 @@ class FlatList extends React.PureComponent, void> { return ( = { item: ItemT, index: number, separators: Separators, - accessibilityCollectionItem: AccessibilityCollectionItem, ... }; @@ -96,19 +85,9 @@ type RequiredProps = {| */ getItem: (data: any, index: number) => ?Item, /** - * Determines how many items (rows) are in the data blob. + * Determines how many items 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, @@ -329,10 +308,6 @@ type Props = {| ...OptionalProps, |}; -function numColumnsOrDefault(numColumns: ?number) { - return numColumns ?? 1; -} - let _usedIndexForKey = false; let _keylessItemComponentName: string = ''; @@ -1278,33 +1253,8 @@ class VirtualizedList extends React.PureComponent { ); } - _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 ; @@ -1319,8 +1269,6 @@ class VirtualizedList extends React.PureComponent { // $FlowFixMe[prop-missing] Invalid prop usage { /> ); } else { - return ( - // $FlowFixMe[prop-missing] Invalid prop usage - - ); + // $FlowFixMe[prop-missing] Invalid prop usage + return ; } }; @@ -2114,19 +2056,10 @@ 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 82f9048c8a4..396ad7b58ca 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,16 +341,7 @@ class VirtualizedSectionList< _renderItem = (listItemCount: number) => // eslint-disable-next-line react/no-unstable-nested-components - ({ - item, - index, - accessibilityCollectionItem, - }: { - item: Item, - index: number, - accessibilityCollectionItem: AccessibilityCollectionItem, - ... - }) => { + ({item, index}: {item: Item, index: number, ...}) => { const info = this._subExtractor(index); if (!info) { return null; @@ -379,7 +370,6 @@ class VirtualizedSectionList< LeadingSeparatorComponent={ infoIndex === 0 ? this.props.SectionSeparatorComponent : undefined } - accessibilityCollectionItem={accessibilityCollectionItem} cellKey={info.key} index={infoIndex} item={item} @@ -492,7 +482,6 @@ type ItemWithSeparatorProps = $ReadOnly<{| updatePropsFor: (prevCellKey: string, value: Object) => void, renderItem: Function, inverted: boolean, - accessibilityCollectionItem: AccessibilityCollectionItem, |}>; function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node { @@ -510,7 +499,6 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node { index, section, inverted, - accessibilityCollectionItem, } = props; const [leadingSeparatorHiglighted, setLeadingSeparatorHighlighted] = @@ -584,7 +572,6 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node { index, section, separators, - accessibilityCollectionItem, }); const leadingSeparator = LeadingSeparatorComponent != null && ( Object { @@ -1718,14 +1566,6 @@ 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`] = ` { /* $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, accessibilityCollectionItem}) => { + [flatListPropKey]: ({item, separators}) => { return ( - - - + ); }, }; diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js b/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js index eb673afc168..a4ec63a8c4d 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js @@ -140,12 +140,9 @@ class MultiColumnExample extends React.PureComponent< getItemLayout(data, index).length + 2 * (CARD_MARGIN + BORDER_WIDTH); return {length, offset: length * index, index}; } - _renderItemComponent = ({item, accessibilityCollectionItem}) => { + _renderItemComponent = ({item}: RenderItemProps) => { return ( - + ( - - {item.title} - -); - -const renderItem = props => ; - -const renderFlatList = ({item}) => { - return ( - - Flatlist {item} - - - ); -}; - -const FlatListNested = (): React.Node => { - return ( - - item.toString()} - /> - - ); -}; - -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 { - return ; - }, - }, -]; diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js b/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js index 962af98305b..88fda4e8171 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, accessibilityCollectionItem}) => { + ({item, separators}) => { if (isNaN(item.key)) { return; } @@ -119,16 +119,12 @@ const renderItemComponent = }; return ( - - - + ); }; diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js index 61e5318eab3..f150ea666b1 100644 --- a/packages/rn-tester/js/utils/RNTesterList.android.js +++ b/packages/rn-tester/js/utils/RNTesterList.android.js @@ -31,11 +31,6 @@ const Components: Array = [ category: 'ListView', supportsTVOS: true, }, - { - key: 'FlatList-nested', - module: require('../examples/FlatList/FlatList-nested'), - category: 'ListView', - }, { key: 'ImageExample', category: 'Basic',