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

…cebook#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
OlimpiaZurek · May 22, 2023 · 22b8bf5 · 22b8bf5
1 parent d9fad5b
commit 22b8bf5
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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.