Move iOS/Android specific prop types appropriate types (#40978)

Summary: I wanted to add a new iOS prop, but noticed this, got distracted, fixed it up, and here we are 😅 There are a few Android/iOS specific props that have been added to `ViewProps` instead of `ViewPropsAndroid` or `ViewPropsIOS`. Let's just move around some props to clean that up, in both Flow and TypeScript.Specifically: - Moved `needsOffscreenAlphaCompositing` to shared as it's implemented on both iOS and Android - Moved `accessibilityLiveRegion` / `aria-live` / `accesbilityLabelledBy` / `aria-labelledBy` to Android - While at it, I also updated the comment definition so that `accessibilityLabelledBy` and `aria-labelledBy` because it just maps to the same thing in native code. - Moved `accessibilityLanguage` to iOS only ## Changelog: [GENERAL] [FIXED] - Move iOS/Android specific prop types appropriate types Pull Request resolved: #40978 Test Plan: CI should pass Reviewed By: NickGerleman Differential Revision: D50372564 Pulled By: vincentriemer fbshipit-source-id: ba947c15ffdd4d84d3424b4274afdcbf130adad4
facebook · Oct 23, 2023 · 755a7db · 755a7db
1 parent 85356fd
commit 755a7db
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 69 deletions.
diff --git a/packages/react-native/Libraries/Components/View/ViewAccessibility.d.ts b/packages/react-native/Libraries/Components/View/ViewAccessibility.d.ts
@@ -58,13 +58,6 @@ export interface AccessibilityProps
   'aria-expanded'?: boolean | undefined;
   'aria-selected'?: boolean | undefined;
 
-  /**
-   * Represents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
-   *
-   * @platform android
-   */
-  'aria-labelledby'?: string | undefined;
-
   /**
    * An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.
    */
@@ -99,7 +92,6 @@ export interface AccessibilityProps
    */
   'aria-hidden'?: boolean | undefined;
 
-  'aria-live'?: ('polite' | 'assertive' | 'off') | undefined;
   'aria-modal'?: boolean | undefined;
 
   /**
@@ -227,13 +219,41 @@ export type AccessibilityRole =
 
 export interface AccessibilityPropsAndroid {
   /**
-   * Indicates to accessibility services whether the user should be notified when this view changes.
-   * Works for Android API >= 19 only.
-   * See http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion for references.
+   * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
+   * the text is read aloud. The value should should match the nativeID of the related element.
+   *
+   * @platform android
+   */
+  accessibilityLabelledBy?: string | string[] | undefined;
+
+  /**
+   * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
+   * the text is read aloud. The value should should match the nativeID of the related element.
+   *
    * @platform android
    */
+  'aria-labelledby'?: string | undefined;
+
+  /**
+   * Indicates to accessibility services whether the user should be notified
+   * when this view changes. Works for Android API >= 19 only.
+   *
+   * @platform android
+   *
+   * See https://reactnative.dev/docs/view#accessibilityliveregion
+   */
   accessibilityLiveRegion?: 'none' | 'polite' | 'assertive' | undefined;
 
+  /**
+   * Indicates to accessibility services whether the user should be notified
+   * when this view changes. Works for Android API >= 19 only.
+   *
+   * @platform android
+   *
+   * See https://reactnative.dev/docs/view#accessibilityliveregion
+   */
+  'aria-live'?: ('polite' | 'assertive' | 'off') | undefined;
+
   /**
    * Controls how view is important for accessibility which is if it fires accessibility events
    * and if it is reported to accessibility services that query the screen.
@@ -244,19 +264,15 @@ export interface AccessibilityPropsAndroid {
    *      'yes' - The view is important for accessibility.
    *      'no' - The view is not important for accessibility.
    *      'no-hide-descendants' - The view is not important for accessibility, nor are any of its descendant views.
+   *
+   * @platform android
    */
   importantForAccessibility?:
     | 'auto'
     | 'yes'
     | 'no'
     | 'no-hide-descendants'
     | undefined;
-
-  /**
-   * A reference to another element `nativeID` used to build complex forms. The value of `accessibilityLabelledBy` should match the `nativeID` of the related element.
-   * @platform android
-   */
-  accessibilityLabelledBy?: string | string[] | undefined;
 }
 
 export interface AccessibilityPropsIOS {

diff --git a/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts b/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts
@@ -132,22 +132,6 @@ export interface ViewPropsAndroid {
    */
   collapsable?: boolean | undefined;
 
-  /**
-   * Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors and blending behavior.
-   * The default (false) falls back to drawing the component and its children
-   * with an alpha applied to the paint used to draw each element instead of rendering the full component offscreen and compositing it back with an alpha value.
-   * This default may be noticeable and undesired in the case where the View you are setting an opacity on
-   * has multiple overlapping elements (e.g. multiple overlapping Views, or text and a background).
-   *
-   * Rendering offscreen to preserve correct alpha behavior is extremely expensive
-   * and hard to debug for non-native developers, which is why it is not turned on by default.
-   * If you do need to enable this property for an animation,
-   * consider combining it with renderToHardwareTextureAndroid if the view contents are static (i.e. it doesn't need to be redrawn each frame).
-   * If that property is enabled, this View will be rendered off-screen once,
-   * saved in a hardware texture, and then composited onto the screen with an alpha each frame without having to switch rendering targets on the GPU.
-   */
-  needsOffscreenAlphaCompositing?: boolean | undefined;
-
   /**
    * Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.
    *
@@ -191,6 +175,22 @@ export interface ViewProps
    */
   id?: string | undefined;
 
+  /**
+   * Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors and blending behavior.
+   * The default (false) falls back to drawing the component and its children
+   * with an alpha applied to the paint used to draw each element instead of rendering the full component offscreen and compositing it back with an alpha value.
+   * This default may be noticeable and undesired in the case where the View you are setting an opacity on
+   * has multiple overlapping elements (e.g. multiple overlapping Views, or text and a background).
+   *
+   * Rendering offscreen to preserve correct alpha behavior is extremely expensive
+   * and hard to debug for non-native developers, which is why it is not turned on by default.
+   * If you do need to enable this property for an animation,
+   * consider combining it with renderToHardwareTextureAndroid if the view contents are static (i.e. it doesn't need to be redrawn each frame).
+   * If that property is enabled, this View will be rendered off-screen once,
+   * saved in a hardware texture, and then composited onto the screen with an alpha each frame without having to switch rendering targets on the GPU.
+   */
+  needsOffscreenAlphaCompositing?: boolean | undefined;
+
   /**
    * Invoked on mount and layout changes with
    *

diff --git a/packages/react-native/Libraries/Components/View/ViewPropTypes.js b/packages/react-native/Libraries/Components/View/ViewPropTypes.js
@@ -266,28 +266,21 @@ type AndroidDrawableRipple = $ReadOnly<{|
 type AndroidDrawable = AndroidDrawableThemeAttr | AndroidDrawableRipple;
 
 type AndroidViewProps = $ReadOnly<{|
-  nativeBackgroundAndroid?: ?AndroidDrawable,
-  nativeForegroundAndroid?: ?AndroidDrawable,
-
   /**
-   * Whether this `View` should render itself (and all of its children) into a
-   * single hardware texture on the GPU.
+   * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
+   * the text is read aloud. The value should should match the nativeID of the related element.
    *
    * @platform android
-   *
-   * See https://reactnative.dev/docs/view#rendertohardwaretextureandroid
    */
-  renderToHardwareTextureAndroid?: ?boolean,
+  accessibilityLabelledBy?: ?string | ?Array<string>,
 
   /**
-   * Whether this `View` needs to rendered offscreen and composited with an
-   * alpha in order to preserve 100% correct colors and blending behavior.
+   * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
+   * the text is read aloud. The value should should match the nativeID of the related element.
    *
    * @platform android
-   *
-   * See https://reactnative.dev/docs/view#needsoffscreenalphacompositing
    */
-  needsOffscreenAlphaCompositing?: ?boolean,
+  'aria-labelledby'?: ?string,
 
   /**
    * Indicates to accessibility services whether the user should be notified
@@ -309,6 +302,19 @@ type AndroidViewProps = $ReadOnly<{|
    */
   'aria-live'?: ?('polite' | 'assertive' | 'off'),
 
+  nativeBackgroundAndroid?: ?AndroidDrawable,
+  nativeForegroundAndroid?: ?AndroidDrawable,
+
+  /**
+   * Whether this `View` should render itself (and all of its children) into a
+   * single hardware texture on the GPU.
+   *
+   * @platform android
+   *
+   * See https://reactnative.dev/docs/view#rendertohardwaretextureandroid
+   */
+  renderToHardwareTextureAndroid?: ?boolean,
+
   /**
    * Controls how view is important for accessibility which is if it
    * fires accessibility events and if it is reported to accessibility services
@@ -428,6 +434,15 @@ type IOSViewProps = $ReadOnly<{|
    */
   accessibilityElementsHidden?: ?boolean,
 
+  /**
+   * Indicates to the accessibility services that the UI component is in
+   * a specific language. The provided string should be formatted following
+   * the BCP 47 specification (https://www.rfc-editor.org/info/bcp47).
+   *
+   * @platform ios
+   */
+  accessibilityLanguage?: ?Stringish,
+
   /**
    * Whether this `View` should be rendered as a bitmap before compositing.
    *
@@ -484,15 +499,6 @@ export type ViewProps = $ReadOnly<{|
    */
   'aria-label'?: ?Stringish,
 
-  /**
-   * Indicates to the accessibility services that the UI component is in
-   * a specific language. The provided string should be formatted following
-   * the BCP 47 specification (https://www.rfc-editor.org/info/bcp47).
-   *
-   * @platform ios
-   */
-  accessibilityLanguage?: ?Stringish,
-
   /**
    * Indicates to accessibility services to treat UI component like a specific role.
    */
@@ -524,13 +530,6 @@ export type ViewProps = $ReadOnly<{|
    */
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
 
-  /**
-   * Specifies the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
-   *
-   * @platform android
-   */
-  accessibilityLabelledBy?: ?string | ?Array<string>,
-
   /**
    * alias for accessibilityState
    *
@@ -548,13 +547,6 @@ export type ViewProps = $ReadOnly<{|
    */
   'aria-hidden'?: ?boolean,
 
-  /**
-   * It represents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
-   *
-   * @platform android
-   */
-  'aria-labelledby'?: ?string,
-
   /**
    * Views that are only used to layout their children or otherwise don't draw
    * anything may be automatically removed from the native hierarchy as an
@@ -604,6 +596,14 @@ export type ViewProps = $ReadOnly<{|
    */
   nativeID?: ?string,
 
+  /**
+   * Whether this `View` needs to rendered offscreen and composited with an
+   * alpha in order to preserve 100% correct colors and blending behavior.
+   *
+   * See https://reactnative.dev/docs/view#needsoffscreenalphacompositing
+   */
+  needsOffscreenAlphaCompositing?: ?boolean,
+
   /**
    * This defines how far a touch event can start away from the view.
    * Typical interface guidelines recommend touch targets that are at least