Added Support for Entrance/exit from collection by Flatlist (#31630)

Summary: Issue #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: #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
facebook · Jul 10, 2021 · 25a1612 · 25a1612
1 parent 157d595
commit 25a1612
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 0 deletions.
diff --git 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
@@ -40,6 +40,7 @@ module.exports = {
     'tab',
     'tablist',
     'timer',
+    'list',
     'toolbar',
   ],
 };
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}