Back out "TalkBack support for ScrollView accessibility announcements…

… (list and grid) - Javascript Only Changes" Summary: Original commit changeset: 3765213c5d8b Original Phabricator Diff: D37189197 (2d58821) Changelog: [Internal] Reviewed By: bvanderhoof Differential Revision: D37260990 fbshipit-source-id: bfcb10f2d5a2a1427b72a10ef380df194b041ba0
facebook · Jun 18, 2022 · 4bb551d · 4bb551d
1 parent 2d58821
commit 4bb551d
Show file tree

Hide file tree

Showing 14 changed files with 31 additions and 824 deletions.
diff --git 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
@@ -464,23 +464,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
@@ -624,17 +624,10 @@ 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({
                   item: it,
-                  index: itemIndex,
+                  index: index * cols + kk,
                   separators: info.separators,
-                  accessibilityCollectionItem,
                 });
                 return element != null ? (
                   <React.Fragment key={kk}>{element}</React.Fragment>
@@ -665,7 +658,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
@@ -35,7 +35,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');
@@ -54,20 +53,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,
   ...
 };
 
@@ -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<Item>,
@@ -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<Props, State> {
     );
   }
 
-  _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 <View {...props} />;
@@ -1319,8 +1269,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
@@ -1336,14 +1284,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} />;
     }
   };
 
@@ -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
@@ -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 && (
     <LeadingSeparatorComponent

diff --git a/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
@@ -6,14 +6,6 @@ exports[`FlatList renders all the bells and whistles 1`] = `
   ListEmptyComponent={[Function]}
   ListFooterComponent={[Function]}
   ListHeaderComponent={[Function]}
-  accessibilityCollection={
-    Object {
-      "columnCount": 2,
-      "hierarchical": false,
-      "itemCount": 5,
-      "rowCount": 3,
-    }
-  }
   data={
     Array [
       Object {
@@ -37,7 +29,6 @@ exports[`FlatList renders all the bells and whistles 1`] = `
   getItemCount={[Function]}
   getItemLayout={[Function]}
   keyExtractor={[Function]}
-  numColumns={2}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
   onMomentumScrollBegin={[Function]}
@@ -130,14 +121,6 @@ exports[`FlatList renders all the bells and whistles 1`] = `
 
 exports[`FlatList renders empty list 1`] = `
 <RCTScrollView
-  accessibilityCollection={
-    Object {
-      "columnCount": 1,
-      "hierarchical": false,
-      "itemCount": 0,
-      "rowCount": 0,
-    }
-  }
   data={Array []}
   getItem={[Function]}
   getItemCount={[Function]}
@@ -161,14 +144,6 @@ exports[`FlatList renders empty list 1`] = `
 
 exports[`FlatList renders null list 1`] = `
 <RCTScrollView
-  accessibilityCollection={
-    Object {
-      "columnCount": 1,
-      "hierarchical": false,
-      "itemCount": 0,
-      "rowCount": 0,
-    }
-  }
   getItem={[Function]}
   getItemCount={[Function]}
   keyExtractor={[Function]}
@@ -191,14 +166,6 @@ exports[`FlatList renders null list 1`] = `
 
 exports[`FlatList renders simple list (multiple columns) 1`] = `
 <RCTScrollView
-  accessibilityCollection={
-    Object {
-      "columnCount": 2,
-      "hierarchical": false,
-      "itemCount": 3,
-      "rowCount": 2,
-    }
-  }
   data={
     Array [
       Object {
@@ -215,7 +182,6 @@ exports[`FlatList renders simple list (multiple columns) 1`] = `
   getItem={[Function]}
   getItemCount={[Function]}
   keyExtractor={[Function]}
-  numColumns={2}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
   onMomentumScrollBegin={[Function]}
@@ -271,14 +237,6 @@ exports[`FlatList renders simple list (multiple columns) 1`] = `
 
 exports[`FlatList renders simple list 1`] = `
 <RCTScrollView
-  accessibilityCollection={
-    Object {
-      "columnCount": 1,
-      "hierarchical": false,
-      "itemCount": 3,
-      "rowCount": 3,
-    }
-  }
   data={
     Array [
       Object {
@@ -340,14 +298,6 @@ exports[`FlatList renders simple list 1`] = `
 exports[`FlatList renders simple list using ListItemComponent (multiple columns) 1`] = `
 <RCTScrollView
   ListItemComponent={[Function]}
-  accessibilityCollection={
-    Object {
-      "columnCount": 2,
-      "hierarchical": false,
-      "itemCount": 3,
-      "rowCount": 2,
-    }
-  }
   data={
     Array [
       Object {
@@ -364,7 +314,6 @@ exports[`FlatList renders simple list using ListItemComponent (multiple columns)
   getItem={[Function]}
   getItemCount={[Function]}
   keyExtractor={[Function]}
-  numColumns={2}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
   onMomentumScrollBegin={[Function]}
@@ -420,14 +369,6 @@ exports[`FlatList renders simple list using ListItemComponent (multiple columns)
 exports[`FlatList renders simple list using ListItemComponent 1`] = `
 <RCTScrollView
   ListItemComponent={[Function]}
-  accessibilityCollection={
-    Object {
-      "columnCount": 1,
-      "hierarchical": false,
-      "itemCount": 3,
-      "rowCount": 3,
-    }
-  }
   data={
     Array [
       Object {