react-native-tvos 0.76.1-0 → 0.76.1-1

package/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java

@@ -22,16 +22,21 @@ import android.graphics.RectF;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.LayerDrawable;
 import android.os.Build;
+import android.os.Bundle;
 import android.view.FocusFinder;
+import android.view.KeyEvent;
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewParent;
 import android.view.ViewStructure;
+import android.view.accessibility.AccessibilityNodeInfo;
 import android.view.animation.Animation;
 
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
+import androidx.core.view.ViewCompat;
+
 import com.facebook.common.logging.FLog;
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.R;
@@ -53,6 +58,7 @@ import com.facebook.react.uimanager.LengthPercentageType;
 import com.facebook.react.uimanager.MeasureSpecAssertions;
 import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.PointerEvents;
+import com.facebook.react.uimanager.ReactAccessibilityDelegate;
 import com.facebook.react.uimanager.ReactClippingProhibitedView;
 import com.facebook.react.uimanager.ReactClippingViewGroup;
 import com.facebook.react.uimanager.ReactClippingViewGroupHelper;
@@ -61,10 +67,16 @@ import com.facebook.react.uimanager.ReactPointerEventsView;
 import com.facebook.react.uimanager.ReactZIndexedViewGroup;
 import com.facebook.react.uimanager.RootView;
 import com.facebook.react.uimanager.RootViewUtil;
+import com.facebook.react.uimanager.UIManagerHelper;
 import com.facebook.react.uimanager.ViewGroupDrawingOrderHelper;
 import com.facebook.react.uimanager.common.UIManagerType;
 import com.facebook.react.uimanager.common.ViewUtil;
 import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable;
+import com.facebook.react.uimanager.events.BlurEvent;
+import com.facebook.react.uimanager.events.EventDispatcher;
+import com.facebook.react.uimanager.events.FocusEvent;
+import com.facebook.react.uimanager.events.PressInEvent;
+import com.facebook.react.uimanager.events.PressOutEvent;
 import com.facebook.react.uimanager.style.BackgroundImageLayer;
 import com.facebook.react.uimanager.style.BorderRadiusProp;
 import com.facebook.react.uimanager.style.BorderStyle;
@@ -98,8 +110,10 @@ public class ReactViewGroup extends ViewGroup
 
   private @NonNull int[] focusDestinations = new int[0];
   private boolean autoFocus = false;
+  private boolean isFocusGuideTalkbackAccessibilityDelegateSet = false;
   private WeakReference<View> lastFocusedElement;
   private boolean mRecoverFocus = false;
+  private boolean originalIsFocusable = false;
   private boolean trapFocusUp = false;
   private boolean trapFocusDown = false;
   private boolean trapFocusLeft = false;
@@ -213,6 +227,8 @@ public class ReactViewGroup extends ViewGroup
     updateBackgroundDrawable(null);
 
     resetPointerEvents();
+
+    cleanupFocusGuideTalkbackAccessibilityDelegate();
   }
 
   private ViewGroupDrawingOrderHelper getDrawingOrderHelper() {
@@ -559,7 +575,7 @@ public class ReactViewGroup extends ViewGroup
     return super.getChildVisibleRect(child, r, offset);
   }
 
