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

Libraries/Components/Pressable/Pressable.js

@@ -51,6 +51,7 @@ type Props = $ReadOnly<{|
   accessibilityState?: ?AccessibilityState,
   accessibilityValue?: ?AccessibilityValue,
   accessibilityViewIsModal?: ?boolean,
+  'aria-modal'?: ?boolean,
   accessible?: ?boolean,
 
   /**
@@ -247,6 +248,10 @@ function Pressable(props: Props, forwardedRef): React.Node {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
+    accessibilityViewIsModal:
+      restProps['aria-modal'] !== null
+        ? restProps['aria-modal']
+        : restProps.accessibilityViewIsModal,
     accessibilityLiveRegion,
     accessibilityState: _accessibilityState,
     focusable: focusable !== false,

Libraries/Components/Touchable/TouchableBounce.js

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

Libraries/Components/Touchable/TouchableHighlight.js

@@ -310,8 +310,12 @@ class TouchableHighlight extends React.Component<Props, State> {
             ? 'no-hide-descendants'
             : this.props.importantForAccessibility
         }
+        accessibilityViewIsModal={
+          this.props['aria-modal'] !== null
+            ? 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

@@ -301,8 +301,11 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
           this.props['aria-hidden'] === true
             ? 'no-hide-descendants'
             : this.props.importantForAccessibility,
+        accessibilityViewIsModal:
+          this.props['aria-modal'] !== null
+            ? 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

@@ -256,8 +256,12 @@ class TouchableOpacity extends React.Component<Props, State> {
             ? 'no-hide-descendants'
             : this.props.importantForAccessibility
         }
+        accessibilityViewIsModal={
+          this.props['aria-modal'] !== null
+            ? 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

@@ -41,6 +41,7 @@ type Props = $ReadOnly<{|
   accessibilityState?: ?AccessibilityState,
   accessibilityValue?: ?AccessibilityValue,
   accessibilityViewIsModal?: ?boolean,
+  'aria-modal'?: ?boolean,
   accessible?: ?boolean,
   /**
    * alias for accessibilityState
@@ -92,6 +93,7 @@ const PASSTHROUGH_PROPS = [
   'accessibilityRole',
   'accessibilityValue',
   '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.