feat: added aria-modal as alias for accessibilityViewIsModal(iOS) (facebook#34506)

Summary:
This adds the `aria-modal` prop to the components where it's used as requested on facebook#34424, mapping web [aria-modal](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal) to equivalent [accessibilityViewIsModal](iOS)

## Changelog
[General] [Added] - Add aria-modal  prop to basic component

## TestPlan
Checked manually we are receiving the values by props.

Pull Request resolved: facebook#34506

Reviewed By: jacdebug

Differential Revision: D39060396

Pulled By: cipolleschi

fbshipit-source-id: 80da100ff412b17ba29ddc6d811afb4b0207ac9f

Author: Daksh Bhardwaj

Libraries/Components/Pressable/Pressable.js

@@ -55,6 +55,7 @@ type Props = $ReadOnly<{|
   'aria-valuenow'?: AccessibilityValue['now'],
   'aria-valuetext'?: AccessibilityValue['text'],
   accessibilityViewIsModal?: ?boolean,
+  'aria-modal'?: ?boolean,
   accessible?: ?boolean,
 
   /**
@@ -265,6 +266,8 @@ function Pressable(props: Props, forwardedRef): React.Node {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
+    accessibilityViewIsModal:
+      restProps['aria-modal'] ?? restProps.accessibilityViewIsModal,
     accessibilityLiveRegion,
     accessibilityLabel,
     accessibilityState: _accessibilityState,

Libraries/Components/Touchable/TouchableBounce.js

@@ -173,7 +173,9 @@ class TouchableBounce extends React.Component<Props, State> {
             ? 'no-hide-descendants'
             : this.props.importantForAccessibility
         }
-        accessibilityViewIsModal={this.props.accessibilityViewIsModal}
+        accessibilityViewIsModal={
+          this.props['aria-modal'] ?? this.props.accessibilityViewIsModal
+        }
         accessibilityElementsHidden={
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
         }

Libraries/Components/Touchable/TouchableHighlight.js

@@ -321,8 +321,10 @@ class TouchableHighlight extends React.Component<Props, State> {
             ? 'no-hide-descendants'
             : this.props.importantForAccessibility
         }
+        accessibilityViewIsModal={
+          this.props['aria-modal'] ?? this.props.accessibilityViewIsModal
+        }
         accessibilityLiveRegion={accessibilityLiveRegion}
-        accessibilityViewIsModal={this.props.accessibilityViewIsModal}
         accessibilityElementsHidden={
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
         }

Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -310,8 +310,9 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
           this.props['aria-hidden'] === true
             ? 'no-hide-descendants'
             : this.props.importantForAccessibility,
+        accessibilityViewIsModal:
+          this.props['aria-modal'] ?? this.props.accessibilityViewIsModal,
         accessibilityLiveRegion: accessibilityLiveRegion,
-        accessibilityViewIsModal: this.props.accessibilityViewIsModal,
         accessibilityElementsHidden:
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden,
         hasTVPreferredFocus: this.props.hasTVPreferredFocus,

Libraries/Components/Touchable/TouchableOpacity.js

@@ -265,8 +265,10 @@ class TouchableOpacity extends React.Component<Props, State> {
             ? 'no-hide-descendants'
             : this.props.importantForAccessibility
         }
+        accessibilityViewIsModal={
+          this.props['aria-modal'] ?? this.props.accessibilityViewIsModal
+        }
         accessibilityLiveRegion={accessibilityLiveRegion}
-        accessibilityViewIsModal={this.props.accessibilityViewIsModal}
         accessibilityElementsHidden={
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
         }

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -45,6 +45,7 @@ type Props = $ReadOnly<{|
   'aria-valuenow'?: AccessibilityValue['now'],
   'aria-valuetext'?: AccessibilityValue['text'],
   accessibilityViewIsModal?: ?boolean,
+  'aria-modal'?: ?boolean,
   accessible?: ?boolean,
   /**
    * alias for accessibilityState
@@ -102,6 +103,7 @@ const PASSTHROUGH_PROPS = [
   'aria-valuenow',
   'aria-valuetext',
   'accessibilityViewIsModal',
+  'aria-modal',
   'hitSlop',
   'importantForAccessibility',
   'nativeID',

Libraries/Components/View/ViewPropTypes.js

@@ -403,6 +403,15 @@ type IOSViewProps = $ReadOnly<{|
    */
   accessibilityViewIsModal?: ?boolean,
 
+  /**
+   * The aria-modal attribute indicates content contained within a modal with aria-modal="true"
+   * should be accessible to the user.
+   * Default is `false`.
+   *
+   *  @platform ios
+   */
+  'aria-modal'?: ?boolean,
+
   /**
    * A value indicating whether the accessibility elements contained within
    * this accessibility element are hidden.