From 095f19a681e22bd5f9438758112cc9628499b631 Mon Sep 17 00:00:00 2001
From: Daksh Bhardwaj <daksh@plgworks.com>
Date: Mon, 12 Sep 2022 04:41:13 -0700
Subject: [PATCH] feat: added aria-modal as alias for
 accessibilityViewIsModal(iOS) (#34506)

Summary:
This adds the `aria-modal` prop to the components where it's used as requested on https://github.com/facebook/react-native/issues/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: https://github.com/facebook/react-native/pull/34506

Reviewed By: jacdebug

Differential Revision: D39060396

Pulled By: cipolleschi

fbshipit-source-id: 80da100ff412b17ba29ddc6d811afb4b0207ac9f
---
 Libraries/Components/Pressable/Pressable.js              | 3 +++
 Libraries/Components/Touchable/TouchableBounce.js        | 4 +++-
 Libraries/Components/Touchable/TouchableHighlight.js     | 4 +++-
 .../Components/Touchable/TouchableNativeFeedback.js      | 3 ++-
 Libraries/Components/Touchable/TouchableOpacity.js       | 4 +++-
 .../Components/Touchable/TouchableWithoutFeedback.js     | 2 ++
 Libraries/Components/View/ViewPropTypes.js               | 9 +++++++++
 7 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index 619a95059fe14c..47498ac37f102b 100644
--- a/Libraries/Components/Pressable/Pressable.js
+++ b/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,
diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js
index 1f4544128d3d6e..e66b208b5e23fc 100644
--- a/Libraries/Components/Touchable/TouchableBounce.js
+++ b/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
         }
diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js
index 2c0606e903d48f..7aa8d6be1fb919 100644
--- a/Libraries/Components/Touchable/TouchableHighlight.js
+++ b/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
         }
diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.js b/Libraries/Components/Touchable/TouchableNativeFeedback.js
index 8139d11101529c..5e32ed37cbfb28 100644
--- a/Libraries/Components/Touchable/TouchableNativeFeedback.js
+++ b/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,
diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js
index 24b859eaea897c..d9de2b3c2b6fcc 100644
--- a/Libraries/Components/Touchable/TouchableOpacity.js
+++ b/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
         }
diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
index a18ae5ede248b6..bdffe2b1ee3efc 100755
--- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js
+++ b/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',
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
index 9ce5529a5ea4ad..c9939c3ed398ef 100644
--- a/Libraries/Components/View/ViewPropTypes.js
+++ b/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.