diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js index 89ec384fe2c1b7..318e82773d1678 100644 --- a/Libraries/Components/Button.js +++ b/Libraries/Components/Button.js @@ -145,6 +145,11 @@ type ButtonProps = $ReadOnly<{| accessibilityActions?: ?$ReadOnlyArray, onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, accessibilityState?: ?AccessibilityState, + + /** + * [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. + */ + importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), accessibilityHint?: ?string, accessibilityLanguage?: ?Stringish, |}>; @@ -264,6 +269,7 @@ class Button extends React.Component { render(): React.Node { const { accessibilityLabel, + importantForAccessibility, color, onPress, touchSoundDisabled, @@ -315,6 +321,12 @@ class Button extends React.Component { const Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity; + // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused. + const _importantForAccessibility = + importantForAccessibility === 'no' + ? 'no-hide-descendants' + : importantForAccessibility; + return ( { accessibilityLanguage={accessibilityLanguage} accessibilityRole="button" accessibilityState={accessibilityState} + importantForAccessibility={_importantForAccessibility} hasTVPreferredFocus={hasTVPreferredFocus} nextFocusDown={nextFocusDown} nextFocusForward={nextFocusForward} diff --git a/Libraries/Components/__tests__/Button-test.js b/Libraries/Components/__tests__/Button-test.js index d2f976371aa9d8..3c370b4e36b000 100644 --- a/Libraries/Components/__tests__/Button-test.js +++ b/Libraries/Components/__tests__/Button-test.js @@ -46,4 +46,14 @@ describe('