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 { ? '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 { ? '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 { 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 { ? '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.