Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added accessibility props for touchables #5346

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 7 additions & 1 deletion Examples/UIExplorer/TextInputExample.android.js
Expand Up @@ -208,7 +208,13 @@ exports.examples = [
{
title: 'Auto-focus',
render: function() {
return <TextInput autoFocus={true} style={styles.singleLine} />;
return (
<TextInput
autoFocus={true}
style={styles.singleLine}
accessibilityLabel="I am the accessibility label for text input"
/>
);
}
},
{
Expand Down
8 changes: 7 additions & 1 deletion Examples/UIExplorer/TextInputExample.ios.js
Expand Up @@ -348,7 +348,13 @@ exports.examples = [
{
title: 'Auto-focus',
render: function() {
return <TextInput autoFocus={true} style={styles.default} />;
return (
<TextInput
autoFocus={true}
style={styles.default}
accessibilityLabel="I am the accessibility label for text input"
/>
);
}
},
{
Expand Down
3 changes: 3 additions & 0 deletions Examples/UIExplorer/TouchableExample.js
Expand Up @@ -144,6 +144,9 @@ var TouchableFeedbackEvents = React.createClass({
<TouchableOpacity
style={styles.wrapper}
testID="touchable_feedback_events_button"
accessibilityLabel="touchable feedback events"
accessibilityTraits="button"
accessibilityComponentType="button"
onPress={() => this._appendEvent('press')}
onPressIn={() => this._appendEvent('pressIn')}
onPressOut={() => this._appendEvent('pressOut')}
Expand Down
10 changes: 6 additions & 4 deletions Libraries/Components/TextInput/TextInput.js
Expand Up @@ -286,10 +286,6 @@ var TextInput = React.createClass({
* Styles
*/
style: Text.propTypes.style,
/**
* Used to locate this view in end-to-end tests
*/
testID: PropTypes.string,
/**
* The color of the textInput underline.
* @platform android
Expand Down Expand Up @@ -453,6 +449,9 @@ var TextInput = React.createClass({
<TouchableWithoutFeedback
onPress={this._onPress}
rejectResponderTermination={true}
accessible={props.accessible}
accessibilityLabel={props.accessibilityLabel}
accessibilityTraits={props.accessibilityTraits}
testID={props.testID}>
{textContainer}
</TouchableWithoutFeedback>
Expand Down Expand Up @@ -515,6 +514,9 @@ var TextInput = React.createClass({
return (
<TouchableWithoutFeedback
onPress={this._onPress}
accessible={this.props.accessible}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityComponentType={this.props.accessibilityComponentType}
testID={this.props.testID}>
{textContainer}
</TouchableWithoutFeedback>
Expand Down
3 changes: 3 additions & 0 deletions Libraries/Components/Touchable/TouchableBounce.js
Expand Up @@ -117,6 +117,9 @@ var TouchableBounce = React.createClass({
<Animated.View
style={[{transform: [{scale: this.state.scale}]}, this.props.style]}
accessible={true}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityComponentType={this.props.accessibilityComponentType}
accessibilityTraits={this.props.accessibilityTraits}
testID={this.props.testID}
onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
Expand Down
1 change: 1 addition & 0 deletions Libraries/Components/Touchable/TouchableHighlight.js
Expand Up @@ -215,6 +215,7 @@ var TouchableHighlight = React.createClass({
return (
<View
accessible={true}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityComponentType={this.props.accessibilityComponentType}
accessibilityTraits={this.props.accessibilityTraits}
ref={UNDERLAY_REF}
Expand Down
Expand Up @@ -200,6 +200,7 @@ var TouchableNativeFeedback = React.createClass({
...onlyChild(this.props.children).props,
nativeBackgroundAndroid: this.props.background,
accessible: this.props.accessible !== false,
accessibilityLabel: this.props.accessibilityLabel,
accessibilityComponentType: this.props.accessibilityComponentType,
accessibilityTraits: this.props.accessibilityTraits,
testID: this.props.testID,
Expand Down
1 change: 1 addition & 0 deletions Libraries/Components/Touchable/TouchableOpacity.js
Expand Up @@ -154,6 +154,7 @@ var TouchableOpacity = React.createClass({
return (
<Animated.View
accessible={true}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityComponentType={this.props.accessibilityComponentType}
accessibilityTraits={this.props.accessibilityTraits}
style={[this.props.style, {opacity: this.state.anim}]}
Expand Down
1 change: 1 addition & 0 deletions Libraries/Components/Touchable/TouchableWithoutFeedback.js
Expand Up @@ -135,6 +135,7 @@ var TouchableWithoutFeedback = React.createClass({
// Note(avik): remove dynamic typecast once Flow has been upgraded
return (React: any).cloneElement(onlyChild(this.props.children), {
accessible: this.props.accessible !== false,
accessibilityLabel: this.props.accessibilityLabel,
accessibilityComponentType: this.props.accessibilityComponentType,
accessibilityTraits: this.props.accessibilityTraits,
testID: this.props.testID,
Expand Down