[change] Touchable pass through props

Add support for web-specific props to improve accessibility, e.g., ARIA
properties (and declarative links).

Fix #65
This commit is contained in:
Nicolas Gallagher
2017-02-27 17:05:35 -08:00
parent 997653863f
commit ecae52ccc5
4 changed files with 54 additions and 26 deletions
@@ -318,7 +318,6 @@ var TouchableDisabled = React.createClass({
<TouchableHighlight
activeOpacity={1}
disabled={true}
animationVelocity={0}
underlayColor="rgb(210, 230, 255)"
style={[styles.row, styles.block]}
onPress={action('TouchableHighlight')}>
@@ -329,7 +328,6 @@ var TouchableDisabled = React.createClass({
<TouchableHighlight
activeOpacity={1}
animationVelocity={0}
underlayColor="rgb(210, 230, 255)"
style={[styles.row, styles.block]}
onPress={action('TouchableHighlight')}>
+20 -7
View File
@@ -231,17 +231,30 @@ var TouchableHighlight = React.createClass({
},
render: function() {
const {
/* eslint-disable */
activeOpacity,
onHideUnderlay,
onShowUnderlay,
underlayColor,
delayLongPress,
delayPressIn,
delayPressOut,
onLongPress,
onPress,
onPressIn,
onPressOut,
pressRetentionOffset,
/* eslint-enable */
...other
} = this.props;
return (
<View
accessible={true}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityRole={this.props.accessibilityRole}
disabled={this.props.disabled}
hitSlop={this.props.hitSlop}
{...other}
onKeyDown={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressIn) }}
onKeyPress={(e) => { this._onKeyEnter(e, this.touchableHandlePress) }}
onKeyUp={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressOut) }}
onLayout={this.props.onLayout}
onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
onResponderGrant={this.touchableHandleResponderGrant}
@@ -255,7 +268,7 @@ var TouchableHighlight = React.createClass({
this.state.underlayStyle
]}
tabIndex={this.props.disabled ? null : '0'}
testID={this.props.testID}>
>
{React.cloneElement(
React.Children.only(this.props.children),
{
+18 -10
View File
@@ -163,20 +163,30 @@ var TouchableOpacity = React.createClass({
},
render: function() {
const {
/* eslint-disable */
activeOpacity,
focusedOpacity,
delayLongPress,
delayPressIn,
delayPressOut,
onLongPress,
onPress,
onPressIn,
onPressOut,
pressRetentionOffset,
/* eslint-enable */
...other
} = this.props;
return (
<View
accessible={this.props.accessible !== false}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityRole={this.props.accessibilityRole}
disabled={this.props.disabled}
{...other}
style={[
styles.root,
this.props.disabled && styles.disabled,
this.props.style
]}
testID={this.props.testID}
onLayout={this.props.onLayout}
hitSlop={this.props.hitSlop}
onKeyDown={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressIn) }}
onKeyPress={(e) => { this._onKeyEnter(e, this.touchableHandlePress) }}
onKeyUp={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressOut) }}
@@ -187,9 +197,7 @@ var TouchableOpacity = React.createClass({
onResponderRelease={this.touchableHandleResponderRelease}
onResponderTerminate={this.touchableHandleResponderTerminate}
tabIndex={this.props.disabled ? null : '0'}
>
{this.props.children}
</View>
/>
);
},
});
@@ -145,6 +145,21 @@ const TouchableWithoutFeedback = React.createClass({
},
render: function(): React.Element<any> {
const {
/* eslint-disable */
delayLongPress,
delayPressIn,
delayPressOut,
onLongPress,
onPress,
onPressIn,
onPressOut,
pressRetentionOffset,
/* eslint-enable */
...other
} = this.props;
// Note(avik): remove dynamic typecast once Flow has been upgraded
const child = React.Children.only(this.props.children);
let children = child.props.children;
@@ -166,13 +181,7 @@ const TouchableWithoutFeedback = React.createClass({
child.props.style
];
return (React: any).cloneElement(child, {
accessible: this.props.accessible !== false,
accessibilityLabel: this.props.accessibilityLabel,
accessibilityRole: this.props.accessibilityRole,
disabled: this.props.disabled,
testID: this.props.testID,
onLayout: this.props.onLayout,
hitSlop: this.props.hitSlop,
...other,
onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest,
onResponderGrant: this.touchableHandleResponderGrant,