Adding pager, scrollview, viewgroup, webview, drawer roles (#34477)

Summary:
- adds missing roles
- adds custom roles that don't exist in TalkBack (see the [compositor.json][10] and [string.xml][11] files).
- fixes [issues with Drawer][12]
- fixes issues with ScrollView missing roles
- seek control already exist as adjustable d460d09

Relevant #30839 (comment)
fixes #30839

## Changelog

[Android] [Fixed]  - Adding pager, scrollview, viewgroup, webview, drawer roles

Pull Request resolved: #34477

Test Plan:
Android
- Drawer Layout and ScrollView (02/09/22) #34477 (comment)
- sliding drawer, drawer layout, icon menu #34477 (comment)
- Horizontal and Vertical ScrollView #34477 (comment)
- Toast #34477 (comment)
- CheckedTextView #34477 (comment)
- Spinner (dropdownlist) #34477 (comment)
- EditText #34477 (comment)
- WebView #34477 (comment)
- Testing chime_up and chime_down sound feedback in Scrollable #34477 (comment)

iOS #34477 (comment)

[10]: https://github.com/google/talkback/blob/771de7cdbf55b6adb4ca4c64c27a52584f2337cc/compositor/src/main/res/raw/compositor.json#L1082-L1108
[11]: https://github.com/google/talkback/blob/771de7cdbf55b6adb4ca4c64c27a52584f2337cc/compositor/src/main/res/values/strings.xml#L223
[12]: #34477 (comment)

Reviewed By: NickGerleman

Differential Revision: D39894307

Pulled By: blavalla

fbshipit-source-id: 4a8da78bae485ead0523689631d88d1031a07b74

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -21,6 +21,7 @@ import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
 import StatusBar from '../StatusBar/StatusBar';
 import View from '../View/View';
+import type {AccessibilityRole} from '../../Components/View/ViewAccessibility';
 import AndroidDrawerLayoutNativeComponent, {
   Commands,
 } from './AndroidDrawerLayoutNativeComponent';
@@ -36,6 +37,8 @@ type DrawerSlideEvent = $ReadOnly<{|
 |}>;
 
 type Props = $ReadOnly<{|
+  accessibilityRole?: ?AccessibilityRole,
+
   /**
    * Determines whether the keyboard gets dismissed in response to a drag.
    *   - 'none' (the default), drags do not dismiss the keyboard.

Libraries/Components/View/ViewAccessibility.js

@@ -16,6 +16,7 @@ import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 export type AccessibilityRole =
   | 'none'
   | 'button'
+  | 'dropdownlist'
   | 'togglebutton'
   | 'link'
   | 'search'
@@ -44,7 +45,15 @@ export type AccessibilityRole =
   | 'timer'
   | 'list'
   | 'toolbar'
-  | 'grid';
+  | 'grid'
+  | 'pager'
+  | 'scrollview'
+  | 'horizontalscrollview'
+  | 'viewgroup'
+  | 'webview'
+  | 'drawerlayout'
+  | 'slidingdrawer'
+  | 'iconmenu';
 
 // Role types for web
 export type Role =

React/Views/RCTViewManager.m

@@ -28,6 +28,7 @@ @implementation RCTConvert (UIAccessibilityTraits)
     (@{
       @"none" : @(UIAccessibilityTraitNone),
       @"button" : @(UIAccessibilityTraitButton),
+      @"dropdownlist" : @(UIAccessibilityTraitNone),
       @"togglebutton" : @(UIAccessibilityTraitButton),
       @"link" : @(UIAccessibilityTraitLink),
       @"header" : @(UIAccessibilityTraitHeader),
@@ -63,6 +64,15 @@ @implementation RCTConvert (UIAccessibilityTraits)
       @"tablist" : @(UIAccessibilityTraitNone),
       @"timer" : @(UIAccessibilityTraitNone),
       @"toolbar" : @(UIAccessibilityTraitNone),
+      @"grid" : @(UIAccessibilityTraitNone),
+      @"pager" : @(UIAccessibilityTraitNone),
+      @"scrollview" : @(UIAccessibilityTraitNone),
+      @"horizontalscrollview" : @(UIAccessibilityTraitNone),
+      @"viewgroup" : @(UIAccessibilityTraitNone),
+      @"webview" : @(UIAccessibilityTraitNone),
+      @"drawerlayout" : @(UIAccessibilityTraitNone),
+      @"slidingdrawer" : @(UIAccessibilityTraitNone),
+      @"iconmenu" : @(UIAccessibilityTraitNone),
       @"list" : @(UIAccessibilityTraitNone),
       @"grid" : @(UIAccessibilityTraitNone),
     }),

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

@@ -96,6 +96,7 @@ private void scheduleAccessibilityEventSender(View host) {
   public enum AccessibilityRole {
     NONE,
     BUTTON,
+    DROPDOWNLIST,
     TOGGLEBUTTON,
     LINK,
     SEARCH,
@@ -123,20 +124,30 @@ public enum AccessibilityRole {
     TIMER,
     LIST,
     GRID,
+    PAGER,
+    SCROLLVIEW,
+    HORIZONTALSCROLLVIEW,
+    VIEWGROUP,
+    WEBVIEW,
+    DRAWERLAYOUT,
+    SLIDINGDRAWER,
+    ICONMENU,
     TOOLBAR;
 
     public static String getValue(AccessibilityRole role) {
       switch (role) {
         case BUTTON:
           return "android.widget.Button";
+        case DROPDOWNLIST:
+          return "android.widget.Spinner";
         case TOGGLEBUTTON:
           return "android.widget.ToggleButton";
         case SEARCH:
           return "android.widget.EditText";
         case IMAGE:
           return "android.widget.ImageView";
         case IMAGEBUTTON:
-          return "android.widget.ImageButon";
+          return "android.widget.ImageButton";
         case KEYBOARDKEY:
           return "android.inputmethodservice.Keyboard$Key";
         case TEXT:
@@ -155,6 +166,22 @@ public static String getValue(AccessibilityRole role) {
           return "android.widget.AbsListView";
         case GRID:
           return "android.widget.GridView";
+        case SCROLLVIEW:
+          return "android.widget.ScrollView";
+        case HORIZONTALSCROLLVIEW:
+          return "android.widget.HorizontalScrollView";
+        case PAGER:
+          return "androidx.viewpager.widget.ViewPager";
+        case DRAWERLAYOUT:
+          return "androidx.drawerlayout.widget.DrawerLayout";
+        case SLIDINGDRAWER:
+          return "android.widget.SlidingDrawer";
+        case ICONMENU:
+          return "com.android.internal.view.menu.IconMenuView";
+        case VIEWGROUP:
+          return "android.view.ViewGroup";
+        case WEBVIEW:
+          return "android.webkit.WebView";
         case NONE:
         case LINK:
         case SUMMARY:

ReactAndroid/src/main/java/com/facebook/react/views/drawer/BUCK

@@ -29,5 +29,6 @@ rn_android_library(
         react_native_target("java/com/facebook/react/uimanager/annotations:annotations"),
         react_native_target("java/com/facebook/react/views/scroll:scroll"),
         react_native_root_target(":generated_components_java-FBReactNativeComponentSpec"),
+        react_native_target("res:uimanager"),
     ],
 )

ReactAndroid/src/main/java/com/facebook/react/views/drawer/ReactDrawerLayout.java

@@ -10,10 +10,16 @@
 import android.view.Gravity;
 import android.view.MotionEvent;
 import android.view.View;
+import android.view.accessibility.AccessibilityEvent;
+import androidx.core.view.AccessibilityDelegateCompat;
+import androidx.core.view.ViewCompat;
+import androidx.core.view.accessibility.AccessibilityNodeInfoCompat;
 import androidx.drawerlayout.widget.DrawerLayout;
 import com.facebook.common.logging.FLog;
+import com.facebook.react.R;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.common.ReactConstants;
+import com.facebook.react.uimanager.ReactAccessibilityDelegate.AccessibilityRole;
 import com.facebook.react.uimanager.events.NativeGestureUtil;
 
 /**
@@ -29,6 +35,30 @@
 
   public ReactDrawerLayout(ReactContext reactContext) {
     super(reactContext);
+    ViewCompat.setAccessibilityDelegate(
+        this,
+        new AccessibilityDelegateCompat() {
+          @Override
+          public void onInitializeAccessibilityNodeInfo(
+              View host, AccessibilityNodeInfoCompat info) {
+            super.onInitializeAccessibilityNodeInfo(host, info);
+            final AccessibilityRole accessibilityRole =
+                (AccessibilityRole) host.getTag(R.id.accessibility_role);
+            if (accessibilityRole != null) {
+              info.setClassName(AccessibilityRole.getValue(accessibilityRole));
+            }
+          }
+
+          @Override
+          public void onInitializeAccessibilityEvent(View host, AccessibilityEvent event) {
+            super.onInitializeAccessibilityEvent(host, event);
+            final AccessibilityRole accessibilityRole =
+                (AccessibilityRole) host.getTag(R.id.accessibility_role);
+            if (accessibilityRole != null) {
+              event.setClassName(AccessibilityRole.getValue(accessibilityRole));
+            }
+          }
+        });
   }
 
   @Override