Android: using AccessibilityNodeInfo#addAction to announce Expandable/Collapsible State (#34353)

Summary:
>Expandable and Collapsible are unique in the Android Accessibility API, in that they are not represented as properties on the View or AccessibilityNodeInfo, but are only represented as AccessibilityActions on the AccessibilityNodeInfo. This means that Talkback determines whether or not a node is "expandable" or "collapsible", or potentially even both, by looking at the list of AccessibilityActions attached to the AccessibilityNodeInfo.

>When setting the accessibilityState's expandable property, it should correlate to adding an action of either AccessibilityNodeInfoCompat.ACTION_EXPAND or AccessibilityNodeInfoCompat.ACTION_COLLAPSE on the AccessibilityNodeInfo. This work should be done in the ReactAccessibilityDelegate class's

>Currently, this feature is being "faked" by appending to the contentDescription in the BaseViewManager class. This should be removed when this feature is implemented properly.

fixes https://github.com/facebook/react-native/issues/30841

## Changelog

[Android] [Fixed] - using AccessibilityNodeInfo#addAction to announce Expandable/Collapsible State

Pull Request resolved: https://github.com/facebook/react-native/pull/34353

Test Plan:
- On some components, the state expanded/collapsed is properly announced on focus, on some it is not.
- On some components only the expanded/collapsed state is announced, and not other component text.
- Upon change, state change is not always announced.
- The accessibilityState's "expanded" field does not seem to work on all element types (for example, it has no effect on 's).
- using accessibilityActions it is possible to add an action for expand/collapse, but these are treated as custom actions and must have their own label defined, rather than using Androids built in expand/collapse actions, which Talkback has predefined labels for.

https://snack.expo.io/0YOQfXFBi

Tests  15th August 2022:
- Paper [Tests](https://github.com/facebook/react-native/pull/34353#issuecomment-1217425302)
- Fabric [Tests](https://github.com/facebook/react-native/pull/34353#issuecomment-1217781734)

Tests 6th September 2022:
- [Button which keeps control of extended/collapsed state in JavaScript with onAccessibilityAction, accessibilityActions and accessibiltyState (Paper)](https://github.com/facebook/react-native/pull/34353#issuecomment-1237601847)
- [TouchableWithoutFeedback keeps control of extended/collapsed state in Android Widget (Paper)](https://github.com/facebook/react-native/pull/34353#issuecomment-1237616304)
- [TouchableWithoutFeedback keeps control of extended/collapsed state in Android Widget (Fabric)](https://github.com/facebook/react-native/pull/34353#issuecomment-1237624755)
- [TouchableOpacity announces visible text and triggers expanded/collapsed with onPress and accessiblity menu (Fabric)](https://github.com/facebook/react-native/pull/34353#issuecomment-1237627857)

Announcing state with custom actions on Fabric (FAIL).
The issue is not a regression from this PR, as documented in https://github.com/facebook/react-native/pull/34353#issuecomment-1207744977. It will be fixed in a separate PR.

Reviewed By: NickGerleman

Differential Revision: D39893863

Pulled By: blavalla

fbshipit-source-id: f6af78b1839ba7d97eca052bd258faae00cbd27b
This commit is contained in:
fabriziobertoglio1987 authored and Facebook GitHub Bot committed 2022-11-08 12:26:59 -08:00
1 parent 8a847a30e1
commit 082a033fbb
4 files changed
+93 -8

No files matched your search

@@ -79,6 +79,7 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode
view.setTag(R.id.accessibility_state, null);
view.setTag(R.id.accessibility_actions, null);
view.setTag(R.id.accessibility_value, null);
view.setTag(R.id.accessibility_state_expanded, null);
// This indirectly calls (and resets):
// setTranslationX
@@ -270,6 +271,9 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode
if (accessibilityState == null) {
return;
}
if (accessibilityState.hasKey("expanded")) {
view.setTag(R.id.accessibility_state_expanded, accessibilityState.getBoolean("expanded"));
}
if (accessibilityState.hasKey("selected")) {
boolean prevSelected = view.isSelected();
boolean nextSelected = accessibilityState.getBoolean("selected");
@@ -335,13 +339,6 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode
&& value.getType() == ReadableType.Boolean
&& value.asBoolean()) {
contentDescription.add(view.getContext().getString(R.string.state_busy_description));
} else if (state.equals(STATE_EXPANDED) && value.getType() == ReadableType.Boolean) {
contentDescription.add(
view.getContext()
.getString(
value.asBoolean()
? R.string.state_expanded_description
: R.string.state_collapsed_description));
}
}
}
@@ -67,6 +67,8 @@ public class ReactAccessibilityDelegate extends ExploreByTouchHelper {
sActionIdMap.put("longpress", AccessibilityActionCompat.ACTION_LONG_CLICK.getId());
sActionIdMap.put("increment", AccessibilityActionCompat.ACTION_SCROLL_FORWARD.getId());
sActionIdMap.put("decrement", AccessibilityActionCompat.ACTION_SCROLL_BACKWARD.getId());
sActionIdMap.put("expand", AccessibilityActionCompat.ACTION_EXPAND.getId());
sActionIdMap.put("collapse", AccessibilityActionCompat.ACTION_COLLAPSE.getId());
}
private final View mView;
@@ -250,6 +252,14 @@ public class ReactAccessibilityDelegate extends ExploreByTouchHelper {
@Override
public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCompat info) {
super.onInitializeAccessibilityNodeInfo(host, info);
if (host.getTag(R.id.accessibility_state_expanded) != null) {
final boolean accessibilityStateExpanded =
(boolean) host.getTag(R.id.accessibility_state_expanded);
info.addAction(
accessibilityStateExpanded
? AccessibilityNodeInfoCompat.ACTION_COLLAPSE
: AccessibilityNodeInfoCompat.ACTION_EXPAND);
}
final AccessibilityRole accessibilityRole =
(AccessibilityRole) host.getTag(R.id.accessibility_role);
final String accessibilityHint = (String) host.getTag(R.id.accessibility_hint);
@@ -380,6 +390,12 @@ public class ReactAccessibilityDelegate extends ExploreByTouchHelper {
@Override
public boolean performAccessibilityAction(View host, int action, Bundle args) {
if (action == AccessibilityNodeInfoCompat.ACTION_COLLAPSE) {
host.setTag(R.id.accessibility_state_expanded, false);
}
if (action == AccessibilityNodeInfoCompat.ACTION_EXPAND) {
host.setTag(R.id.accessibility_state_expanded, true);
}
if (mAccessibilityActionsMap.containsKey(action)) {
final WritableMap event = Arguments.createMap();
event.putString("actionName", mAccessibilityActionsMap.get(action));