Improve message actions menu TalkBack accessibility

stream-chat-android-compose/api/stream-chat-android-compose.api

@@ -1700,6 +1700,12 @@ public final class io/getstream/chat/android/compose/ui/components/reactionoptio
 	public final fun getLambda$857155321$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
 }
 
+public final class io/getstream/chat/android/compose/ui/components/reactionpicker/ComposableSingletons$ReactionsPickerKt {
+	public static final field INSTANCE Lio/getstream/chat/android/compose/ui/components/reactionpicker/ComposableSingletons$ReactionsPickerKt;
+	public fun <init> ()V
+	public final fun getLambda$1725385158$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
+}
+
 public final class io/getstream/chat/android/compose/ui/components/reactionpicker/ReactionsPickerKt {
 	public static final fun ReactionsPicker (Lio/getstream/chat/android/models/Message;Lkotlin/jvm/functions/Function1;Landroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;II)V
 	public static final fun ReactionsPickerContent (Lio/getstream/chat/android/models/Message;Lkotlin/jvm/functions/Function1;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;II)V

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/messageactions/MessageActions.kt

@@ -49,6 +49,8 @@ import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.layout.positionInWindow
 import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.paneTitle
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTagsAsResourceId
 import androidx.compose.ui.tooling.preview.Preview
@@ -59,6 +61,7 @@ import androidx.compose.ui.window.Dialog
 import androidx.compose.ui.window.DialogProperties
 import androidx.compose.ui.window.DialogWindowProvider
 import androidx.compose.ui.zIndex
+import io.getstream.chat.android.compose.R
 import io.getstream.chat.android.compose.state.messageoptions.MessageOptionItemState
 import io.getstream.chat.android.compose.state.messages.MessageAlignment
 import io.getstream.chat.android.compose.ui.components.messageoptions.defaultMessageOptionsState
@@ -175,9 +178,13 @@ public fun MessageActions(
             if (isInspection) animation.snapIn() else animation.animateIn()
         }
 
+        val menuPaneTitle = stringResource(R.string.stream_compose_message_actions_menu_title)
         Column(
             modifier = modifier
-                .semantics { testTagsAsResourceId = true }
+                .semantics {
+                    testTagsAsResourceId = true
+                    paneTitle = menuPaneTitle
+                }
                 .fillMaxSize()
                 .clickable(onClick = animatedDismiss, indication = null, interactionSource = null)
                 .systemBarsPadding()

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/reactionpicker/ReactionsPicker.kt

@@ -17,11 +17,18 @@
 package io.getstream.chat.android.compose.ui.components.reactionpicker
 
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.hideFromAccessibility
+import androidx.compose.ui.semantics.semantics
+import io.getstream.chat.android.compose.R
 import io.getstream.chat.android.compose.ui.components.reactionoptions.ExtendedReactionsOptions
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.compose.ui.theme.MessageReactionsPickerContentParams
@@ -46,11 +53,22 @@ public fun ReactionsPicker(
     modifier: Modifier = Modifier,
     onDismiss: () -> Unit = {},
 ) {
+    val view = LocalView.current
+    val emojiPickerTitle = stringResource(R.string.stream_compose_emoji_picker_title)
+    // ModalBottomSheet swallows the standard `paneTitle` window-state-changed event, so
+    // announce the title programmatically. See PollDialogHeader for the same workaround.
+    LaunchedEffect(emojiPickerTitle) { view.announceForAccessibility(emojiPickerTitle) }
+
     ModalBottomSheet(
         modifier = modifier,
         sheetState = rememberModalBottomSheetState(),
         containerColor = ChatTheme.colors.backgroundCoreApp,
         onDismissRequest = onDismiss,
+        dragHandle = {
+            BottomSheetDefaults.DragHandle(
+                modifier = Modifier.semantics { hideFromAccessibility() },
+            )
+        },
     ) {
         ChatTheme.componentFactory.MessageReactionsPickerContent(
             params = MessageReactionsPickerContentParams(

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/reactions/ReactionToggle.kt

@@ -29,10 +29,16 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.onClick
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.stateDescription
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import io.getstream.chat.android.compose.R
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.compose.ui.theme.ReactionIconParams
 import io.getstream.chat.android.compose.ui.util.ReactionResolver
@@ -60,6 +66,13 @@ internal fun ReactionToggle(
 ) {
     emoji?.let {
         val containerSize = size.toContainerSize()
+        val selectedStateDescription = stringResource(R.string.stream_compose_reactions_state_selected)
+        val notSelectedStateDescription = stringResource(R.string.stream_compose_reactions_state_not_selected)
+        val selectActionLabel = stringResource(R.string.stream_compose_reactions_action_select)
+        val unselectActionLabel = stringResource(R.string.stream_compose_reactions_action_unselect)
+        val addedAnnouncement = stringResource(R.string.stream_compose_reactions_added, emoji)
+        val removedAnnouncement = stringResource(R.string.stream_compose_reactions_removed, emoji)
+        val view = LocalView.current
         ChatTheme.componentFactory.ReactionIcon(
             params = ReactionIconParams(
                 type = type,
@@ -70,11 +83,31 @@ internal fun ReactionToggle(
                         background(ChatTheme.colors.backgroundUtilitySelected, CircleShape)
                     }
                     .ifNotNull(onCheckedChange) { onChange ->
-                        clip(CircleShape).toggleable(
-                            value = checked,
-                            role = Role.Checkbox,
-                            onValueChange = onChange,
-                        )
+                        val toggleAndAnnounce: (Boolean) -> Unit = { newChecked ->
+                            view.announceForAccessibility(
+                                if (newChecked) addedAnnouncement else removedAnnouncement,
+                            )
+                            onChange(newChecked)
+                        }
+                        clip(CircleShape)
+                            .toggleable(
+                                value = checked,
+                                role = Role.Button,
+                                onValueChange = toggleAndAnnounce,
+                            )
+                            .semantics {
+                                stateDescription = if (checked) {
+                                    selectedStateDescription
+                                } else {
+                                    notSelectedStateDescription
+                                }
+                                onClick(
+                                    label = if (checked) unselectActionLabel else selectActionLabel,
+                                ) {
+                                    toggleAndAnnounce(!checked)
+                                    true
+                                }
+                            }
                     }
                     .defaultMinSize(minWidth = containerSize, minHeight = containerSize)
                     .wrapContentSize(),

stream-chat-android-compose/src/main/res/values-es/strings.xml

@@ -85,6 +85,7 @@
   <string name="stream_compose_dismiss">"Descartar"</string>
   <string name="stream_compose_edit_answer">"Actualizar tu comentario"</string>
   <string name="stream_compose_edit_message">"Editar mensaje"</string>
+  <string name="stream_compose_emoji_picker_title">"Selector de emojis"</string>
   <string name="stream_compose_file_preview">"Archivo"</string>
   <string name="stream_compose_flag_message">"Marcar mensaje"</string>
   <string name="stream_compose_flag_message_text">"¿Quieres enviar una copia de este mensaje a un moderador para una investigación más detallada?"</string>
@@ -135,6 +136,7 @@
   <string name="stream_compose_message_composer_attachments_open">"Abrir archivos adjuntos"</string>
   <string name="stream_compose_message_deleted">"Mensaje eliminado"</string>
   <string name="stream_compose_message_deleted_preview">"Mensaje eliminado"</string>
+  <string name="stream_compose_message_actions_menu_title">"Acciones del mensaje"</string>
   <string name="stream_compose_message_item_open_thread">"Abrir hilo"</string>
   <string name="stream_compose_message_item_options">"Mostrar opciones del mensaje"</string>
   <string name="stream_compose_message_attachment_open">"Abrir archivo adjunto"</string>
@@ -225,8 +227,14 @@
   <string name="stream_compose_quoted_message_reply_to">"Responder a %s"</string>
   <string name="stream_compose_quoted_message_reply_to_you">"Responder a ti"</string>
   <string name="stream_compose_quoted_message_you">"Tú"</string>
+  <string name="stream_compose_reactions_action_select">"Seleccionar"</string>
+  <string name="stream_compose_reactions_action_unselect">"Deseleccionar"</string>
   <string name="stream_compose_reactions_add">"Añadir reacción"</string>
+  <string name="stream_compose_reactions_added">"Reacción %1$s añadida"</string>
   <string name="stream_compose_reactions_remove">"Toca para eliminar"</string>
+  <string name="stream_compose_reactions_removed">"Reacción %1$s eliminada"</string>
+  <string name="stream_compose_reactions_state_not_selected">"No seleccionado"</string>
+  <string name="stream_compose_reactions_state_selected">"Seleccionado"</string>
   <string name="stream_compose_reactions_you">"Tú"</string>
   <string name="stream_compose_recent_files">"Archivos recientes"</string>
   <string name="stream_compose_remaining_media_attachments_count">"+%1$d"</string>

stream-chat-android-compose/src/main/res/values-fr/strings.xml

@@ -85,6 +85,7 @@
   <string name="stream_compose_dismiss">"Ignorer"</string>
   <string name="stream_compose_edit_answer">"Mettre à jour votre commentaire"</string>
   <string name="stream_compose_edit_message">"Modifier le message"</string>
+  <string name="stream_compose_emoji_picker_title">"Sélecteur d’emojis"</string>
   <string name="stream_compose_file_preview">"Fichier"</string>
   <string name="stream_compose_flag_message">"Signaler le message"</string>
   <string name="stream_compose_flag_message_text">"Voulez-vous envoyer une copie de ce message à un modérateur pour une enquête plus approfondie ?"</string>
@@ -135,6 +136,7 @@
   <string name="stream_compose_message_composer_attachments_open">"Ouvrir les pièces jointes"</string>
   <string name="stream_compose_message_deleted">"Message supprimé"</string>
   <string name="stream_compose_message_deleted_preview">"Message supprimé"</string>
+  <string name="stream_compose_message_actions_menu_title">"Actions du message"</string>
   <string name="stream_compose_message_item_open_thread">"Ouvrir le fil"</string>
   <string name="stream_compose_message_item_options">"Afficher les options du message"</string>
   <string name="stream_compose_message_attachment_open">"Ouvrir la pièce jointe"</string>
@@ -225,8 +227,14 @@
   <string name="stream_compose_quoted_message_reply_to">"Répondre à %s"</string>
   <string name="stream_compose_quoted_message_reply_to_you">"Répondre à vous-même"</string>
   <string name="stream_compose_quoted_message_you">"Vous"</string>
+  <string name="stream_compose_reactions_action_select">"Sélectionner"</string>
+  <string name="stream_compose_reactions_action_unselect">"Désélectionner"</string>
   <string name="stream_compose_reactions_add">"Ajouter une réaction"</string>
+  <string name="stream_compose_reactions_added">"Réaction %1$s ajoutée"</string>
   <string name="stream_compose_reactions_remove">"Appuyez pour supprimer"</string>
+  <string name="stream_compose_reactions_removed">"Réaction %1$s supprimée"</string>
+  <string name="stream_compose_reactions_state_not_selected">"Non sélectionné"</string>
+  <string name="stream_compose_reactions_state_selected">"Sélectionné"</string>
   <string name="stream_compose_reactions_you">"Vous"</string>
   <string name="stream_compose_recent_files">"Fichiers récents"</string>
   <string name="stream_compose_remaining_media_attachments_count">"+%1$d"</string>

stream-chat-android-compose/src/main/res/values-hi/strings.xml

@@ -145,6 +145,7 @@
   <string name="stream_compose_dismiss">"खारिज करें"</string>
   <string name="stream_compose_edit_answer">"अपनी टिप्पणी अपडेट करें"</string>
   <string name="stream_compose_edit_message">"मैसेज एडिट करें"</string>
+  <string name="stream_compose_emoji_picker_title">"इमोजी चयनकर्ता"</string>
   <string name="stream_compose_file_preview">"फ़ाइल"</string>
   <string name="stream_compose_flag_message">"मैसेज चिह्नित करें"</string>
   <string name="stream_compose_flag_message_text">"क्या आप आगे की जांच के लिए इस संदेश की एक कॉपी मॉडरेटर को भेजना चाहते हैं?"</string>
@@ -195,6 +196,7 @@
   <string name="stream_compose_message_composer_attachments_open">"अटैचमेंट खोलें"</string>
   <string name="stream_compose_message_deleted">"मैसेज मिटाया गया"</string>
   <string name="stream_compose_message_deleted_preview">"मैसेज हटा दिया गया"</string>
+  <string name="stream_compose_message_actions_menu_title">"संदेश की क्रियाएँ"</string>
   <string name="stream_compose_message_item_open_thread">"थ्रेड खोलें"</string>
   <string name="stream_compose_message_item_options">"संदेश के विकल्प दिखाएँ"</string>
   <string name="stream_compose_message_attachment_open">"अटैचमेंट खोलें"</string>
@@ -285,8 +287,14 @@
   <string name="stream_compose_quoted_message_reply_to">"%s को जवाब"</string>
   <string name="stream_compose_quoted_message_reply_to_you">"स्वयं को जवाब"</string>
   <string name="stream_compose_quoted_message_you">"आप"</string>
+  <string name="stream_compose_reactions_action_select">"चुनें"</string>
+  <string name="stream_compose_reactions_action_unselect">"अचयन करें"</string>
   <string name="stream_compose_reactions_add">"प्रतिक्रिया जोड़ें"</string>
+  <string name="stream_compose_reactions_added">"%1$s प्रतिक्रिया जोड़ी गई"</string>
   <string name="stream_compose_reactions_remove">"हटाने के लिए टैप करें"</string>
+  <string name="stream_compose_reactions_removed">"%1$s प्रतिक्रिया हटाई गई"</string>
+  <string name="stream_compose_reactions_state_not_selected">"चयनित नहीं"</string>
+  <string name="stream_compose_reactions_state_selected">"चयनित"</string>
   <string name="stream_compose_reactions_you">"आप"</string>
   <string name="stream_compose_recent_files">"हाल ही की फाइलें"</string>
   <string name="stream_compose_remaining_media_attachments_count">"+%1$d"</string>

stream-chat-android-compose/src/main/res/values-in/strings.xml

@@ -85,6 +85,7 @@
   <string name="stream_compose_dismiss">"Tutup"</string>
   <string name="stream_compose_edit_answer">"Perbarui Komentar Anda"</string>
   <string name="stream_compose_edit_message">"Edit Pesan"</string>
+  <string name="stream_compose_emoji_picker_title">"Pemilih emoji"</string>
   <string name="stream_compose_file_preview">"File"</string>
   <string name="stream_compose_flag_message">"Tandai Pesan"</string>
   <string name="stream_compose_flag_message_text">"Apakah Anda ingin mengirim salinan pesan ini ke moderator untuk investigasi lebih lanjut?"</string>
@@ -135,6 +136,7 @@
   <string name="stream_compose_message_composer_attachments_open">"Buka lampiran"</string>
   <string name="stream_compose_message_deleted">"Pesan dihapus"</string>
   <string name="stream_compose_message_deleted_preview">"Pesan dihapus"</string>
+  <string name="stream_compose_message_actions_menu_title">"Tindakan pesan"</string>
   <string name="stream_compose_message_item_open_thread">"Buka utas"</string>
   <string name="stream_compose_message_item_options">"Tampilkan opsi pesan"</string>
   <string name="stream_compose_message_attachment_open">"Buka lampiran"</string>
@@ -225,8 +227,14 @@
   <string name="stream_compose_quoted_message_reply_to">"Balas ke %s"</string>
   <string name="stream_compose_quoted_message_reply_to_you">"Balas ke diri sendiri"</string>
   <string name="stream_compose_quoted_message_you">"Anda"</string>
+  <string name="stream_compose_reactions_action_select">"Pilih"</string>
+  <string name="stream_compose_reactions_action_unselect">"Batalkan pilihan"</string>
   <string name="stream_compose_reactions_add">"Tambahkan reaksi"</string>
+  <string name="stream_compose_reactions_added">"Reaksi %1$s ditambahkan"</string>
   <string name="stream_compose_reactions_remove">"Ketuk untuk menghapus"</string>
+  <string name="stream_compose_reactions_removed">"Reaksi %1$s dihapus"</string>
+  <string name="stream_compose_reactions_state_not_selected">"Tidak dipilih"</string>
+  <string name="stream_compose_reactions_state_selected">"Dipilih"</string>
   <string name="stream_compose_reactions_you">"Anda"</string>
   <string name="stream_compose_recent_files">"File Terbaru"</string>
   <string name="stream_compose_remaining_media_attachments_count">"+%1$d"</string>