Skip to content
Permalink
Browse files
Add missing accessibility props to Touchables (#27293)
Summary:
The following accessibility properties was added for view but not for Touchables - importantForAccessibility, accessibilityLiveRegion, accessibilityViewIsModal and accessibilityElementsHidden. This PR is to extend the support for all touchables.

## Changelog

[General] [Added] - Add missing accessibility props on Touchables
Pull Request resolved: #27293

Test Plan: Tested in RNTester app.

Differential Revision: D18650884

Pulled By: yungsters

fbshipit-source-id: 2172ac55a8c8803d7d923511f43b2598593ea1d2
  • Loading branch information
xuelgong authored and facebook-github-bot committed Nov 23, 2019
1 parent b7ab922 commit 8c0c860e38f57e18296f689e47dfb4a54088c260
Showing 6 changed files with 75 additions and 2 deletions.
@@ -188,6 +188,10 @@ const TouchableBounceImpl = ((createReactClass({
accessibilityActions={this.props.accessibilityActions}
onAccessibilityAction={this.props.onAccessibilityAction}
accessibilityValue={this.props.accessibilityValue}
importantForAccessibility={this.props.importantForAccessibility}
accessibilityLiveRegion={this.props.accessibilityLiveRegion}
accessibilityViewIsModal={this.props.accessibilityViewIsModal}
accessibilityElementsHidden={this.props.accessibilityElementsHidden}
nativeID={this.props.nativeID}
testID={this.props.testID}
hitSlop={this.props.hitSlop}
@@ -397,6 +397,10 @@ const TouchableHighlightImpl = ((createReactClass({
accessibilityValue={this.props.accessibilityValue}
accessibilityActions={this.props.accessibilityActions}
onAccessibilityAction={this.props.onAccessibilityAction}
importantForAccessibility={this.props.importantForAccessibility}
accessibilityLiveRegion={this.props.accessibilityLiveRegion}
accessibilityViewIsModal={this.props.accessibilityViewIsModal}
accessibilityElementsHidden={this.props.accessibilityElementsHidden}
style={StyleSheet.compose(
this.props.style,
this.state.extraUnderlayStyle,
@@ -360,6 +360,10 @@ const TouchableNativeFeedbackImpl = createReactClass({
accessibilityActions: this.props.accessibilityActions,
onAccessibilityAction: this.props.onAccessibilityAction,
accessibilityValue: this.props.accessibilityValue,
importantForAccessibility: this.props.importantForAccessibility,
accessibilityLiveRegion: this.props.accessibilityLiveRegion,
accessibilityViewIsModal: this.props.accessibilityViewIsModal,
accessibilityElementsHidden: this.props.accessibilityElementsHidden,
children,
testID: this.props.testID,
onLayout: this.props.onLayout,
@@ -310,6 +310,10 @@ const TouchableOpacityImpl = ((createReactClass({
accessibilityActions={this.props.accessibilityActions}
onAccessibilityAction={this.props.onAccessibilityAction}
accessibilityValue={this.props.accessibilityValue}
importantForAccessibility={this.props.importantForAccessibility}
accessibilityLiveRegion={this.props.accessibilityLiveRegion}
accessibilityViewIsModal={this.props.accessibilityViewIsModal}
accessibilityElementsHidden={this.props.accessibilityElementsHidden}
style={[this.props.style, {opacity: this.state.anim}]}
nativeID={this.props.nativeID}
testID={this.props.testID}
@@ -51,6 +51,10 @@ const OVERRIDE_PROPS = [
'accessibilityActions',
'onAccessibilityAction',
'accessibilityValue',
'importantForAccessibility',
'accessibilityLiveRegion',
'accessibilityViewIsModal',
'accessibilityElementsHidden',
'hitSlop',
'nativeID',
'onBlur',
@@ -68,13 +72,17 @@ export type Props = $ReadOnly<{|
accessibilityState?: ?AccessibilityState,
accessibilityValue?: ?AccessibilityValue,
accessible?: ?boolean,
accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
accessibilityViewIsModal?: ?boolean,
accessibilityElementsHidden?: ?boolean,
children?: ?React.Node,
delayLongPress?: ?number,
delayPressIn?: ?number,
delayPressOut?: ?number,
disabled?: ?boolean,
focusable?: ?boolean,
hitSlop?: ?EdgeInsetsProp,
importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
nativeID?: ?string,
onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
onBlur?: ?(event: BlurEvent) => mixed,
@@ -111,6 +119,55 @@ const TouchableWithoutFeedbackImpl = ((createReactClass({
accessibilityActions: PropTypes.array,
onAccessibilityAction: PropTypes.func,
accessibilityValue: PropTypes.object,
/**
* Indicates to accessibility services whether the user should be notified
* when this view changes. Works for Android API >= 19 only.
*
* @platform android
*
* See http://facebook.github.io/react-native/docs/view.html#accessibilityliveregion
*/
accessibilityLiveRegion: (PropTypes.oneOf([
'none',
'polite',
'assertive',
]): React$PropType$Primitive<'none' | 'polite' | 'assertive'>),
/**
* Controls how view is important for accessibility which is if it
* fires accessibility events and if it is reported to accessibility services
* that query the screen. Works for Android only.
*
* @platform android
*
* See http://facebook.github.io/react-native/docs/view.html#importantforaccessibility
*/
importantForAccessibility: (PropTypes.oneOf([
'auto',
'yes',
'no',
'no-hide-descendants',
]): React$PropType$Primitive<
'auto' | 'yes' | 'no' | 'no-hide-descendants',
>),
/**
* A value indicating whether VoiceOver should ignore the elements
* within views that are siblings of the receiver.
* Default is `false`.
*
* @platform ios
*
* See http://facebook.github.io/react-native/docs/view.html#accessibilityviewismodal
*/
accessibilityViewIsModal: PropTypes.bool,
/**
* A value indicating whether the accessibility elements contained within
* this accessibility element are hidden.
*
* @platform ios
*
* See http://facebook.github.io/react-native/docs/view.html#accessibilityElementsHidden
*/
accessibilityElementsHidden: PropTypes.bool,
/**
* When `accessible` is true (which is the default) this may be called when
* the OS-specific concept of "focus" occurs. Some platforms may not have
@@ -68,7 +68,7 @@ class AccessibilityAndroidExample extends React.Component {

<RNTesterBlock title="Overlapping views and importantForAccessibility property">
<View style={styles.container}>
<View
<TouchableWithoutFeedback
style={{
position: 'absolute',
left: 10,
@@ -87,7 +87,7 @@ class AccessibilityAndroidExample extends React.Component {
<View accessible={true}>
<Text style={{fontSize: 25}}>Hello</Text>
</View>
</View>
</TouchableWithoutFeedback>
<View
style={{
position: 'absolute',

0 comments on commit 8c0c860

Please sign in to comment.