diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js index c899748b44fd1c..e26d9b221d4365 100644 --- a/Libraries/Components/Touchable/TouchableBounce.js +++ b/Libraries/Components/Touchable/TouchableBounce.js @@ -160,6 +160,7 @@ const TouchableBounce = ((createReactClass({ style={[{transform: [{scale: this.state.scale}]}, this.props.style]} accessible={this.props.accessible !== false} accessibilityLabel={this.props.accessibilityLabel} + accessibilityHint={this.props.accessibilityHint} accessibilityComponentType={this.props.accessibilityComponentType} accessibilityTraits={this.props.accessibilityTraits} nativeID={this.props.nativeID} diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js index 5a681c099125ac..42360c05767df0 100644 --- a/Libraries/Components/Touchable/TouchableHighlight.js +++ b/Libraries/Components/Touchable/TouchableHighlight.js @@ -348,6 +348,7 @@ const TouchableHighlight = ((createReactClass({ | any, + accessibilityHint?: string, accessibilityTraits?: ?AccessibilityTraitsFlow, children?: ?React.Node, delayLongPress?: ?number, @@ -75,6 +76,7 @@ const TouchableWithoutFeedback = ((createReactClass({ propTypes: { accessible: PropTypes.bool, accessibilityLabel: PropTypes.node, + accessibilityHint: PropTypes.string, accessibilityComponentType: PropTypes.oneOf(AccessibilityComponentTypes), accessibilityTraits: PropTypes.oneOfType([ PropTypes.oneOf(AccessibilityTraits), @@ -238,6 +240,7 @@ const TouchableWithoutFeedback = ((createReactClass({ return (React: any).cloneElement(child, { accessible: this.props.accessible !== false, accessibilityLabel: this.props.accessibilityLabel, + accessibilityHint: this.props.accessibilityHint, accessibilityComponentType: this.props.accessibilityComponentType, accessibilityTraits: this.props.accessibilityTraits, nativeID: this.props.nativeID, diff --git a/Libraries/Components/View/ReactNativeViewAttributes.js b/Libraries/Components/View/ReactNativeViewAttributes.js index 4bbe4081dad9ed..889145dfe6da06 100644 --- a/Libraries/Components/View/ReactNativeViewAttributes.js +++ b/Libraries/Components/View/ReactNativeViewAttributes.js @@ -24,6 +24,7 @@ ReactNativeViewAttributes.UIView = { accessibilityRole: true, accessibilityStates: true, accessibilityTraits: true, + accessibilityHint: true, importantForAccessibility: true, nativeID: true, testID: true, diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js index d353dbe77d2b44..fb8b27a36afc64 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/Libraries/Components/View/ViewPropTypes.js @@ -87,6 +87,7 @@ export type ViewProps = $ReadOnly<{| | string | Array | any, + accessibilityHint?: string, accessibilityActions?: Array, accessibilityComponentType?: AccessibilityComponentType, accessibilityLiveRegion?: 'none' | 'polite' | 'assertive', @@ -128,6 +129,17 @@ module.exports = { */ accessibilityLabel: PropTypes.node, + /** + * An accessibility hint helps users understand what will happen when they perform + * an action on the accessibility element when that result is not obvious from the + * accessibility label. + * + * @platform ios + * + * See http://facebook.github.io/react-native/docs/view.html#accessibilityHint + */ + accessibilityHint: PropTypes.string, + /** * Provides an array of custom actions available for accessibility. * diff --git a/Libraries/Text/Text/RCTTextView.m b/Libraries/Text/Text/RCTTextView.m index 45c09313909d51..36bd156d3b1ade 100644 --- a/Libraries/Text/Text/RCTTextView.m +++ b/Libraries/Text/Text/RCTTextView.m @@ -238,7 +238,7 @@ - (BOOL)canPerformAction:(SEL)action withSender:(id)sender if (_selectable && action == @selector(copy:)) { return YES; } - + return [self.nextResponder canPerformAction:action withSender:sender]; } diff --git a/RNTester/js/AccessibilityIOSExample.js b/RNTester/js/AccessibilityIOSExample.js index 60d9ceeeddcb7c..90056cb5d1d872 100644 --- a/RNTester/js/AccessibilityIOSExample.js +++ b/RNTester/js/AccessibilityIOSExample.js @@ -12,7 +12,7 @@ var React = require('react'); var ReactNative = require('react-native'); -var {AccessibilityInfo, Text, View} = ReactNative; +var {AccessibilityInfo, Text, View, TouchableOpacity} = ReactNative; class AccessibilityIOSExample extends React.Component<{}> { render() { @@ -39,6 +39,31 @@ class AccessibilityIOSExample extends React.Component<{}> { This text component's accessibilityLabel is set explicitly. + + + This view component has both an accessibilityLabel and an + accessibilityHint explicitly set. + + + + This text component has both an accessibilityLabel and an + accessibilityHint explicitly set. + + + + + This button has both an accessibilityLabel and an + accessibilityHint explicitly set. + + + This view's children are hidden from the accessibility tree diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index c0cba461188389..420f47d494fbac 100644 --- a/React/Views/RCTViewManager.m +++ b/React/Views/RCTViewManager.m @@ -111,6 +111,7 @@ - (RCTShadowView *)shadowView RCT_REMAP_VIEW_PROPERTY(accessible, reactAccessibilityElement.isAccessibilityElement, BOOL) RCT_REMAP_VIEW_PROPERTY(accessibilityActions, reactAccessibilityElement.accessibilityActions, NSString) RCT_REMAP_VIEW_PROPERTY(accessibilityLabel, reactAccessibilityElement.accessibilityLabel, NSString) +RCT_REMAP_VIEW_PROPERTY(accessibilityHint, reactAccessibilityElement.accessibilityHint, NSString) RCT_REMAP_VIEW_PROPERTY(accessibilityTraits, reactAccessibilityElement.accessibilityTraits, UIAccessibilityTraits) RCT_REMAP_VIEW_PROPERTY(accessibilityViewIsModal, reactAccessibilityElement.accessibilityViewIsModal, BOOL) RCT_REMAP_VIEW_PROPERTY(accessibilityElementsHidden, reactAccessibilityElement.accessibilityElementsHidden, BOOL)