Merge branch 'main' into feat/add-aria-modal-alias-for-accessibility-…

…view-is-modal

BUCK

@@ -251,6 +251,7 @@ REACT_PUBLIC_HEADERS = {
     "React/RCTBorderStyle.h": RCTVIEWS_PATH + "RCTBorderStyle.h",
     "React/RCTBridge+Private.h": RCTBASE_PATH + "RCTBridge+Private.h",
     "React/RCTBridge.h": RCTBASE_PATH + "RCTBridge.h",
+    "React/RCTBridgeConstants.h": RCTBASE_PATH + "RCTBridgeConstants.h",
     "React/RCTBridgeDelegate.h": RCTBASE_PATH + "RCTBridgeDelegate.h",
     "React/RCTBridgeMethod.h": RCTBASE_PATH + "RCTBridgeMethod.h",
     "React/RCTBridgeModule.h": RCTBASE_PATH + "RCTBridgeModule.h",

Libraries/Animated/AnimatedEvent.js

@@ -13,7 +13,7 @@
 const AnimatedValue = require('./nodes/AnimatedValue');
 const AnimatedValueXY = require('./nodes/AnimatedValueXY');
 const NativeAnimatedHelper = require('./NativeAnimatedHelper');
-const ReactNative = require('../Renderer/shims/ReactNative');
+const {findNodeHandle} = require('../ReactNative/RendererProxy');
 
 const invariant = require('invariant');
 
@@ -67,7 +67,7 @@ function attachNativeEvent(
   // Assume that the event containing `nativeEvent` is always the first argument.
   traverse(argMapping[0].nativeEvent, []);
 
-  const viewTag = ReactNative.findNodeHandle(viewRef);
+  const viewTag = findNodeHandle(viewRef);
   if (viewTag != null) {
     eventMappings.forEach(mapping => {
       NativeAnimatedHelper.API.addAnimatedEventToView(

Libraries/Animated/__tests__/AnimatedNative-test.js

@@ -20,8 +20,8 @@ jest
   }))
   .mock('../NativeAnimatedModule')
   .mock('../../EventEmitter/NativeEventEmitter')
-  // findNodeHandle is imported from ReactNative so mock that whole module.
-  .setMock('../../Renderer/shims/ReactNative', {findNodeHandle: () => 1});
+  // findNodeHandle is imported from RendererProxy so mock that whole module.
+  .setMock('../../ReactNative/RendererProxy', {findNodeHandle: () => 1});
 
 import TestRenderer from 'react-test-renderer';
 import * as React from 'react';

Libraries/Animated/nodes/AnimatedProps.js

@@ -12,7 +12,7 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-const ReactNative = require('../../Renderer/shims/ReactNative');
+const {findNodeHandle} = require('../../ReactNative/RendererProxy');
 const {AnimatedEvent} = require('../AnimatedEvent');
 const NativeAnimatedHelper = require('../NativeAnimatedHelper');
 const AnimatedNode = require('./AnimatedNode');
@@ -134,9 +134,7 @@ class AnimatedProps extends AnimatedNode {
 
   __connectAnimatedView(): void {
     invariant(this.__isNative, 'Expected node to be marked as "native"');
-    const nativeViewTag: ?number = ReactNative.findNodeHandle(
-      this._animatedView,
-    );
+    const nativeViewTag: ?number = findNodeHandle(this._animatedView);
     invariant(
       nativeViewTag != null,
       'Unable to locate attached view in the native tree',
@@ -149,9 +147,7 @@ class AnimatedProps extends AnimatedNode {
 
   __disconnectAnimatedView(): void {
     invariant(this.__isNative, 'Expected node to be marked as "native"');
-    const nativeViewTag: ?number = ReactNative.findNodeHandle(
-      this._animatedView,
-    );
+    const nativeViewTag: ?number = findNodeHandle(this._animatedView);
     invariant(
       nativeViewTag != null,
       'Unable to locate attached view in the native tree',

Libraries/Components/AccessibilityInfo/AccessibilityInfo.js

@@ -9,7 +9,7 @@
  */
 
 import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
-import {sendAccessibilityEvent} from '../../Renderer/shims/ReactNative';
+import {sendAccessibilityEvent} from '../../ReactNative/RendererProxy';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import Platform from '../../Utilities/Platform';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';

Libraries/Components/Pressable/Pressable.js

@@ -69,6 +69,7 @@ type Props = $ReadOnly<{|
    * this accessibility element are hidden.
    */
   'aria-hidden'?: ?boolean,
+  'aria-live'?: ?('polite' | 'assertive' | 'off'),
   focusable?: ?boolean,
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
@@ -191,10 +192,11 @@ type Props = $ReadOnly<{|
  * LTI update could not be added via codemod */
 function Pressable(props: Props, forwardedRef): React.Node {
   const {
+    accessible,
     accessibilityState,
+    'aria-live': ariaLive,
     android_disableSound,
     android_ripple,
-    accessible,
     'aria-busy': ariaBusy,
     'aria-checked': ariaChecked,
     'aria-disabled': ariaDisabled,
@@ -239,6 +241,9 @@ function Pressable(props: Props, forwardedRef): React.Node {
   _accessibilityState =
     disabled != null ? {..._accessibilityState, disabled} : _accessibilityState;
 
+  const accessibilityLiveRegion =
+    ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion;
+
   const restPropsWithDefaults: React.ElementConfig<typeof View> = {
     ...restProps,
     ...android_rippleConfig?.viewProps,
@@ -247,6 +252,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
       restProps['aria-modal'] !== null
         ? restProps['aria-modal']
         : restProps.accessibilityViewIsModal,
+    accessibilityLiveRegion,
     accessibilityState: _accessibilityState,
     focusable: focusable !== false,
     hitSlop,

Libraries/Components/ScrollView/ScrollView.js

@@ -12,8 +12,7 @@ import AnimatedImplementation from '../../Animated/AnimatedImplementation';
 import Dimensions from '../../Utilities/Dimensions';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
-import ReactNative from '../../Renderer/shims/ReactNative';
-require('../../Renderer/shims/ReactNative'); // Force side effects to prevent T55744311
+import {findNodeHandle} from '../../ReactNative/RendererProxy';
 import ScrollViewStickyHeader from './ScrollViewStickyHeader';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import View from '../View/View';
@@ -867,11 +866,11 @@ class ScrollView extends React.Component<Props, State> {
   };
 
   getScrollableNode: () => ?number = () => {
-    return ReactNative.findNodeHandle(this._scrollViewRef);
+    return findNodeHandle(this._scrollViewRef);
   };
 
   getInnerViewNode: () => ?number = () => {
-    return ReactNative.findNodeHandle(this._innerViewRef);
+    return findNodeHandle(this._innerViewRef);
   };
 
   getInnerViewRef: () => ?React.ElementRef<typeof View> = () => {
@@ -996,7 +995,7 @@ class ScrollView extends React.Component<Props, State> {
     if (typeof nodeHandle === 'number') {
       UIManager.measureLayout(
         nodeHandle,
-        ReactNative.findNodeHandle(this),
+        findNodeHandle(this),
         // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         this._textInputFocusError,
         this._inputMeasureAndScrollToKeyboard,

Libraries/Components/TextInput/TextInput.js

@@ -229,6 +229,36 @@ export type enterKeyHintType =
 type PasswordRules = string;
 
 type IOSProps = $ReadOnly<{|
+  /**
+   * Give the keyboard and the system information about the
+   * expected semantic meaning for the content that users enter.
+   * @platform ios
+   */
+  autoComplete?: ?(
+    | 'address-line1'
+    | 'address-line2'
+    | 'cc-number'
+    | 'current-password'
+    | 'country'
+    | 'email'
+    | 'name'
+    | 'additional-name'
+    | 'family-name'
+    | 'given-name'
+    | 'nickname'
+    | 'honorific-prefix'
+    | 'honorific-suffix'
+    | 'new-password'
+    | 'off'
+    | 'one-time-code'
+    | 'organization'
+    | 'organization-title'
+    | 'postal-code'
+    | 'street-address'
+    | 'tel'
+    | 'url'
+    | 'username'
+  ),
   /**
    * When the clear button should appear on the right side of the text view.
    * This property is supported only for single-line TextInput component.
@@ -411,6 +441,23 @@ type AndroidProps = $ReadOnly<{|
     | 'username'
     | 'username-new'
     | 'off'
+    // additional HTML autocomplete values
+    | 'address-line1'
+    | 'address-line2'
+    | 'bday'
+    | 'bday-day'
+    | 'bday-month'
+    | 'bday-year'
+    | 'country'
+    | 'current-password'
+    | 'honorific-prefix'
+    | 'honorific-suffix'
+    | 'additional-name'
+    | 'family-name'
+    | 'given-name'
+    | 'new-password'
+    | 'one-time-code'
+    | 'sex'
   ),
 
   /**
@@ -1470,6 +1517,67 @@ const inputModeToKeyboardTypeMap = {
   url: 'url',
 };
 
+// Map HTML autocomplete values to Android autoComplete values
+const autoCompleteWebToAutoCompleteAndroidMap = {
+  'address-line1': 'postal-address-region',
+  'address-line2': 'postal-address-locality',
+  bday: 'birthdate-full',
+  'bday-day': 'birthdate-day',
+  'bday-month': 'birthdate-month',
+  'bday-year': 'birthdate-year',
+  'cc-csc': 'cc-csc',
+  'cc-exp': 'cc-exp',
+  'cc-exp-month': 'cc-exp-month',
+  'cc-exp-year': 'cc-exp-year',
+  'cc-number': 'cc-number',
+  country: 'postal-address-country',
+  'current-password': 'password',
+  email: 'email',
+  'honorific-prefix': 'name-prefix',
+  'honorific-suffix': 'name-suffix',
+  name: 'name',
+  'additional-name': 'name-middle',
+  'family-name': 'name-family',
+  'given-name': 'name-given',
+  'new-password': 'password-new',
+  off: 'off',
+  'one-time-code': 'sms-otp',
+  'postal-code': 'postal-code',
+  sex: 'gender',
+  'street-address': 'street-address',
+  tel: 'tel',
+  'tel-country-code': 'tel-country-code',
+  'tel-national': 'tel-national',
+  username: 'username',
+};
+
+// Map HTML autocomplete values to iOS textContentType values
+const autoCompleteWebToTextContentTypeMap = {
+  'address-line1': 'streetAddressLine1',
+  'address-line2': 'streetAddressLine2',
+  'cc-number': 'creditCardNumber',
+  'current-password': 'password',
+  country: 'countryName',
+  email: 'emailAddress',
+  name: 'name',
+  'additional-name': 'middleName',
+  'family-name': 'familyName',
+  'given-name': 'givenName',
+  nickname: 'nickname',
+  'honorific-prefix': 'namePrefix',
+  'honorific-suffix': 'nameSuffix',
+  'new-password': 'newPassword',
+  off: 'none',
+  'one-time-code': 'oneTimeCode',
+  organization: 'organizationName',
+  'organization-title': 'jobTitle',
+  'postal-code': 'postalCode',
+  'street-address': 'fullStreetAddress',
+  tel: 'telephoneNumber',
+  url: 'URL',
+  username: 'username',
+};
+
 const ExportedForwardRef: React.AbstractComponent<
   React.ElementConfig<typeof InternalTextInput>,
   React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
@@ -1478,6 +1586,8 @@ const ExportedForwardRef: React.AbstractComponent<
     allowFontScaling = true,
     rejectResponderTermination = true,
     underlineColorAndroid = 'transparent',
+    autoComplete,
+    textContentType,
     readOnly,
     editable,
     enterKeyHint,
@@ -1502,6 +1612,21 @@ const ExportedForwardRef: React.AbstractComponent<
       keyboardType={
         inputMode ? inputModeToKeyboardTypeMap[inputMode] : keyboardType
       }
+      autoComplete={
+        Platform.OS === 'android'
+          ? // $FlowFixMe
+            autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
+            autoComplete
+          : undefined
+      }
+      textContentType={
+        Platform.OS === 'ios' &&
+        autoComplete &&
+        autoComplete in autoCompleteWebToTextContentTypeMap
+          ? // $FlowFixMe
+            autoCompleteWebToTextContentTypeMap[autoComplete]
+          : textContentType
+      }
       {...restProps}
       forwardedRef={forwardedRef}
     />

Libraries/Components/TextInput/TextInputState.js

@@ -14,7 +14,7 @@
 
 const React = require('react');
 const Platform = require('../../Utilities/Platform');
-const {findNodeHandle} = require('../../Renderer/shims/ReactNative');
+const {findNodeHandle} = require('../../ReactNative/RendererProxy');
 import {Commands as AndroidTextInputCommands} from '../../Components/TextInput/AndroidTextInputNativeComponent';
 import {Commands as iOSTextInputCommands} from '../../Components/TextInput/RCTSingelineTextInputNativeComponent';
 

Libraries/Components/TextInput/__tests__/TextInput-test.js

@@ -12,7 +12,7 @@
 const React = require('react');
 const ReactTestRenderer = require('react-test-renderer');
 const TextInput = require('../TextInput');
-const ReactNative = require('../../../Renderer/shims/ReactNative');
+const ReactNative = require('../../../ReactNative/RendererProxy');
 
 const {
   enter,

Libraries/Components/Touchable/TouchableBounce.js

@@ -130,7 +130,10 @@ class TouchableBounce extends React.Component<Props, State> {
     // adopting `Pressability`, so preserve that behavior.
     const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
       this.state.pressability.getEventHandlers();
-
+    const accessibilityLiveRegion =
+      this.props['aria-live'] === 'off'
+        ? 'none'
+        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
     const _accessibilityState = {
       busy: this.props['aria-busy'] ?? this.props.accessibilityState?.busy,
       checked:
@@ -155,12 +158,12 @@ class TouchableBounce extends React.Component<Props, State> {
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
         accessibilityValue={this.props.accessibilityValue}
+        accessibilityLiveRegion={accessibilityLiveRegion}
         importantForAccessibility={
           this.props['aria-hidden'] === true
             ? 'no-hide-descendants'
             : this.props.importantForAccessibility
         }
-        accessibilityLiveRegion={this.props.accessibilityLiveRegion}
         accessibilityViewIsModal={
           this.props['aria-modal'] !== null
             ? this.props['aria-modal']

Libraries/Components/Touchable/TouchableHighlight.js

@@ -290,7 +290,10 @@ class TouchableHighlight extends React.Component<Props, State> {
             disabled: this.props.disabled,
           }
         : this.props.accessibilityState;
-
+    const accessibilityLiveRegion =
+      this.props['aria-live'] === 'off'
+        ? 'none'
+        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
     return (
       <View
         accessible={this.props.accessible !== false}
@@ -307,12 +310,12 @@ class TouchableHighlight extends React.Component<Props, State> {
             ? 'no-hide-descendants'
             : this.props.importantForAccessibility
         }
-        accessibilityLiveRegion={this.props.accessibilityLiveRegion}
         accessibilityViewIsModal={
           this.props['aria-modal'] !== null
             ? this.props['aria-modal']
             : this.props.accessibilityViewIsModal
         }
+        accessibilityLiveRegion={accessibilityLiveRegion}
         accessibilityElementsHidden={
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
         }