From 25a16123a610ae377ced23ef81ed4c03ad7d06d9 Mon Sep 17 00:00:00 2001
From: Anas Khurshid <anaskhraza@gmail.com>
Date: Fri, 9 Jul 2021 18:26:23 -0700
Subject: [PATCH] Added Support for Entrance/exit from collection by Flatlist
 (#31630)

Summary:
Issue https://github.com/facebook/react-native/issues/30964 .When using a screen reader, flatlist does not announce entrance/ exit from the flat list.

## Changelog

[Android] [Changed] - Added support for accessibility role of "list" for flatlist and sectioned list

Pull Request resolved: https://github.com/facebook/react-native/pull/31630

Test Plan: I have added accessibility role prop in flatlist and sectioned list in rntester app, that will announce entrance/ exit from flatlist and sectioned list.

Reviewed By: kacieb

Differential Revision: D29599351

Pulled By: blavalla

fbshipit-source-id: e16ec69a694780d12f15f88a1e6bb5d7d77ac15f
---
 Libraries/Components/View/ViewAccessibility.js                 | 1 +
 Libraries/DeprecatedPropTypes/DeprecatedViewAccessibility.js   | 1 +
 React/Views/RCTViewManager.m                                   | 1 +
 .../facebook/react/uimanager/ReactAccessibilityDelegate.java   | 3 +++
 packages/rn-tester/js/examples/FlatList/FlatListExample.js     | 1 +
 .../js/examples/SectionList/SectionList-scrollable.js          | 1 +
 .../js/examples/SectionList/SectionListBaseExample.js          | 1 +
 7 files changed, 9 insertions(+)

diff --git a/Libraries/Components/View/ViewAccessibility.js b/Libraries/Components/View/ViewAccessibility.js
index ccdc6a6688a083..47c99e27a9ae85 100644
--- a/Libraries/Components/View/ViewAccessibility.js
+++ b/Libraries/Components/View/ViewAccessibility.js
@@ -41,6 +41,7 @@ export type AccessibilityRole =
   | 'tab'
   | 'tablist'
   | 'timer'
+  | 'list'
   | 'toolbar';
 
 // the info associated with an accessibility action
diff --git a/Libraries/DeprecatedPropTypes/DeprecatedViewAccessibility.js b/Libraries/DeprecatedPropTypes/DeprecatedViewAccessibility.js
index ef82aa5c7dedfe..2ba6f3115c98f3 100644
--- a/Libraries/DeprecatedPropTypes/DeprecatedViewAccessibility.js
+++ b/Libraries/DeprecatedPropTypes/DeprecatedViewAccessibility.js
@@ -40,6 +40,7 @@ module.exports = {
     'tab',
     'tablist',
     'timer',
+    'list',
     'toolbar',
   ],
 };
diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m
index a2d5dd683e0ed4..799e60a0793747 100644
--- a/React/Views/RCTViewManager.m
+++ b/React/Views/RCTViewManager.m
@@ -61,6 +61,7 @@ @implementation RCTConvert (UIAccessibilityTraits)
       @"tablist" : @(UIAccessibilityTraitNone),
       @"timer" : @(UIAccessibilityTraitNone),
       @"toolbar" : @(UIAccessibilityTraitNone),
+      @"list" : @(UIAccessibilityTraitNone),
     }),
     UIAccessibilityTraitNone,
     unsignedLongLongValue)
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java
index 78c83a38611ab3..7085883a73081c 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java
@@ -107,6 +107,7 @@ public enum AccessibilityRole {
     TAB,
     TABLIST,
     TIMER,
+    LIST,
     TOOLBAR;
 
     public static String getValue(AccessibilityRole role) {
@@ -135,6 +136,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:
diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExample.js b/packages/rn-tester/js/examples/FlatList/FlatListExample.js
index abe670b608aeb0..d58c61cec4ce8e 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatListExample.js
+++ b/packages/rn-tester/js/examples/FlatList/FlatListExample.js
@@ -196,6 +196,7 @@ class FlatListExample extends React.PureComponent<Props, State> {
             getItemLayout={
               this.state.fixedHeight ? this._getItemLayout : undefined
             }
+            accessibilityRole="list"
             horizontal={this.state.horizontal}
             inverted={this.state.inverted}
             key={
diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js b/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js
index 78c28ae4f027e1..9a3da679c94aab 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js
@@ -275,6 +275,7 @@ export function SectionList_scrollable(Props: {
         ItemSeparatorComponent={info => (
           <CustomSeparatorComponent {...info} text="ITEM SEPARATOR" />
         )}
+        accessibilityRole="list"
         debug={debug}
         inverted={inverted}
         disableVirtualization={!virtualized}
diff --git a/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js b/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js
index 9989483b1d9f70..ce93c31c5bb47d 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js
@@ -95,6 +95,7 @@ const SectionListBaseExample: React.AbstractComponent<
       <SectionList
         ref={ref}
         testID="section_list"
+        accessibilityRole="list"
         sections={DATA}
         keyExtractor={(item, index) => item + index}
         style={styles.list}