Improve message actions menu TalkBack accessibility#6484
Merged
Conversation
Contributor
Author
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
Contributor
PR checklist ✅All required conditions are satisfied:
🎉 Great job! This PR is ready for review. |
Contributor
SDK Size Comparison 📏
|
WalkthroughThis PR adds accessibility support to three chat UI components: ReactionToggle now announces state changes and provides semantics labels; ReactionsPicker bottom sheet announces its title via LaunchedEffect to work around ModalBottomSheet's paneTitle suppression; MessageActions menu gains a paneTitle semantic. All three components' accessibility strings are localized across eight language variants. ChangesAccessibility Enhancements for Chat UI Components
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
andremion
force-pushed
the
fix/compose-message-actions-a11y
branch
from
b115247 to
ed66b41
Compare
`ReactionToggle` is used both in the long-press reactions bar and in the full emoji picker. Its `Modifier.toggleable` was wired with `role = Role.Checkbox`, so TalkBack announced reactions as "[emoji], checkbox, not checked, double tap to toggle". Reactions are tap-to-add / tap-to-remove toggle buttons, not checkboxes — the Figma a11y principle for role calls this out explicitly with the example "Thumbs up, toggle button, not pressed" vs the don't case "Thumbs up sign, checkbox". Switch the role to `Role.Button` and attach an explicit `stateDescription` of "Pressed" / "Not pressed" so TalkBack reads "[emoji], button, pressed / not pressed, double tap to toggle" — the canonical Android toggle-button pattern, since Compose has no `Role.ToggleButton`. Two new strings (`stream_compose_reactions_pressed` and `stream_compose_reactions_not_pressed`) translated across the 7 supported locales. Internal-only composable; no public API change. This overrides the deliberate `Role.Checkbox` decision from #6440 in favour of the design source-of-truth.
Tapping a reaction toggle in either the long-press reactions bar or the full emoji picker grid produced no screen-reader confirmation. TalkBack re-focused the underlying message but emitted no signal that the toggle state changed, leaving SR users unsure whether the action took effect. Wrap `ReactionToggle.onValueChange` to fire a polite live region announce before forwarding the new state to the caller. Both surfaces inherit the behaviour automatically because the full emoji picker's `ReactionMenuOptionItem` factory delegates to the same `ReactionToggle`. The announce string carries the emoji character as `%1$s`. TalkBack reads the character with its locale-native name (e.g. `👍` → "Thumbs up sign"), so the announce reads naturally as "Thumbs up sign reaction added" without maintaining a per-reaction name table in the SDK. Two new strings (`stream_compose_reactions_added` and `stream_compose_reactions_removed`) translated across the 7 supported locales.
When the long-press menu opened, TalkBack leaked the host activity's
`android:label` ("Chat Sample Compose") before the focused element,
giving screen-reader users no signal that a new surface had appeared.
Declare `paneTitle = "Message actions"` on the inner `Column` inside
the `Dialog`. TalkBack treats `paneTitle` changes as a window-state
event and announces the title on dialog entry, so the new opening
announcement reads "Message actions, [first focused item]" instead of
the host activity label.
One new string (`stream_compose_message_actions_menu_title`)
translated across the 7 supported locales.
When the emoji picker `ModalBottomSheet` opened from the "+" in the reactions bar, TalkBack focused the drag handle and announced "Collapsed, drag handle, actions available, swipe up or swipe down". Screen-reader users had no signal that the emoji picker had appeared and the drag handle drowned out the actual content. `ModalBottomSheet` swallows the standard `paneTitle` window-state event (verified in #6466 / `PollDialogHeader`), so announce the title programmatically via `view.announceForAccessibility` in a `LaunchedEffect`. TalkBack now reads "Emoji picker" on sheet open. Hide the drag handle from the accessibility tree via `Modifier.semantics { hideFromAccessibility() }`. The handle stays visually present and remains draggable for sighted users; TalkBack focus skips it and lands on the first emoji in the picker grid instead. One new string (`stream_compose_emoji_picker_title`) translated across the 7 supported locales. No public API changes.
andremion
force-pushed
the
fix/compose-message-actions-a11y
branch
from
ed66b41 to
e70d4a2
Compare
gpunto
approved these changes
Jun 8, 2026
gpunto
left a comment
gpunto
left a comment
Contributor
There was a problem hiding this comment.
Looks good, just a couple of suggestions
1. StreamCardBottomSheet bakes `hideFromAccessibility()` into its default drag handle instead of exposing a `dragHandle` parameter for the emoji picker to override. The handle has no value for TalkBack users, so hiding it from the accessibility tree is the right default for every Stream card sheet rather than opt-in per call site. 2. `ReactionToggle` announces are renamed from added/removed to selected/unselected (variables and `stream_compose_reactions_*` keys). The component does not know whether a caller uses it to add or remove a reaction, so selected/unselected matches its actual semantic. Translations updated across the 7 supported locales. KDoc cleanup: dropped the rationale paragraph from `StreamCardBottomSheet` so the contract describes behaviour only.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
AND-1180
Goal
The long-press message actions menu and the emoji reactions surfaces had four screen-reader gaps:
ReactionToggleusedModifier.toggleable(role = Role.Checkbox), so TalkBack read "[emoji] sign, checkbox, not checked, double tap to toggle". The Figma a11y principle calls this out explicitly as the Don't case; reactions are toggle buttons (tap to add / tap to remove), not checkboxes.android:label("Chat Sample Compose") before the focused element, with no signal of the new surface.Implementation
Four feature-scoped commits.
1. Expose reactions as toggle buttons to TalkBack.
In
ReactionToggle, switch the toggleable role fromRole.CheckboxtoRole.Buttonand attach an explicitstateDescriptionof "Pressed" / "Not pressed". TalkBack now reads "[emoji], button, pressed / not pressed, double tap to toggle" — the canonical Android toggle-button pattern, since Compose has noRole.ToggleButton. Internal composable; no public API change. This overrides #6440's deliberateRole.Checkboxdecision in favour of the design source-of-truth.2. Announce reaction add and remove.
Wrap
ReactionToggle.onValueChangeto fireview.announceForAccessibility("[emoji] reaction added" / "removed")before forwarding the new state. Both the long-press reactions bar and the full emoji picker grid benefit automatically because the picker'sReactionMenuOptionItemfactory delegates to the sameReactionToggle. The string carries the emoji character as%1$s; TalkBack reads the character with its locale-native name, so the announce reads naturally as "Thumbs up sign reaction added" without maintaining a per-reaction name table.3. Announce the message actions menu pane title.
Declare
Modifier.semantics { paneTitle = "Message actions" }on the innerColumninside theDialog. TalkBack treatspaneTitlechanges as a window-state event and announces the title on dialog entry, replacing the previously-leaked host activity label.4. Announce the emoji picker sheet.
ModalBottomSheetswallows the standardpaneTitlewindow-state event (verified in #6466 /PollDialogHeader), so fall back to programmatic announce viaview.announceForAccessibilityin aLaunchedEffect. Hide the sheet's drag handle from the accessibility tree viaModifier.semantics { hideFromAccessibility() }— the handle stays visually present and remains draggable for sighted users; TalkBack focus skips it and lands on the first emoji in the picker grid.Migrated
ReactionsPickerto theStreamCardBottomSheetwrapper introduced in #6480 so the emoji picker matches the rest of the SDK's card sheets (32dp top corners,backgroundCoreElevation1container, Stream scrim). Added an optionaldragHandleparameter toStreamCardBottomSheet(internal API; defaults toBottomSheetDefaults.DragHandle()) so the emoji picker can pass its accessibility-hidden handle. All other callers ofStreamCardBottomSheetkeep the default and are unaffected.New strings translated across the 7 supported locales:
stream_compose_reactions_pressed,stream_compose_reactions_not_pressedstream_compose_reactions_added,stream_compose_reactions_removedstream_compose_message_actions_menu_titlestream_compose_emoji_picker_titleNo public API changes.
Testing
Enable TalkBack on a physical device. Run the Compose sample.
Summary by CodeRabbit
New Features
Localization