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.

Sign up for GitHub

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

Jump to bottom

[Android] Keyboard accessibility improvements #24359

Closed
wants to merge 6 commits into from
Closed

[Android] Keyboard accessibility improvements #24359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f733da5
Added OnClick capabilities to touchable components for accessibility
sweggersen Apr 2, 2019
0c525c5
npm run lint and npm run prettier
sweggersen Apr 3, 2019
778b9fc
Remove accessibility prop changes
sweggersen Apr 11, 2019
cc2a7b0
Remove setFocusable(false) when clickable=false
sweggersen Apr 12, 2019
1897ee8
Update snapshot and add props to ViewPropTypes
sweggersen Apr 12, 2019
44704c8
lint
sweggersen Apr 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions Libraries/Components/Touchable/TouchableBounce.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,12 @@ 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
Expand Down
4 changes: 4 additions & 0 deletions Libraries/Components/Touchable/TouchableHighlight.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -422,6 +422,10 @@ 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
Expand Down
5 changes: 5 additions & 0 deletions Libraries/Components/Touchable/TouchableNativeFeedback.android.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,6 +325,11 @@ 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,
Expand Down
4 changes: 4 additions & 0 deletions Libraries/Components/Touchable/TouchableOpacity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,10 @@ 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
Expand Down
3 changes: 3 additions & 0 deletions Libraries/Components/Touchable/TouchableWithoutFeedback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,9 @@ 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,
Expand Down
2 changes: 2 additions & 0 deletions Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
exports[`TouchableHighlight renders correctly 1`] = `
<View
accessible={true}
clickable={false}
isTVSelectable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
Expand Down
14 changes: 14 additions & 0 deletions Libraries/Components/View/ViewPropTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,6 +319,20 @@ type AndroidViewProps = $ReadOnly<{|
* @platform android
*/
nextFocusUp?: ?number,

/**
* Whether this `View` should be clickable with a non-touch click, eg. enter key on a hardware keyboard.
*
* @platform android
*/
clickable?: boolean,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I want to share some details about some of the work happening inside Facebook and how it relates to this change.

  • Supporting multiple input types is a problem for all platforms.
  • The web platform has designed APIs for this purpose.
  • The concept of "click" on the web is essentially legacy, and touch events still trigger onClick.
  • React Native for Web supports multiple input types but relies on many more events than onClick (i.e., onMouseDown, onKeyPress, etc.).
  • Internally we're experimenting with a new React event system. On the web that relies on Pointer Events and would eschew the need to use onClick. The general idea is to move away from input-specific event types and instead use onPress, etc., with the event object containing information about the pointer type that was used.
  • Internally we're experimenting with web implementations of View and Text that shed all the event props found in React Native (in favour of the new event system) and introduce a focusable prop to mark a View as being able to receive (or not) user-initiated focus by any input type (all Views are programmatically focusable). In this way you could set focusable={false} and retain all the mouse/touch functionality but hide the View from inputs like keyboards that first need to focus an element before it can be interacted with. That's an important pattern on the web where you might want to make something like an avatar interactive to pointers, but hidden from keyboards if the functionality is redundant, i.e., if there's also an interactive user name that performs the same action.

Given all that I'd suggest we do something like rename clickable to focusable and decouple it from onClick. If onClick here is meant to be used for mouse as well as keyboard, that's probably a good enough prop for now to unblock other input types on Android. We'll hopefully address this properly in RN in the future with the new event system.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the write up!

About the decouple of focusable from onClick, what do you suggest?

The Android default onClick listener works for all input types 'keyboard', 'touch', 'mouse', which is what we need support for. Before this change, only 'touch' and 'mouse' events would work.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Naming this "focusable" could definitely lead to some confusion here due to Android's already confusing separate concepts of keyboard focusability and accessibility focusability.

Setting "focusable=true" on a standard Android view will set it to be both keyboard and accessibility focusable, but if this is property is meant to only trigger keyboard focusability, we should probably be more explicit in its naming.

Copy link
Contributor

@necolas necolas May 28, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

About the decouple of focusable from onClick, what do you suggest?

I was thinking that the clickable/focusable feature is something we need independent of how events are handled. So in the future we might not have event handlers on View but we'll still need to mark views as being able to receive user-initiated focus following a mouse, touch, or keyboard event.

Setting "focusable=true" on a standard Android view will set it to be both keyboard and accessibility focusable, but if this is property is meant to only trigger keyboard focusability, we should probably be more explicit in its naming.

What is "accessibility focusable" on Android? The way we're using this on web is to allow the element to receive focus following any user action from any pointer device. It happens to also be required to support interactions on a view (with seems to overlap with this PR for Android). There might be a better name though…interactive? IIRC accessible is also equivalent to Android's native focusable!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To answer what "accessibility focusable" is requires a bit of a history lesson, so bear with me.

In the early days of Android many devices had trackballs or d-pads as an alternate non-touch way to interact with the device. To the system, these keys worked much like external keyboards. To allow your UI to be interactive you had to make sure it was focusable in "non touch mode", and the best way to do this was to set focusable="true". You would generally want all interactive elements to be focusable in this way, but wouldn't want non-interactive elements to be focusable, since it would be annoying to have to press keys to get past all of the non-interactive content.

Then later on Google decided to add a real accessibility system to Android, and built the Talkback screen reader as well as other accessibility services like Switch Access and Select to Speak. Some of these services (like Talkback) can only really be useful if you can focus on non-interactive content, like plain text. Otherwise, this content could be totally hidden from a user with a vision impairment. This meant that they couldn't simply use the same focus system used for D-Pad's and keyboards, and they had to come up with a way that you could have an element be focusable for accessibility, but not focusable for keyboard users. This is what I mean when I say "accessibility focusable".

Unfortunately, they didn't simply add a property like accessibilityFocusable and instead derived whether or not something would be accessibility focusable by looking at the combination of multiple different properties (click handlers, the focusable property, if the view was a leaf node, if it had focusable ancestors, etc.). It wasn't until Android Pie that they cleaned this up and added setScreenReaderFocusable to the View class.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I think it makes sense to call it focusable. Who should do the work? Do we just update this PR?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please send a new PR that changes everything. We can do it all in a single commit :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you'd like to write the patch that would be great! A new PR is best since this one has already been merged.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @sweggersen: just wanted to ping you and ask whether you could send a PR and rename this to focusable?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's on my list. I'll do it this week.


/**
* The action to perform when this `View` is clicked on by a non-touch click, eg. enter key on a hardware keyboard.
*
* @platform android
*/
onClick?: () => void,
|}>;

type IOSViewProps = $ReadOnly<{|
Expand Down
3 changes: 1 addition & 2 deletions ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions ReactAndroid/src/main/java/com/facebook/react/uimanager/UIManagerModuleConstants.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
.put("topLoadingStart", MapBuilder.of(rn, "onLoadingStart"))
.put("topSelectionChange", MapBuilder.of(rn, "onSelectionChange"))
.put("topMessage", MapBuilder.of(rn, "onMessage"))
.put("topClick", MapBuilder.of(rn, "onClick"))
// Scroll events are added as per task T22348735.
// Subject for further improvement.
.put("topScrollBeginDrag", MapBuilder.of(rn, "onScrollBeginDrag"))
Expand Down
25 changes: 25 additions & 0 deletions ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
import android.os.Build;
import android.view.View;
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.common.MapBuilder;
Expand All @@ -21,10 +22,12 @@
import com.facebook.react.uimanager.PointerEvents;
import com.facebook.react.uimanager.Spacing;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.UIManagerModule;
import com.facebook.react.uimanager.ViewGroupManager;
import com.facebook.react.uimanager.ViewProps;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.uimanager.annotations.ReactPropGroup;
import com.facebook.react.uimanager.events.EventDispatcher;
import com.facebook.yoga.YogaConstants;
import java.util.Locale;
import java.util.Map;
Expand Down Expand Up @@ -223,6 +226,28 @@ public void setCollapsable(ReactViewGroup view, boolean collapsable) {
// handled in NativeViewHierarchyOptimizer
}

@ReactProp(name = "clickable")
public void setClickable(final ReactViewGroup view, boolean clickable) {
if (clickable) {
view.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View v) {
final EventDispatcher mEventDispatcher = ((ReactContext)view.getContext()).getNativeModule(UIManagerModule.class)
.getEventDispatcher();
mEventDispatcher.dispatchEvent(new ViewGroupClickEvent(view.getId()));
}});

// Clickable elements are focusable. On API 26, this is taken care by setClickable.
// Explicitly calling setFocusable here for backward compatibility.
view.setFocusable(true /*isFocusable*/);
}
else {
view.setOnClickListener(null);
view.setClickable(false);
}
}

@ReactProp(name = ViewProps.OVERFLOW)
public void setOverflow(ReactViewGroup view, String overflow) {
view.setOverflow(overflow);
Expand Down
32 changes: 32 additions & 0 deletions ReactAndroid/src/main/java/com/facebook/react/views/view/ViewGroupClickEvent.java
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
package com.facebook.react.views.view;


import com.facebook.react.bridge.Arguments;
import com.facebook.react.uimanager.events.Event;
import com.facebook.react.uimanager.events.RCTEventEmitter;

/**
* Represents a Click on the ReactViewGroup
*/
public class ViewGroupClickEvent extends Event<ViewGroupClickEvent> {
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());
}
}