From f733da55c212f61ca31b9664d95536600bf73b91 Mon Sep 17 00:00:00 2001 From: Sam Mathias Weggersen Date: Tue, 2 Apr 2019 11:34:10 +0200 Subject: [PATCH 1/6] Added OnClick capabilities to touchable components for accessibility --- .../Components/Touchable/TouchableBounce.js | 2 ++ .../Touchable/TouchableHighlight.js | 2 ++ .../TouchableNativeFeedback.android.js | 2 ++ .../Components/Touchable/TouchableOpacity.js | 2 ++ .../Touchable/TouchableWithoutFeedback.js | 2 ++ Libraries/Components/View/ViewPropTypes.js | 1 + .../react/uimanager/BaseViewManager.java | 6 ++++ .../uimanager/UIManagerModuleConstants.java | 1 + .../react/views/view/ReactViewManager.java | 26 +++++++++++++++ .../react/views/view/ViewGroupClickEvent.java | 32 +++++++++++++++++++ 10 files changed, 76 insertions(+) create mode 100644 ReactAndroid/src/main/java/com/facebook/react/views/view/ViewGroupClickEvent.java diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js index 04817aef02bacf..f71f79df76d51e 100644 --- a/Libraries/Components/Touchable/TouchableBounce.js +++ b/Libraries/Components/Touchable/TouchableBounce.js @@ -184,6 +184,8 @@ const TouchableBounce = ((createReactClass({ nativeID={this.props.nativeID} testID={this.props.testID} hitSlop={this.props.hitSlop} + clickable={this.props.clickable !== false && this.props.onPress !== undefined && !this.props.disabled} + onClick={this.touchableHandlePress} onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder} onResponderTerminationRequest={ this.touchableHandleResponderTerminationRequest diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js index fa0e083fa8a985..33bdcc166fde40 100644 --- a/Libraries/Components/Touchable/TouchableHighlight.js +++ b/Libraries/Components/Touchable/TouchableHighlight.js @@ -422,6 +422,8 @@ const TouchableHighlight = ((createReactClass({ nextFocusLeft={this.props.nextFocusLeft} nextFocusRight={this.props.nextFocusRight} nextFocusUp={this.props.nextFocusUp} + clickable={this.props.clickable !== false && this.props.onPress !== undefined} + onClick={this.touchableHandlePress} onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder} onResponderTerminationRequest={ this.touchableHandleResponderTerminationRequest diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js index 77b6e84ea7c60f..2bc08e7760ea4f 100644 --- a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js +++ b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js @@ -325,6 +325,8 @@ const TouchableNativeFeedback = createReactClass({ nextFocusRight: this.props.nextFocusRight, nextFocusUp: this.props.nextFocusUp, hasTVPreferredFocus: this.props.hasTVPreferredFocus, + clickable: this.props.clickable !== false && this.props.onPress !== undefined && !this.props.disabled, + onClick: this.touchableHandlePress, onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder, onResponderTerminationRequest: this .touchableHandleResponderTerminationRequest, diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index 98a2c5d0afd099..18f41b08620d87 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/Libraries/Components/Touchable/TouchableOpacity.js @@ -324,6 +324,8 @@ const TouchableOpacity = ((createReactClass({ hasTVPreferredFocus={this.props.hasTVPreferredFocus} tvParallaxProperties={this.props.tvParallaxProperties} hitSlop={this.props.hitSlop} + clickable={this.props.clickable !== false && this.props.onPress !== undefined} + onClick={this.touchableHandlePress} onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder} onResponderTerminationRequest={ this.touchableHandleResponderTerminationRequest diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js index a78de287e41e77..47c58b43763247 100755 --- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -267,6 +267,8 @@ const TouchableWithoutFeedback = ((createReactClass({ return (React: any).cloneElement(child, { ...overrides, accessible: this.props.accessible !== false, + clickable: this.props.clickable !== false && this.props.onPress !== undefined, + onClick: this.touchableHandlePress, onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder, onResponderTerminationRequest: this .touchableHandleResponderTerminationRequest, diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js index ed23042dacd71c..9c1462d2eeda07 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/Libraries/Components/View/ViewPropTypes.js @@ -18,6 +18,7 @@ import type {TVViewProps} from 'TVViewPropTypes'; import type { AccessibilityComponentType, AccessibilityTrait, + AccessibilityNodeInfoProp, AccessibilityRole, AccessibilityStates, } from 'ViewAccessibility'; diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java index 3e6354f041080e..ba5761a40f47cd 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java @@ -31,6 +31,7 @@ public abstract class BaseViewManager { + private static final String EVENT_NAME = "topClick"; + + public ViewGroupClickEvent(int viewId) { + super(viewId); + } + + @Override + public String getEventName() { + return EVENT_NAME; + } + + @Override + public boolean canCoalesce() { + return false; + } + + @Override + public void dispatch(RCTEventEmitter rctEventEmitter) { + rctEventEmitter.receiveEvent(getViewTag(), getEventName(), Arguments.createMap()); + } +} From 0c525c5553f76a9a207823e7bbabe7382a6e09d3 Mon Sep 17 00:00:00 2001 From: Sam Mathias Weggersen Date: Wed, 3 Apr 2019 14:15:58 +0200 Subject: [PATCH 2/6] npm run lint and npm run prettier --- Libraries/Components/Touchable/TouchableBounce.js | 6 +++++- Libraries/Components/Touchable/TouchableHighlight.js | 4 +++- .../Components/Touchable/TouchableNativeFeedback.android.js | 5 ++++- Libraries/Components/Touchable/TouchableOpacity.js | 4 +++- Libraries/Components/Touchable/TouchableWithoutFeedback.js | 3 ++- 5 files changed, 17 insertions(+), 5 deletions(-) diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js index f71f79df76d51e..5dd3a46afc8a74 100644 --- a/Libraries/Components/Touchable/TouchableBounce.js +++ b/Libraries/Components/Touchable/TouchableBounce.js @@ -184,7 +184,11 @@ const TouchableBounce = ((createReactClass({ nativeID={this.props.nativeID} testID={this.props.testID} hitSlop={this.props.hitSlop} - clickable={this.props.clickable !== false && this.props.onPress !== undefined && !this.props.disabled} + clickable={ + this.props.clickable !== false && + this.props.onPress !== undefined && + !this.props.disabled + } onClick={this.touchableHandlePress} onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder} onResponderTerminationRequest={ diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js index 33bdcc166fde40..1b5afa6ef70b87 100644 --- a/Libraries/Components/Touchable/TouchableHighlight.js +++ b/Libraries/Components/Touchable/TouchableHighlight.js @@ -422,7 +422,9 @@ const TouchableHighlight = ((createReactClass({ nextFocusLeft={this.props.nextFocusLeft} nextFocusRight={this.props.nextFocusRight} nextFocusUp={this.props.nextFocusUp} - clickable={this.props.clickable !== false && this.props.onPress !== undefined} + clickable={ + this.props.clickable !== false && this.props.onPress !== undefined + } onClick={this.touchableHandlePress} onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder} onResponderTerminationRequest={ diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js index 2bc08e7760ea4f..f23223a4ac2ec9 100644 --- a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js +++ b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js @@ -325,7 +325,10 @@ const TouchableNativeFeedback = createReactClass({ nextFocusRight: this.props.nextFocusRight, nextFocusUp: this.props.nextFocusUp, hasTVPreferredFocus: this.props.hasTVPreferredFocus, - clickable: this.props.clickable !== false && this.props.onPress !== undefined && !this.props.disabled, + clickable: + this.props.clickable !== false && + this.props.onPress !== undefined && + !this.props.disabled, onClick: this.touchableHandlePress, onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder, onResponderTerminationRequest: this diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index 18f41b08620d87..b26b34b999deb8 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/Libraries/Components/Touchable/TouchableOpacity.js @@ -324,7 +324,9 @@ const TouchableOpacity = ((createReactClass({ hasTVPreferredFocus={this.props.hasTVPreferredFocus} tvParallaxProperties={this.props.tvParallaxProperties} hitSlop={this.props.hitSlop} - clickable={this.props.clickable !== false && this.props.onPress !== undefined} + clickable={ + this.props.clickable !== false && this.props.onPress !== undefined + } onClick={this.touchableHandlePress} onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder} onResponderTerminationRequest={ diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 47c58b43763247..a19311e66f580d 100755 --- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -267,7 +267,8 @@ const TouchableWithoutFeedback = ((createReactClass({ return (React: any).cloneElement(child, { ...overrides, accessible: this.props.accessible !== false, - clickable: this.props.clickable !== false && this.props.onPress !== undefined, + clickable: + this.props.clickable !== false && this.props.onPress !== undefined, onClick: this.touchableHandlePress, onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder, onResponderTerminationRequest: this From 778b9fc3486bafa0da35f9012f934840aaf7b3ca Mon Sep 17 00:00:00 2001 From: Sam Mathias Weggersen Date: Thu, 11 Apr 2019 13:40:18 +0200 Subject: [PATCH 3/6] Remove accessibility prop changes --- Libraries/Components/View/ViewPropTypes.js | 1 - .../com/facebook/react/uimanager/BaseViewManager.java | 9 +-------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js index 9c1462d2eeda07..ed23042dacd71c 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/Libraries/Components/View/ViewPropTypes.js @@ -18,7 +18,6 @@ import type {TVViewProps} from 'TVViewPropTypes'; import type { AccessibilityComponentType, AccessibilityTrait, - AccessibilityNodeInfoProp, AccessibilityRole, AccessibilityStates, } from 'ViewAccessibility'; diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java index ba5761a40f47cd..43c504a4174a48 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java @@ -6,10 +6,9 @@ package com.facebook.react.uimanager; import android.graphics.Color; -import android.os.Build; -import androidx.core.view.ViewCompat; import android.view.View; import android.view.ViewParent; +import androidx.core.view.ViewCompat; import com.facebook.react.R; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.uimanager.AccessibilityDelegateUtil.AccessibilityRole; @@ -31,7 +30,6 @@ public abstract class BaseViewManager Date: Fri, 12 Apr 2019 13:57:52 +0200 Subject: [PATCH 4/6] Remove setFocusable(false) when clickable=false --- .../java/com/facebook/react/views/view/ReactViewManager.java | 1 - 1 file changed, 1 deletion(-) diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java index 76dfe30ab52aae..69dce016617fde 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java @@ -245,7 +245,6 @@ public void onClick(View v) { else { view.setOnClickListener(null); view.setClickable(false); - view.setFocusable(false); } } From 1897ee8c9bfaaadb6a34c09e503aa2d2811975bd Mon Sep 17 00:00:00 2001 From: Sam Mathias Weggersen Date: Fri, 12 Apr 2019 15:53:16 +0200 Subject: [PATCH 5/6] Update snapshot and add props to ViewPropTypes --- .../__snapshots__/TouchableHighlight-test.js.snap | 2 ++ Libraries/Components/View/ViewPropTypes.js | 15 +++++++++++++++ 2 files changed, 17 insertions(+) diff --git a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap index 34d71cc12a523e..00b32eed85ee5c 100644 --- a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap +++ b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap @@ -3,7 +3,9 @@ exports[`TouchableHighlight renders correctly 1`] = ` void, |}>; type IOSViewProps = $ReadOnly<{| From 44704c841e7074c2d051d534716a2bfebecf9247 Mon Sep 17 00:00:00 2001 From: Sam Mathias Weggersen Date: Fri, 12 Apr 2019 16:01:38 +0200 Subject: [PATCH 6/6] lint --- Libraries/Components/View/ViewPropTypes.js | 1 - 1 file changed, 1 deletion(-) diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js index 08d9838c5c5e05..085b69776fecb0 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/Libraries/Components/View/ViewPropTypes.js @@ -320,7 +320,6 @@ type AndroidViewProps = $ReadOnly<{| */ nextFocusUp?: ?number, - /** * Whether this `View` should be clickable with a non-touch click, eg. enter key on a hardware keyboard. *