Add screenReaderFocusable prop (#50850)

Summary:
Pull Request resolved: #50850

This prop will be used to enable screen reader focusability without allowing keyboard focus. Mostly a quality of life prop for product engineers and maps 1:1 to Android

Changelog: [Android][Added] - Expose Android's screenReaderFocusable prop

Differential Revision: D73382051

Author: jorge-cab

packages/react-native/Libraries/Components/View/ViewAccessibility.d.ts

@@ -101,8 +101,8 @@ export interface AccessibilityProps
 }
 
 export type AccessibilityActionInfo = Readonly<{
-  name: AccessibilityActionName | string;
-  label?: string | undefined;
+  name: AccessibilityActionName | string,
+  label?: string | undefined,
 }>;
 
 export type AccessibilityActionName =
@@ -136,8 +136,8 @@ export type AccessibilityActionName =
 
 export type AccessibilityActionEvent = NativeSyntheticEvent<
   Readonly<{
-    actionName: string;
-  }>
+    actionName: string,
+  }>,
 >;
 
 export interface AccessibilityState {
@@ -273,6 +273,13 @@ export interface AccessibilityPropsAndroid {
     | 'no'
     | 'no-hide-descendants'
     | undefined;
+
+  /**
+   * Enables the view to be screen reader focusable, not keyboard focusable.
+   *
+   * @platform android
+   */
+  screenReaderFocusable?: boolean | undefined;
 }
 
 export interface AccessibilityPropsIOS {

packages/react-native/Libraries/Components/View/ViewAccessibility.js

@@ -258,6 +258,14 @@ export type AccessibilityPropsAndroid = $ReadOnly<{
    * See https://reactnative.dev/docs/view#importantforaccessibility
    */
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
+
+  /**
+   * Enables the view to be screen reader focusable, not keyboard focusable. This has lower priority
+   * than focusable or accessible props.
+   *
+   * @platform android
+   */
+  screenReaderFocusable?: boolean,
 }>;
 
 export type AccessibilityPropsIOS = $ReadOnly<{

packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -205,6 +205,7 @@ const validAttributesForNonEventProps = {
   accessibilityValue: true,
   experimental_accessibilityOrder: true,
   importantForAccessibility: true,
+  screenReaderFocusable: true,
   role: true,
   rotation: true,
   scaleX: true,

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -3642,6 +3642,7 @@ export type AccessibilityPropsAndroid = $ReadOnly<{
   accessibilityLiveRegion?: ?(\\"none\\" | \\"polite\\" | \\"assertive\\"),
   \\"aria-live\\"?: ?(\\"polite\\" | \\"assertive\\" | \\"off\\"),
   importantForAccessibility?: ?(\\"auto\\" | \\"yes\\" | \\"no\\" | \\"no-hide-descendants\\"),
+  screenReaderFocusable?: ?boolean,
 }>;
 export type AccessibilityPropsIOS = $ReadOnly<{
   accessibilityIgnoresInvertColors?: ?boolean,

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -3524,6 +3524,7 @@ public abstract class com/facebook/react/uimanager/BaseViewManager : com/faceboo
 	public fun setRotation (Landroid/view/View;F)V
 	public fun setScaleX (Landroid/view/View;F)V
 	public fun setScaleY (Landroid/view/View;F)V
+	public fun setScreenReaderFocusable (Landroid/view/View;Ljava/lang/Boolean;)V
 	public fun setShadowColor (Landroid/view/View;I)V
 	public fun setShouldBlockNativeResponder (Landroid/view/View;Z)V
 	public fun setStartShouldSetResponder (Landroid/view/View;Z)V
@@ -4896,6 +4897,7 @@ public final class com/facebook/react/uimanager/ViewProps {
 	public static final field ROW_GAP Ljava/lang/String;
 	public static final field SCALE_X Ljava/lang/String;
 	public static final field SCALE_Y Ljava/lang/String;
+	public static final field SCREEN_READER_FOCUSABLE Ljava/lang/String;
 	public static final field SCROLL Ljava/lang/String;
 	public static final field SHADOW_COLOR Ljava/lang/String;
 	public static final field START Ljava/lang/String;

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

@@ -513,6 +513,17 @@ public void setImportantForAccessibility(
     }
   }
 
+  @ReactProp(name = ViewProps.SCREEN_READER_FOCUSABLE)
+  public void setScreenReaderFocusable(@NonNull T view, @Nullable Boolean screenReaderFocusable) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+      if (screenReaderFocusable != null) {
+        view.setScreenReaderFocusable(screenReaderFocusable);
+      } else {
+        view.setScreenReaderFocusable(false);
+      }
+    }
+  }
+
   @ReactProp(name = ViewProps.ROLE)
   public void setRole(@NonNull T view, @Nullable String role) {
     if (role == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt

@@ -159,6 +159,7 @@ public object ViewProps {
   public const val ACCESSIBILITY_LABELLED_BY: String = "accessibilityLabelledBy"
   public const val ACCESSIBILITY_ORDER: String = "experimental_accessibilityOrder"
   public const val IMPORTANT_FOR_ACCESSIBILITY: String = "importantForAccessibility"
+  public const val SCREEN_READER_FOCUSABLE: String = "screenReaderFocusable"
   public const val ROLE: String = "role"
   // DEPRECATED
   public const val ROTATION: String = "rotation"

packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityProps.cpp

@@ -199,6 +199,15 @@ AccessibilityProps::AccessibilityProps(
                     "importantForAccessibility",
                     sourceProps.importantForAccessibility,
                     ImportantForAccessibility::Auto)),
+      screenReaderFocusable(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.screenReaderFocusable
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "screenReaderFocusable",
+                    sourceProps.screenReaderFocusable,
+                    false)),
       testId(
           ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
               ? sourceProps.testId

packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityProps.h

@@ -55,6 +55,7 @@ class AccessibilityProps {
   bool onAccessibilityAction{};
   ImportantForAccessibility importantForAccessibility{
       ImportantForAccessibility::Auto};
+  bool screenReaderFocusable{false};
   Role role{Role::None};
   std::string testId;
 

packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp

@@ -63,7 +63,7 @@ void ViewShadowNode::initialize() noexcept {
       viewProps.mixBlendMode != BlendMode::Normal ||
       viewProps.isolation == Isolation::Isolate ||
       HostPlatformViewTraitsInitializer::formsStackingContext(viewProps) ||
-      !viewProps.accessibilityOrder.empty();
+      !viewProps.accessibilityOrder.empty() || viewProps.screenReaderFocusable;
 
   bool formsView = formsStackingContext ||
       isColorMeaningful(viewProps.backgroundColor) || hasBorder() ||