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: using AccessibilityNodeInfo#addAction to announce Expandable/Collapsible State #34353

Closed
wants to merge 25 commits into from
Closed

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

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
d1b97ec
draft solution with example
fabOnReact Aug 5, 2022
1b2a898
adding examples from snack
fabOnReact Aug 8, 2022
d58a2db
adding action expand and collapse
fabOnReact Aug 8, 2022
4e5773c
Merge branch 'main' into expanded-state
fabOnReact Aug 15, 2022
01b0f6c
remove useless if statement
fabOnReact Aug 15, 2022
9fe1630
remove example
fabOnReact Aug 15, 2022
0839607
Merge branch 'main' into expanded-state
fabOnReact Aug 16, 2022
14509d9
Merge branch 'main' into expanded-state
fabOnReact Aug 16, 2022
e5b6b07
Merge branch 'main' into expanded-state
fabOnReact Aug 16, 2022
28e9c3b
remove default expand/collapse action, the state is managed with java…
fabOnReact Aug 17, 2022
2e707f3
Merge branch 'main' into expanded-state
fabOnReact Aug 17, 2022
2b18135
Merge branch 'main' into expanded-state
fabOnReact Aug 25, 2022
7033471
Merge branch 'main' into expanded-state
fabOnReact Sep 1, 2022
f9b710d
invert ACTION_EXPAND and ACTION_EXPAND (codereview)
fabOnReact Sep 1, 2022
8e7168f
commiting example
fabOnReact Sep 1, 2022
6f4184f
adding return type to Component
fabOnReact Sep 1, 2022
266f13b
improving example
fabOnReact Sep 1, 2022
ef30488
change Expand/Collapse with standard action
fabOnReact Sep 1, 2022
1160c32
adding expand/collapse custom actions
fabOnReact Sep 2, 2022
9a60946
removing expand/collapse actions
fabOnReact Sep 2, 2022
125cb45
Merge branch 'main' into expanded-state
fabOnReact Sep 5, 2022
ba171fc
paper - expand/collapse using onAccessibilityAction
fabOnReact Sep 5, 2022
c6d19e9
minor change
fabOnReact Sep 5, 2022
b80bcb3
adding collapse/expand in performAccessibilityAction callback
fabOnReact Sep 5, 2022
914c7a5
update example
fabOnReact Sep 6, 2022
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
7 changes: 0 additions & 7 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 @@ -336,13 +336,6 @@ private void updateViewContentDescription(@NonNull T view) {
&& 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));
}
}
}
Expand Down
2 changes: 2 additions & 0 deletions ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,6 +414,8 @@ private static void setState(
context.getString(
boolValue ? R.string.state_on_description : R.string.state_off_description));
}
} else if (state.equals("expanded") && value.getType() == ReadableType.Boolean) {
info.addAction(value.asBoolean() ? AccessibilityNodeInfoCompat.ACTION_EXPAND : AccessibilityNodeInfoCompat.ACTION_COLLAPSE);
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe I'm misreading this, but isn't this adding an action of "ACTION_EXPAND" when the state is "expanded"?

It should do the opposite, when a state is "expanded" the only available action should be "ACTION_COLLAPSE" and when a state is "collapsed" the only available action should be "ACTION_EXPAND".

Copy link
Contributor Author

@fabOnReact fabOnReact Sep 6, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

@blavalla Thanks a lot. I added the suggested changes. I also added these changes:

  • updated the AccessibilityExample (videos)
  • added setTag and getTag to retrieve and update the accessibility_state_expanded in ReactAccessibilityDelegate

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

Lines 268 to 276 in b80bcb3

@Override
@ReactProp(name = ViewProps.ACCESSIBILITY_STATE)
public void setViewState(@NonNull T view, @Nullable ReadableMap accessibilityState) {
if (accessibilityState == null) {
return;
}
if (accessibilityState.hasKey("expanded")) {
view.setTag(R.id.accessibility_state_expanded, accessibilityState.getBoolean("expanded"));
}

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

Lines 228 to 235 in b80bcb3

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);
}

  • added the logic in performAccessibilityAction to announce the change in expanded collapsed state when using accessibility menu without implementation of onAccessibilityAction.

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

Lines 365 to 371 in b80bcb3

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);
}

  • updated the summary with the new video test cases
  • further investigated the issue with onAccessibilityAction not triggered on Fabric (summary available here).

}
}
}
Expand Down