diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js index aab4f21d33ed89..992378df706985 100644 --- a/Libraries/Components/Pressable/Pressable.js +++ b/Libraries/Components/Pressable/Pressable.js @@ -52,6 +52,11 @@ type Props = $ReadOnly<{| accessibilityValue?: ?AccessibilityValue, accessibilityViewIsModal?: ?boolean, accessible?: ?boolean, + /** + * A value indicating whether the accessibility elements contained within + * this accessibility element are hidden. + */ + 'aria-hidden'?: ?boolean, focusable?: ?boolean, importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js index f77ab0f5738fcf..62a7820d68d7e2 100644 --- a/Libraries/Components/Touchable/TouchableBounce.js +++ b/Libraries/Components/Touchable/TouchableBounce.js @@ -143,10 +143,16 @@ class TouchableBounce extends React.Component { accessibilityActions={this.props.accessibilityActions} onAccessibilityAction={this.props.onAccessibilityAction} accessibilityValue={this.props.accessibilityValue} - importantForAccessibility={this.props.importantForAccessibility} + importantForAccessibility={ + this.props['aria-hidden'] === true + ? 'no-hide-descendants' + : this.props.importantForAccessibility + } accessibilityLiveRegion={this.props.accessibilityLiveRegion} accessibilityViewIsModal={this.props.accessibilityViewIsModal} - accessibilityElementsHidden={this.props.accessibilityElementsHidden} + accessibilityElementsHidden={ + this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden + } nativeID={this.props.nativeID} testID={this.props.testID} hitSlop={this.props.hitSlop} diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js index d41513b189b55d..9bda74f946a4ea 100644 --- a/Libraries/Components/Touchable/TouchableHighlight.js +++ b/Libraries/Components/Touchable/TouchableHighlight.js @@ -302,10 +302,16 @@ class TouchableHighlight extends React.Component { accessibilityValue={this.props.accessibilityValue} accessibilityActions={this.props.accessibilityActions} onAccessibilityAction={this.props.onAccessibilityAction} - importantForAccessibility={this.props.importantForAccessibility} + importantForAccessibility={ + this.props['aria-hidden'] === true + ? 'no-hide-descendants' + : this.props.importantForAccessibility + } accessibilityLiveRegion={this.props.accessibilityLiveRegion} accessibilityViewIsModal={this.props.accessibilityViewIsModal} - accessibilityElementsHidden={this.props.accessibilityElementsHidden} + accessibilityElementsHidden={ + this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden + } style={StyleSheet.compose( this.props.style, this.state.extraStyles?.underlay, diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.js b/Libraries/Components/Touchable/TouchableNativeFeedback.js index 8fff2f302397f2..3b6de69fb9991f 100644 --- a/Libraries/Components/Touchable/TouchableNativeFeedback.js +++ b/Libraries/Components/Touchable/TouchableNativeFeedback.js @@ -278,10 +278,14 @@ class TouchableNativeFeedback extends React.Component { accessibilityActions: this.props.accessibilityActions, onAccessibilityAction: this.props.onAccessibilityAction, accessibilityValue: this.props.accessibilityValue, - importantForAccessibility: this.props.importantForAccessibility, + importantForAccessibility: + this.props['aria-hidden'] === true + ? 'no-hide-descendants' + : this.props.importantForAccessibility, accessibilityLiveRegion: this.props.accessibilityLiveRegion, accessibilityViewIsModal: this.props.accessibilityViewIsModal, - accessibilityElementsHidden: this.props.accessibilityElementsHidden, + accessibilityElementsHidden: + this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden, hasTVPreferredFocus: this.props.hasTVPreferredFocus, hitSlop: this.props.hitSlop, focusable: diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index 67e18c06d54c83..936caceaf16bf7 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/Libraries/Components/Touchable/TouchableOpacity.js @@ -231,10 +231,16 @@ class TouchableOpacity extends React.Component { accessibilityActions={this.props.accessibilityActions} onAccessibilityAction={this.props.onAccessibilityAction} accessibilityValue={this.props.accessibilityValue} - importantForAccessibility={this.props.importantForAccessibility} + importantForAccessibility={ + this.props['aria-hidden'] === true + ? 'no-hide-descendants' + : this.props.importantForAccessibility + } accessibilityLiveRegion={this.props.accessibilityLiveRegion} accessibilityViewIsModal={this.props.accessibilityViewIsModal} - accessibilityElementsHidden={this.props.accessibilityElementsHidden} + accessibilityElementsHidden={ + this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden + } style={[this.props.style, {opacity: this.state.anim}]} nativeID={this.props.nativeID} testID={this.props.testID} diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 2b3bd4b930e14b..f260f2cc9d7334 100755 --- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -42,6 +42,7 @@ type Props = $ReadOnly<{| accessibilityValue?: ?AccessibilityValue, accessibilityViewIsModal?: ?boolean, accessible?: ?boolean, + 'aria-hidden'?: ?boolean, children?: ?React.Node, delayLongPress?: ?number, delayPressIn?: ?number, @@ -71,7 +72,6 @@ type State = $ReadOnly<{| const PASSTHROUGH_PROPS = [ 'accessibilityActions', - 'accessibilityElementsHidden', 'accessibilityHint', 'accessibilityLanguage', 'accessibilityIgnoresInvertColors', @@ -81,7 +81,6 @@ const PASSTHROUGH_PROPS = [ 'accessibilityValue', 'accessibilityViewIsModal', 'hitSlop', - 'importantForAccessibility', 'nativeID', 'onAccessibilityAction', 'onBlur', @@ -123,6 +122,13 @@ class TouchableWithoutFeedback extends React.Component { : this.props.accessibilityState, focusable: this.props.focusable !== false && this.props.onPress !== undefined, + + accessibilityElementsHidden: + this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden, + importantForAccessibility: + this.props['aria-hidden'] === true + ? 'no-hide-descendants' + : this.props.importantForAccessibility, }; for (const prop of PASSTHROUGH_PROPS) { if (this.props[prop] !== undefined) { diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js index 10a839762d2171..f94e74fa6a5f8c 100644 --- a/Libraries/Components/View/View.js +++ b/Libraries/Components/View/View.js @@ -51,7 +51,7 @@ const View: React.AbstractComponent< ariaHidden ?? accessibilityElementsHidden } importantForAccessibility={ - ariaHidden !== undefined + ariaHidden === true ? 'no-hide-descendants' : importantForAccessibility }