Back out "TalkBack support for ScrollView accessibility announcements…

… (list and grid) - Javascript Only Changes" Summary: Original commit changeset: 7ba4068405fd Original Phabricator Diff: D37668064 (463af23) D37668064 (463af23) caused issues in VR Store where on tail load, the scroll position would reset and go back to the top. Changelog: [Android][Removed] - Backing out "Accessibility announcement for list and grid in FlatList" Reviewed By: mullender Differential Revision: D38473805 fbshipit-source-id: f454c15ca0d31294a44f5fd3f6b73e658ca4f00d
facebook · Aug 6, 2022 · 3f8071d · 3f8071d
1 parent 9ac0c01
commit 3f8071d
Show file tree

Hide file tree

Showing 17 changed files with 34 additions and 1,491 deletions.
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
@@ -461,23 +461,6 @@ 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
@@ -631,18 +631,11 @@ 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({
                   // $FlowFixMe[incompatible-call]
                   item: it,
-                  index: itemIndex,
+                  index: index * cols + kk,
                   separators: info.separators,
-                  accessibilityCollectionItem,
                 });
                 return element != null ? (
                   <React.Fragment key={kk}>{element}</React.Fragment>
@@ -674,7 +667,6 @@ 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
@@ -42,7 +42,6 @@ const ScrollView = require('../Components/ScrollView/ScrollView');
 const View = require('../Components/View/View');
 const Batchinator = require('../Interaction/Batchinator');
 const ReactNative = require('../Renderer/shims/ReactNative');
-const Platform = require('../Utilities/Platform');
 const flattenStyle = require('../StyleSheet/flattenStyle');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const infoLog = require('../Utilities/infoLog');
@@ -75,11 +74,6 @@ type State = {
  * Use the following helper functions for default values
  */
 
-// numColumnsOrDefault(this.props.numColumns)
-function numColumnsOrDefault(numColumns: ?number) {
-  return numColumns ?? 1;
-}
-
 // horizontalOrDefault(this.props.horizontal)
 function horizontalOrDefault(horizontal: ?boolean) {
   return horizontal ?? false;
@@ -1020,36 +1014,10 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     );
   }
 
-  // $FlowFixMe[missing-local-annot]
-  _getCellsInItemCount = (props: Props) => {
-    const {getCellsInItemCount, data} = props;
-    if (getCellsInItemCount) {
-      return getCellsInItemCount(data);
-    }
-    if (Array.isArray(data)) {
-      return data.length;
-    }
-    return 0;
-  };
-
   /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
    * LTI update could not be added via codemod */
   _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 <View {...props} />;
@@ -1064,8 +1032,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         // $FlowFixMe[prop-missing] Invalid prop usage
         <ScrollView
           {...props}
-          accessibilityRole={accessibilityRole}
-          accessibilityCollection={accessibilityCollection}
           refreshControl={
             props.refreshControl == null ? (
               <RefreshControl
@@ -1081,14 +1047,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         />
       );
     } else {
-      return (
-        // $FlowFixMe[prop-missing] Invalid prop usage
-        <ScrollView
-          {...props}
-          accessibilityRole={accessibilityRole}
-          accessibilityCollection={accessibilityCollection}
-        />
-      );
+      // $FlowFixMe[prop-missing] Invalid prop usage
+      return <ScrollView {...props} />;
     }
   };
 
@@ -1870,19 +1830,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/VirtualizedListProps.js b/Libraries/Lists/VirtualizedListProps.js
@@ -27,20 +27,10 @@ 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,
   separators: Separators,
-  accessibilityCollectionItem: AccessibilityCollectionItem,
   ...
 };
 
@@ -59,19 +49,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<Item>,

diff --git a/Libraries/Lists/VirtualizedList_EXPERIMENTAL.js b/Libraries/Lists/VirtualizedList_EXPERIMENTAL.js
@@ -50,7 +50,6 @@ const ScrollView = require('../Components/ScrollView/ScrollView');
 const View = require('../Components/View/View');
 const Batchinator = require('../Interaction/Batchinator');
 const ReactNative = require('../Renderer/shims/ReactNative');
-const Platform = require('../Utilities/Platform');
 const flattenStyle = require('../StyleSheet/flattenStyle');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const infoLog = require('../Utilities/infoLog');
@@ -83,11 +82,6 @@ type State = {
  * Use the following helper functions for default values
  */
 
-// numColumnsOrDefault(this.props.numColumns)
-function numColumnsOrDefault(numColumns: ?number) {
-  return numColumns ?? 1;
-}
-
 // horizontalOrDefault(this.props.horizontal)
 function horizontalOrDefault(horizontal: ?boolean) {
   return horizontal ?? false;
@@ -1216,36 +1210,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     );
   }
 
-  // $FlowFixMe[missing-local-annot]
-  _getCellsInItemCount = (props: Props) => {
-    const {getCellsInItemCount, data} = props;
-    if (getCellsInItemCount) {
-      return getCellsInItemCount(data);
-    }
-    if (Array.isArray(data)) {
-      return data.length;
-    }
-    return 0;
-  };
-
   /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
    * LTI update could not be added via codemod */
   _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 <View {...props} />;
@@ -1260,8 +1228,6 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
         // $FlowFixMe[prop-missing] Invalid prop usage
         <ScrollView
           {...props}
-          accessibilityRole={accessibilityRole}
-          accessibilityCollection={accessibilityCollection}
           refreshControl={
             props.refreshControl == null ? (
               <RefreshControl
@@ -1277,14 +1243,8 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
         />
       );
     } else {
-      return (
-        // $FlowFixMe[prop-missing] Invalid prop usage
-        <ScrollView
-          {...props}
-          accessibilityRole={accessibilityRole}
-          accessibilityCollection={accessibilityCollection}
-        />
-      );
+      // $FlowFixMe[prop-missing] Invalid prop usage
+      return <ScrollView {...props} />;
     }
   };
 
@@ -2087,19 +2047,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
@@ -9,7 +9,7 @@
  */
 
 import type {ViewToken} from './ViewabilityHelper';
-import type {AccessibilityCollectionItem} from './VirtualizedListProps';
+
 import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
 import invariant from 'invariant';
 import * as React from 'react';
@@ -343,16 +343,7 @@ class VirtualizedSectionList<
   _renderItem =
     (listItemCount: number): $FlowFixMe =>
     // 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;
@@ -381,7 +372,6 @@ class VirtualizedSectionList<
             LeadingSeparatorComponent={
               infoIndex === 0 ? this.props.SectionSeparatorComponent : undefined
             }
-            accessibilityCollectionItem={accessibilityCollectionItem}
             cellKey={info.key}
             index={infoIndex}
             item={item}
@@ -497,7 +487,6 @@ type ItemWithSeparatorProps = $ReadOnly<{|
   updatePropsFor: (prevCellKey: string, value: Object) => void,
   renderItem: Function,
   inverted: boolean,
-  accessibilityCollectionItem: AccessibilityCollectionItem,
 |}>;
 
 function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
@@ -515,7 +504,6 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
     index,
     section,
     inverted,
-    accessibilityCollectionItem,
   } = props;
 
   const [leadingSeparatorHiglighted, setLeadingSeparatorHighlighted] =
@@ -589,7 +577,6 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
     index,
     section,
     separators,
-    accessibilityCollectionItem,
   });
   const leadingSeparator = LeadingSeparatorComponent != null && (
     <LeadingSeparatorComponent