Clickable property requires "button" to be set as accessibilityRole

[kacieb]

Description

When a component has an onPress property, it should be clickable by TalkBack even if it is not set to be a button. This was discovered here.

This may require native changes on Android. It may also require an API change. From this comment, it is common on iOS for anything clickable to be called a "button" according to accessibility. This is not true on Android, when only things that look and feel like buttons should be labeled a button.

React Native version:

0.63

Steps To Reproduce

<Text onPress={() => {console.log("hello!")}} />

<Text accessibilityRole="button" onPress={() => {console.log("hello!")}} />

NOTE: More triage is needed to verify what happens on Android/iOS with these two cases.

Expected Results

Desired behavior on Android - Text node is clickable even if accessibilityRole is not "button"
Desired behavior on iOS - ?

[blavalla]

From a technical perspective on the Android side, the onPress prop should set view.setClickable(true) if it's not already. Usually, by calling view.setOnClickListener() this will happen automatically, but maybe we're using a touch listener or some other mechanism to detect the click.

[chrisglein]

This may require native changes on Android. It may also require an API change.

NOTE: More triage is needed to verify what happens on Android/iOS with these two cases.

There's still some ambiguity here. I'm not sure what the right solution would be based on what you've said here. Can you do some background research and turn this into a more concrete proposal?

[kacieb]

Claiming this for now so I can update the issue with more research.

[fabOnReact]

Thanks a lot. I start investigating the issue, this are my notes.

From a technical perspective on the Android side, the onPress prop should set view.setClickable(true) if it's not already. Usually, by calling view.setOnClickListener() this will happen automatically, but maybe we're using a touch listener or some other mechanism to detect the click.

the accessibilityRole="button" triggers setClickable(true)

react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java

Lines 396 to 397 in 36f3bf2

	} else if (role.equals(AccessibilityRole.BUTTON)) {
	nodeInfo.setClickable(true);

adding accessible=true prop to a component triggers setFocusable

react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java

Lines 56 to 58 in 57aa70c

	public void setAccessible(ReactViewGroup view, boolean accessible) {
	view.setFocusable(accessible);
	}

react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java

Lines 229 to 257 in 57aa70c

	@ReactProp(name = "focusable")
	public void setFocusable(final ReactViewGroup view, boolean focusable) {
	if (focusable) {
	view.setOnClickListener(
	new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	final EventDispatcher mEventDispatcher =
	UIManagerHelper.getEventDispatcherForReactTag(
	(ReactContext) view.getContext(), view.getId());
	if (mEventDispatcher == null) {
	return;
	}
	mEventDispatcher.dispatchEvent(
	new ViewGroupClickEvent(
	UIManagerHelper.getSurfaceId(view.getContext()), 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);
	// Don't set view.setFocusable(false) because we might still want it to be focusable for
	// accessibility reasons
	}
	}

#30935 (comment)

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.