Role and item announcement in Flatlist

Libraries/Lists/VirtualizedList.js

@@ -1236,6 +1236,15 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 
   _defaultRenderScrollComponent = props => {
     const onRefresh = props.onRefresh;
+    const accessibilityCollectionProps = {
+      accessibilityRole: 'list',
+      accessibilityCollectionInfo: {
+        rowCount: this.props.getItemCount(this.props.data),
+        columnCount: 1,
+        hierarchical: false,
+      },
+    };
+
     if (this._isNestedWithSameOrientation()) {
       // $FlowFixMe[prop-missing] - Typing ReactNativeComponent revealed errors
       return <View {...props} />;
@@ -1246,9 +1255,11 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           JSON.stringify(props.refreshing ?? 'undefined') +
           '`',
       );
+
       return (
         // $FlowFixMe[prop-missing] Invalid prop usage
         <ScrollView
+          {...accessibilityCollectionProps}
           {...props}
           refreshControl={
             props.refreshControl == null ? (
@@ -1265,7 +1276,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       );
     } else {
       // $FlowFixMe[prop-missing] Invalid prop usage
-      return <ScrollView {...props} />;
+      return <ScrollView {...accessibilityCollectionProps} {...props} />;
     }
   };
 
@@ -2064,19 +2075,32 @@ class CellRenderer extends React.Component<
       : horizontal
       ? [styles.row, inversionStyle]
       : inversionStyle;
+
+    const accessibilityCollectionItemInfo = {
+      rowIndex: index,
+      rowSpan: 1,
+      columnIndex: 1,
+      columnSpan: 1,
+      heading: false,
+    };
+
     const result = !CellRendererComponent ? (
       /* $FlowFixMe[incompatible-type-arg] (>=0.89.0 site=react_native_fb) *
         This comment suppresses an error found when Flow v0.89 was deployed. *
         To see the error, delete this comment and run Flow. */
-      <View style={cellStyle} onLayout={onLayout}>
+      <View
+        style={cellStyle}
+        onLayout={onLayout}
+        accessibilityCollectionItemInfo={accessibilityCollectionItemInfo}>
         {element}
         {itemSeparator}
       </View>
     ) : (
       <CellRendererComponent
         {...this.props}
         style={cellStyle}
-        onLayout={onLayout}>
+        onLayout={onLayout}
+        accessibilityCollectionItemInfo={accessibilityCollectionItemInfo}>
         {element}
         {itemSeparator}
       </CellRendererComponent>

ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

@@ -151,6 +151,7 @@ public void setAccessibilityHint(@NonNull T view, @Nullable String accessibility
     updateViewContentDescription(view);
   }
 
+
   @Override
   @ReactProp(name = ViewProps.ACCESSIBILITY_ROLE)
   public void setAccessibilityRole(@NonNull T view, @Nullable String accessibilityRole) {
@@ -160,6 +161,19 @@ public void setAccessibilityRole(@NonNull T view, @Nullable String accessibility
     view.setTag(R.id.accessibility_role, AccessibilityRole.fromValue(accessibilityRole));
   }
 
+
+  @Override
+  @ReactProp(name = ViewProps.ACCESSIBILITY_COLLECTION_INFO)
+  public void setAccessibilityCollectionInfo(@NonNull T view,  @Nullable ReadableMap accessibilityCollectionInfo) {
+    view.setTag(R.id.accessibility_collection_info, accessibilityCollectionInfo);
+  }
+
+  @Override
+  @ReactProp(name = ViewProps.ACCESSIBILITY_COLLECTION_ITEM_INFO)
+  public void setAccessibilityCollectionItemInfo(@NonNull T view,  @Nullable ReadableMap accessibilityCollectionItemInfo) {
+    view.setTag(R.id.accessibility_collection_item_info, accessibilityCollectionItemInfo);
+  }
+
   @Override
   @ReactProp(name = ViewProps.ACCESSIBILITY_STATE)
   public void setViewState(@NonNull T view, @Nullable ReadableMap accessibilityState) {

ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerAdapter.java

@@ -30,6 +30,12 @@ public void setAccessibilityLiveRegion(@NonNull T view, @Nullable String liveReg
   @Override
   public void setAccessibilityRole(@NonNull T view, @Nullable String accessibilityRole) {}
 
+  @Override
+  public void setAccessibilityCollectionInfo(@NonNull T view, @Nullable ReadableMap accessibilityCollectionInfo) {}
+
+  @Override
+  public void setAccessibilityCollectionItemInfo(@NonNull T view, @Nullable ReadableMap accessibilityCollectionItemInfo) {}
+
   @Override
   public void setViewState(@NonNull T view, @Nullable ReadableMap accessibilityState) {}
 

ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java

@@ -8,12 +8,14 @@
 package com.facebook.react.uimanager;
 
 import android.content.Context;
+import android.graphics.Rect;
 import android.os.Bundle;
 import android.os.Handler;
 import android.os.Message;
 import android.text.SpannableString;
 import android.text.style.URLSpan;
 import android.view.View;
+import android.view.ViewGroup;
 import android.view.accessibility.AccessibilityEvent;
 import androidx.annotation.Nullable;
 import androidx.core.view.AccessibilityDelegateCompat;
@@ -107,6 +109,7 @@ public enum AccessibilityRole {
     TAB,
     TABLIST,
     TIMER,
+    LIST,
     TOOLBAR;
 
     public static String getValue(AccessibilityRole role) {
@@ -135,6 +138,8 @@ public static String getValue(AccessibilityRole role) {
           return "android.widget.SpinButton";
         case SWITCH:
           return "android.widget.Switch";
+        case LIST:
+          return "android.widget.AbsListView";
         case NONE:
         case LINK:
         case SUMMARY:
@@ -204,6 +209,20 @@ public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCo
     }
     final ReadableArray accessibilityActions =
         (ReadableArray) host.getTag(R.id.accessibility_actions);
+    final ReadableMap accessibilityCollectionInfo =
+      (ReadableMap) host.getTag(R.id.accessibility_collection_info);
+
+
+    if (accessibilityCollectionInfo != null) {
+      int rowCount = accessibilityCollectionInfo.getInt("rowCount");
+      int columnCount = accessibilityCollectionInfo.getInt("columnCount");
+      boolean hierarchical = accessibilityCollectionInfo.getBoolean("hierarchical");
+
+      AccessibilityNodeInfoCompat.CollectionInfoCompat collectionInfoCompat = AccessibilityNodeInfoCompat.CollectionInfoCompat.obtain(rowCount, columnCount, hierarchical);
+      info.setCollectionInfo(collectionInfoCompat);
+    }
+
+
     if (accessibilityActions != null) {
       for (int i = 0; i < accessibilityActions.size(); i++) {
         final ReadableMap action = accessibilityActions.getMap(i);
@@ -259,12 +278,54 @@ public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCo
     }
   }
 
+  private boolean isViewVisible(View scrollView, View view) {
+    Rect scrollBounds = new Rect();
+    scrollView.getDrawingRect(scrollBounds);
+    float viewHeight = view.getHeight();
+    // Verify View is half visible
+    float top = view.getY() + viewHeight / 2;
+    float bottom = top + view.getHeight() - viewHeight / 2;
+
+    if (scrollBounds.top < top  && scrollBounds.bottom > bottom) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   @Override
   public void onInitializeAccessibilityEvent(View host, AccessibilityEvent event) {
     super.onInitializeAccessibilityEvent(host, event);
     // Set item count and current item index on accessibility events for adjustable
     // in order to make Talkback announce the value of the adjustable
     final ReadableMap accessibilityValue = (ReadableMap) host.getTag(R.id.accessibility_value);
+    final ReadableMap accessibilityCollectionInfo = (ReadableMap) host.getTag(R.id.accessibility_collection_info);
+    if (accessibilityCollectionInfo != null) {
+      event.setItemCount(accessibilityCollectionInfo.getInt("rowCount"));
+
+      View contentView = ((ViewGroup) host).getChildAt(0);
+
+       ReadableMap firstVisible = null;
+       ReadableMap lastVisible = null;
+
+      for(int index = 0; index < ((ViewGroup) contentView).getChildCount(); index++) {
+        View nextChild = ((ViewGroup) contentView).getChildAt(index);
+        boolean isVisible = isViewVisible(host, nextChild);
+        if (isVisible == true) {
+          if(firstVisible == null) {
+            firstVisible = (ReadableMap) nextChild.getTag(R.id.accessibility_collection_item_info);
+          }
+          lastVisible = (ReadableMap) nextChild.getTag(R.id.accessibility_collection_item_info);
+        }
+
+
+        if (firstVisible != null && lastVisible != null) {
+          event.setFromIndex(firstVisible.getInt("rowIndex"));
+          event.setToIndex(lastVisible.getInt("rowIndex"));
+        }
+      }
+    }
+
     if (accessibilityValue != null
         && accessibilityValue.hasKey("min")
         && accessibilityValue.hasKey("now")

ReactAndroid/src/main/java/com/facebook/react/uimanager/interfaces/BaseViewManagerDelegate.java

@@ -47,6 +47,12 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case ViewProps.ACCESSIBILITY_STATE:
         mViewManager.setViewState(view, (ReadableMap) value);
         break;
+      case ViewProps.ACCESSIBILITY_COLLECTION_INFO:
+        mViewManager.setAccessibilityCollectionInfo(view, (ReadableMap) value);
+        break;
+      case ViewProps.ACCESSIBILITY_COLLECTION_ITEM_INFO:
+        mViewManager.setAccessibilityCollectionItemInfo(view, (ReadableMap) value);
+        break;
       case ViewProps.BACKGROUND_COLOR:
         mViewManager.setBackgroundColor(
             view, value == null ? 0 : ColorPropConverter.getColor(value, view.getContext()));

ReactAndroid/src/main/java/com/facebook/react/uimanager/interfaces/BaseViewManagerInterface.java

@@ -26,6 +26,10 @@ public interface BaseViewManagerInterface<T extends View> {
   void setAccessibilityLiveRegion(T view, @Nullable String liveRegion);
 
   void setAccessibilityRole(T view, @Nullable String accessibilityRole);
+
+  void setAccessibilityCollectionInfo(T view, @Nullable ReadableMap accessibilityCollectionInfo);
+
+  void setAccessibilityCollectionItemInfo(T view, @Nullable ReadableMap accessibilityCollectionItemInfo);
 
   void setViewState(T view, @Nullable ReadableMap accessibilityState);
 

ReactAndroid/src/main/java/com/facebook/react/uimanager/interfaces/ViewProps.java

@@ -145,6 +145,8 @@ public class ViewProps {
   public static final String Z_INDEX = "zIndex";
   public static final String RENDER_TO_HARDWARE_TEXTURE = "renderToHardwareTextureAndroid";
   public static final String ACCESSIBILITY_LABEL = "accessibilityLabel";
+  public static final String ACCESSIBILITY_COLLECTION_INFO = "accessibilityCollectionInfo";
+  public static final String ACCESSIBILITY_COLLECTION_ITEM_INFO = "accessibilityCollectionItemInfo";
   public static final String ACCESSIBILITY_HINT = "accessibilityHint";
   public static final String ACCESSIBILITY_LIVE_REGION = "accessibilityLiveRegion";
   public static final String ACCESSIBILITY_ROLE = "accessibilityRole";

ReactAndroid/src/main/res/views/uimanager/values/ids.xml

@@ -15,7 +15,13 @@
   <!--tag is used to store accessibilityRole tag-->
   <item type="id" name="accessibility_role"/>
 
-  <!--tag is used to store accessibilityState -->
+  <!--tag is used to store accessibilityCollectionInfo -->
+  <item type="id" name="accessibility_collection_info"/>
+
+  <!--tag is used to store accessibilityCollectionItemInfo -->
+  <item type="id" name="accessibility_collection_item_info"/>
+
+ <!--tag is used to store accessibilityState -->
   <item type="id" name="accessibility_state"/>
 
   <!--tag is used to store accessibilityLabel tag-->