-  boolean moveFocusToFirstFocusable(ReactViewGroup viewGroup) {
+  private View getFirstFocusableView(ReactViewGroup viewGroup) {
     ArrayList<View> focusables = new ArrayList<View>(0);
     /**
      * `addFocusables` is the method used by `FocusFinder` to determine
@@ -578,10 +594,10 @@ public class ReactViewGroup extends ViewGroup
      * The other ones on the list can be non-focusable as well.
      * So, we run a loop till finding the first real focusable element.
      */
-    if (focusables.size() <= 0) return false;
+    if (focusables.size() <= 0) return null;
 
     View firstFocusableElement = null;
-    Integer index = 0;
+    int index = 0;
     while (firstFocusableElement == null && index < focusables.size()) {
       View elem = focusables.get(index);
       if (elem != viewGroup) {
@@ -591,6 +607,12 @@ public class ReactViewGroup extends ViewGroup
       index++;
     }
 
+    return firstFocusableElement;
+  }
+
+  boolean moveFocusToFirstFocusable(ReactViewGroup viewGroup) {
+    View firstFocusableElement = this.getFirstFocusableView(viewGroup);
+
     if (firstFocusableElement != null) return firstFocusableElement.requestFocus();
 
     return false;
@@ -1244,6 +1266,139 @@ public class ReactViewGroup extends ViewGroup
     setAlpha(0);
   }
 
+  public void initializeFocusGuideTalkbackAccessibilityDelegate() {
+    if (!this.isTVFocusGuide()) {
+      return;
+    }
+
+    this.originalIsFocusable = this.isFocusable();
+
+    ReactAccessibilityDelegate viewAccessibilityDelegate = new ReactAccessibilityDelegate(
+      this, originalIsFocusable, this.getImportantForAccessibility()
+    ) {
+      @Override
+      public boolean performAccessibilityAction(View host, int action, Bundle args) {
+        if (!(host instanceof ReactViewGroup self)) {
+          return super.performAccessibilityAction(host, action, args);
+        }
+        if (action == AccessibilityNodeInfo.ACTION_FOCUS) {
+          if (self.interceptAccessibilityEvents(action, args)) {
+            return true;
+          }
+          // Handle case when focus guide cannot find any focusable child
+          if (self.isTVFocusGuide() && self.getFirstFocusableView(self) == null) {
+            if (self.getChildCount() > 0) {
+              View child = self.getChildAt(0);
+              ArrayList<View> childFocusables = new ArrayList<>(0);
+              child.addFocusables(childFocusables, FOCUS_DOWN, 0);
+              if (!childFocusables.isEmpty()) {
+                childFocusables.get(0).performAccessibilityAction(action, args);
+                return true;
+              }
+            }
+          }
+          return super.performAccessibilityAction(host, action, args);
+        }
+        if (action == AccessibilityNodeInfo.ACTION_ACCESSIBILITY_FOCUS) {
+          if (self.interceptAccessibilityEvents(action, args)) {
+            return true;
+          }
+          // Handle case when focus guide cannot find any focusable child
+          if (self.isTVFocusGuide() && self.getFirstFocusableView(self) == null) {
+            if (self.getChildCount() > 0) {
+              View child = self.getChildAt(0);
+              ArrayList<View> childFocusables = new ArrayList<>(0);
+              child.addFocusables(childFocusables, FOCUS_DOWN, 0);
+              if (!childFocusables.isEmpty()) {
+                /*
+                 * Instead of forwarding AccessibilityNodeInfo.ACTION_ACCESSIBILITY_FOCUS,
+                 * let's invoke AccessibilityNodeInfo.ACTION_FOCUS
+                 * to trigger focus events on JS side - the AccessibilityNodeInfo.ACTION_ACCESSIBILITY_FOCUS
+                 * will be automatically invoked later
+                 */
+                childFocusables.get(0).performAccessibilityAction(
+                    AccessibilityNodeInfo.ACTION_FOCUS,
+                    args
+                );
+                return true;
+              }
+            }
+            /*
+             * Let's consume event here, otherwise there might be an issue with
+             * FocusGuide receiving focus instead of one of its child views
+             */
+            return true;
+          }
+          return super.performAccessibilityAction(host, action, args);
+        }
+        return super.performAccessibilityAction(host, action, args);
+      }
+    };
+    ViewCompat.setAccessibilityDelegate(this, viewAccessibilityDelegate);
+    this.setFocusable(true);
+    this.setFocusableInTouchMode(true);
+    // To force Talkback to give the a11y event to the FocusGuide
+    // we need to make it look like it has some a11y label to be announced.
+    // Because FocusGuide should always have at least one focusable child view,
+    // which will receive forwarded a11y event from this FocusGuide,
+    // the following fake label will never be announced
+    this.setContentDescription("FocusGuide");
+    this.isFocusGuideTalkbackAccessibilityDelegateSet = true;
+  }
+
+  public void cleanupFocusGuideTalkbackAccessibilityDelegate() {
+    ViewCompat.setAccessibilityDelegate(this, null);
+    this.setFocusable(this.originalIsFocusable);
+    this.setFocusableInTouchMode(this.originalIsFocusable);
+    this.originalIsFocusable = false;
+    this.setContentDescription(null);
+    this.isFocusGuideTalkbackAccessibilityDelegateSet = false;
+  }
+
+  public boolean hasFocusGuideTalkbackAccessibilityDelegate() {
+    return this.isFocusGuideTalkbackAccessibilityDelegateSet;
+  }
+
+  private boolean interceptAccessibilityEvents(int action, Bundle args) {
+    if (!this.isTVFocusGuide()) {
+      return false;
+    }
+
+    // If it's "FocusGuide", we want to intercept
+    // the event and redirect it to either:
+    // 1) first available destination view from "destinations" prop
+    // 2) last focused element saved when "autoFocus" prop is `true`
+    // 3) first focusable child view
+    View destinationView = this.findDestinationView();
+    if (destinationView != null) {
+      try {
+        destinationView.performAccessibilityAction(action, args);
+        return true;
+      } catch (Exception e) {
+        FLog.e(TAG, "Exception when performing accessibility action on destination view - falling back to next case (last focused view): " + e);
+      }
+    }
+    View lastFocusedView = this.lastFocusedElement.get();
+    if (lastFocusedView != null) {
+      try {
+        lastFocusedView.performAccessibilityAction(action, args);
+        return true;
+      } catch (Exception e) {
+        FLog.e(TAG, "Exception when performing accessibility action on last focused view - falling back to next case (first focusable view): " + e);
+      }
+    }
+    View firstFocusableView = this.getFirstFocusableView(this);
+    if (firstFocusableView != null) {
+      try {
+        firstFocusableView.performAccessibilityAction(action, args);
+        return true;
+      } catch (Exception e) {
+        FLog.e(TAG, "Exception when performing accessibility action on first focusable view - focus guide will not handle focus: " + e);
+      }
+    }
+    return false;
+  }
+
   private View findDestinationView() {
     for (int focusDestination : focusDestinations) {
       View childViewWithTag = findViewById(focusDestination);
@@ -1274,7 +1429,7 @@ public class ReactViewGroup extends ViewGroup
     return focusDestinations.length > 0;
   }
 
-  private boolean isTVFocusGuide() {
+  boolean isTVFocusGuide() {
     /**
      * We don't count a view as `TVFocusGuide` if it has `trapFocus*` props enabled.
      * The reason is, it's a seperate functionality that has nothing to do with other
@@ -1362,6 +1517,59 @@ public class ReactViewGroup extends ViewGroup
   @Override
   protected void onFocusChanged(boolean gainFocus, int direction, @Nullable Rect previouslyFocusedRect) {
     super.onFocusChanged(gainFocus, direction, previouslyFocusedRect);
+
+    final EventDispatcher mEventDispatcher =
+      UIManagerHelper.getEventDispatcherForReactTag(
+        (ReactContext) this.getContext(), this.getId());
+
+    if (mEventDispatcher == null) {
+      return;
+    }
+
+    if (gainFocus) {
+      mEventDispatcher.dispatchEvent(
+        new FocusEvent(
+          UIManagerHelper.getSurfaceId(this.getContext()), this.getId()));
+    } else {
+      mEventDispatcher.dispatchEvent(
+        new BlurEvent(
+          UIManagerHelper.getSurfaceId(this.getContext()), this.getId()));
+    }
+  }
+
+  @Override
+  public boolean onKeyDown(int keyCode, KeyEvent event) {
+    if ((keyCode == KeyEvent.KEYCODE_DPAD_CENTER || keyCode == KeyEvent.KEYCODE_ENTER) && event.getRepeatCount() == 0 && !this.isTVFocusGuide()) {
+      final EventDispatcher mEventDispatcher =
+        UIManagerHelper.getEventDispatcherForReactTag(
+          (ReactContext) this.getContext(), this.getId());
+
+      if (mEventDispatcher == null) {
+        return super.onKeyDown(keyCode, event);
+      }
+
+      mEventDispatcher.dispatchEvent(new PressInEvent(UIManagerHelper.getSurfaceId(this.getContext()), this.getId()));
+    }
+
+
+    return super.onKeyDown(keyCode, event);
+  }
+
+  @Override
+  public boolean onKeyUp(int keyCode, KeyEvent event) {
+    if ((keyCode == KeyEvent.KEYCODE_DPAD_CENTER || keyCode == KeyEvent.KEYCODE_ENTER) && !this.isTVFocusGuide()) {
+      final EventDispatcher mEventDispatcher =
+        UIManagerHelper.getEventDispatcherForReactTag(
+          (ReactContext) this.getContext(), this.getId());
+
+      if (mEventDispatcher == null) {
+        return super.onKeyUp(keyCode, event);
+      }
+
+      mEventDispatcher.dispatchEvent(new PressOutEvent(UIManagerHelper.getSurfaceId(this.getContext()), this.getId()));
+    }
+
+    return super.onKeyUp(keyCode, event);
   }
 
   @Override

package/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java

@@ -7,15 +7,18 @@
 
 package com.facebook.react.views.view;
 
+import android.accessibilityservice.AccessibilityServiceInfo;
 import android.content.Context;
 import android.content.pm.PackageManager;
 import android.graphics.Rect;
-import android.util.Log;
 import android.view.View;
 import androidx.annotation.ColorInt;
 import android.view.ViewGroup;
+import android.view.accessibility.AccessibilityManager;
+
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
+
 import com.facebook.common.logging.FLog;
 import com.facebook.infer.annotation.Nullsafe;
 import com.facebook.react.bridge.Dynamic;
@@ -424,6 +427,13 @@ public class ReactViewManager extends ReactClippingViewManager<ReactViewGroup> {
     return new ReactViewGroup(context);
   }
 
+  @Override
+  protected void onAfterUpdateTransaction(@NonNull ReactViewGroup view) {
+    super.onAfterUpdateTransaction(view);
+
+    manageFocusGuideAccessibilityDelegate(view);
+  }
+
   @Override
   public Map<String, Integer> getCommandsMap() {
     return MapBuilder.of(HOTSPOT_UPDATE_KEY, CMD_HOTSPOT_UPDATE, "setPressed", CMD_SET_PRESSED, "setDestinations", CMD_SET_DESTINATIONS);
@@ -507,6 +517,39 @@ public class ReactViewManager extends ReactClippingViewManager<ReactViewGroup> {
       fd[i] = destinations.getInt(i);
     }
     root.setFocusDestinations(fd);
+    this.manageFocusGuideAccessibilityDelegate(root);
+  }
+
+  private void manageFocusGuideAccessibilityDelegate(ReactViewGroup view) {
+    AccessibilityManager accessibilityManager = ((AccessibilityManager) view.getContext()
+      .getSystemService(Context.ACCESSIBILITY_SERVICE));
+    List<AccessibilityServiceInfo> a11yServiceList = accessibilityManager
+      .getEnabledAccessibilityServiceList(AccessibilityServiceInfo.FEEDBACK_SPOKEN);
+    boolean isTalkbackInstalledAndEnabled = false;
+    for (int i = 0; i < a11yServiceList.size(); i++) {
+      String a11yServiceId = a11yServiceList.get(i).getId();
+      if (a11yServiceId != null && a11yServiceId.contains("talkback")) {
+        isTalkbackInstalledAndEnabled = true;
+      }
+    }
+    boolean isTVFocusable = view.getDescendantFocusability() != ViewGroup.FOCUS_BLOCK_DESCENDANTS;
+    if (!view.hasFocusGuideTalkbackAccessibilityDelegate()) {
+      if (view.isTVFocusGuide() && isTVFocusable && isTalkbackInstalledAndEnabled) {
+        // Custom accessibility delegate is needed only for Talkback,
+        // as it's not handling TV focus guide scenarios as well as e.g. Amazon's VoiceView
+        //
+        // Delegate should only be set if TVFocusGuideView is focusable
+        view.initializeFocusGuideTalkbackAccessibilityDelegate();
+      }
+    } else {
+      if (!view.isTVFocusGuide() || !isTVFocusable || !isTalkbackInstalledAndEnabled) {
+        // If this view had delegate set, but is no longer a "focus guide"
+        // or is no longer focusable
+        // or talkback is no longer enabled
+        // then the delegate should be cleared
+        view.cleanupFocusGuideTalkbackAccessibilityDelegate();
+      }
+    }
   }
   
   /**
@@ -528,17 +571,17 @@ public class ReactViewManager extends ReactClippingViewManager<ReactViewGroup> {
   }
 
   @ReactProp(name = "trapFocusDown")
-    public void trapFocusDown(ReactViewGroup view, boolean enabled) {
+  public void trapFocusDown(ReactViewGroup view, boolean enabled) {
     view.setTrapFocusDown(enabled);
   }
 
   @ReactProp(name = "trapFocusLeft")
-    public void trapFocusLeft(ReactViewGroup view, boolean enabled) {
+  public void trapFocusLeft(ReactViewGroup view, boolean enabled) {
     view.setTrapFocusLeft(enabled);
   }
 
   @ReactProp(name = "trapFocusRight")
-    public void trapFocusRight(ReactViewGroup view, boolean enabled) {
+  public void trapFocusRight(ReactViewGroup view, boolean enabled) {
     view.setTrapFocusRight(enabled);
   }
 

package/ReactCommon/cxxreact/ReactNativeVersion.h

@@ -18,7 +18,7 @@ constexpr struct {
   int32_t Major = 0;
   int32_t Minor = 76;
   int32_t Patch = 1;
-  std::string_view Prerelease = "0";
+  std::string_view Prerelease = "1";
 } ReactNativeVersion;
 
 } // namespace facebook::react

package/ReactCommon/react/renderer/components/view/BaseViewEventEmitter.cpp

@@ -32,6 +32,24 @@ void BaseViewEventEmitter::onAccessibilityEscape() const {
   dispatchEvent("accessibilityEscape");
 }
 
+#pragma mark - Focus
+void BaseViewEventEmitter::onFocus() const {
+  dispatchEvent("focus");
+}
+
+void BaseViewEventEmitter::onBlur() const {
+  dispatchEvent("blur");
+}
+
+#pragma mark - Press
+void BaseViewEventEmitter::onPressIn() const {
+  dispatchEvent("pressIn");
+}
+
+void BaseViewEventEmitter::onPressOut() const {
+  dispatchEvent("pressOut");
+}
+
 #pragma mark - Layout
 
 void BaseViewEventEmitter::onLayout(const LayoutMetrics& layoutMetrics) const {

package/ReactCommon/react/renderer/components/view/BaseViewEventEmitter.h

@@ -28,6 +28,14 @@ class BaseViewEventEmitter : public TouchEventEmitter {
   void onAccessibilityMagicTap() const;
   void onAccessibilityEscape() const;
 
+#pragma mark - Focus
+  void onFocus() const;
+  void onBlur() const;
+  
+#pragma mark - Press
+  void onPressIn() const;
+  void onPressOut() const;
+
 #pragma mark - Layout
 
   void onLayout(const LayoutMetrics& layoutMetrics) const;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-tvos",
-  "version": "0.76.1-0",
+  "version": "0.76.1-1",
   "description": "A framework for building native apps using React",
   "license": "MIT",
   "repository": {
@@ -116,7 +116,7 @@
     "@react-native/gradle-plugin": "0.76.1",
     "@react-native/js-polyfills": "0.76.1",
     "@react-native/normalize-colors": "0.76.1",
-    "@react-native-tvos/virtualized-lists": "0.76.1-0",
+    "@react-native-tvos/virtualized-lists": "0.76.1-1",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",

package/types/public/ReactNativeTVTypes.d.ts

@@ -166,7 +166,7 @@ declare module 'react-native' {
    * https://github.com/react-native-tvos/react-native-tvos/blob/tvos-v0.69.8/packages/rn-tester/js/examples/TVFocusGuide/TVFocusGuideAutoFocusExample.js
    */
   export const TVFocusGuideView: React.ForwardRefExoticComponent<FocusGuideProps & React.RefAttributes<View & FocusGuideMethods>>;
-  export interface TVTextScrollViewProps extends ScrollViewProps {
+  export interface TVTextScrollViewProps extends Omit<ScrollViewProps, 'onFocus' | 'onBlur'> {
     /**
      * The duration of the scroll animation when a swipe is detected.
      * Default value is 0.3 s

package/Libraries/Components/Touchable/TVTouchable.js

@@ -1,71 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- * @format
- */
-
-'use strict';
-
-import type {
-  BlurEvent,
-  FocusEvent,
-  PressEvent,
-} from '../../Types/CoreEventTypes';
-
-import Platform from '../../Utilities/Platform';
-import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
-import {tvFocusEventHandler} from '../TV/TVFocusEventHandler';
-import invariant from 'invariant';
-
-type TVTouchableConfig = $ReadOnly<{|
-  getDisabled: () => boolean,
-  onBlur: (event: BlurEvent) => mixed,
-  onFocus: (event: FocusEvent) => mixed,
-  onPress: (event: PressEvent) => mixed,
-  onLongPress: (event: PressEvent) => mixed,
-|}>;
-
-export default class TVTouchable {
-  _enabled: boolean = false;
-  _focusEventHandler: ?any = null;
-  _viewTag: ?number = null;
-
-  constructor(component: any, config: TVTouchableConfig) {
-    invariant(Platform.isTV, 'TVTouchable: Requires `Platform.isTV`.');
-    if (!Platform.isTV) {
-      return;
-    }
-    const _tvtouchable = this; // eslint-disable-line consistent-this
-    this._viewTag = tagForComponentOrHandle(component);
-    tvFocusEventHandler?.register(this._viewTag, tvData => {
-      if (!_tvtouchable._enabled) {
-        return;
-      }
-      if (tagForComponentOrHandle(component) === tvData.tag) {
-        if (tvData.eventType === 'focus') {
-          config.onFocus(tvData);
-        } else if (tvData.eventType === 'blur') {
-          config.onBlur(tvData);
-        } else if (tvData.eventType === 'select') {
-          if (!config.getDisabled()) {
-            config.onPress(tvData);
-          }
-        } else if (tvData.eventType === 'longSelect') {
-          if (!config.getDisabled()) {
-            config.onLongPress(tvData);
-          }
-        }
-      }
-    });
-    this._enabled = true;
-  }
-
-  destroy(): void {
-    this._enabled = false;
-    tvFocusEventHandler?.unregister(this._viewTag);
-  }
-}