Improve channel list TalkBack accessibility (#6436)

* Fix duplicated TalkBack readout in channel preview

`MessagePreviewContent` and `DraftPreviewContent` exposed a consolidated
`text` semantic on the parent `Row` to read the sender+message (or
"Draft:"+text) as one utterance, but the child `Text` composables still
merged their own text into the surrounding clickable's accessibility
tree, so TalkBack announced each preview twice. Switching to
`clearAndSetSemantics` replaces the children and emits the composed
preview once.

* Fix TalkBack crash on mentions at the start of a message

`tagUser` in `TextUtils` decrements the mention's start index by 1 to
include the leading `@` in the highlighted span. When the mentioned user
name appears at index 0 of the message text, that produces a span start
of -1. Compose tolerates the invalid span at render time, but TalkBack
asks the platform to convert the `AnnotatedString` to a spannable, where
`Spannable.setSpan` strictly validates and throws
`IndexOutOfBoundsException: setSpan (-1 ...) starts before 0`, crashing
the app the moment an accessibility service tries to read the message
list.

Clamp the highlight start to 0 in that edge case so the span stays
valid; visually the leading `@` only drops out of the highlight when no
`@` actually precedes the name.

* Make channel list rows accessible to TalkBack

Channel rows previously announced as "Channel item, …" with the unread
badge speaking just the digit, the mute icon silent, and no `onClickLabel`
on the row so TalkBack fell back to the generic "double-tap to activate"
hint with no verb.

Push the a11y content down to the leaves so Compose's natural merge
composes them in visual reading order:

- The mute `Icon` (both inline and trailing-bottom variants) now carries a
  localized "muted" `contentDescription`.
- `UnreadCountIndicator` overrides its inner numeric `Text` with a plural
  label ("N unread messages") via `clearAndSetSemantics` on the badge Box.
  Same component is used by `ThreadItem`, which benefits too.
- The outer `Column` drops the static "Channel item" placeholder and
  declares `onClickLabel = "Open conversation"` /
  `onLongClickLabel = "Open conversation options"` on `combinedClickable`.

Channel name, timestamp, read-status icon, and message preview already
expose their own semantics, so the natural merge picks them up unchanged.

Adds the four new strings across all 7 supported locales and drops the
now-unused `stream_compose_cd_channel_item` placeholder.

* Mark list-header title as a TalkBack heading

The channel-list and thread-list header titles already render in heading
typography but had no `heading()` semantics, so TalkBack's swipe-by-heading
gesture skipped them. Add `Modifier.semantics { heading() }` to both the
Connected title and the Offline "Disconnected" Text in
`DefaultListHeaderCenterContent`. The Connecting branch stays untouched
since it shows a transient loading indicator, not a heading.

Because `DefaultListHeaderCenterContent` is shared between
`ChannelListHeader` and `ThreadListHeader`, both screens gain heading
navigation from this single change.

* Include action verb in localized channel-item options label

The English `stream_compose_channel_item_options` is "Open conversation
options" — verb + noun. All seven locale translations dropped the verb
("Opciones de conversación", "Options de la conversation", and so on),
which left the TalkBack action label inconsistent with the parallel
`stream_compose_channel_item_open` ("Abrir conversación" / "Ouvrir la
conversation" / …) where every locale already includes the verb.

Re-add the verb so each `_options` label mirrors the verb-prefix
convention its sibling `_open` label uses.

Author: andremion

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/channels/list/ChannelItem.kt

@@ -47,8 +47,6 @@ import androidx.compose.ui.platform.LocalResources
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.contentDescription
-import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -142,7 +140,8 @@ public fun ChannelItem(
     },
 ) {
     val channel = channelItem.channel
-    val description = stringResource(id = R.string.stream_compose_cd_channel_item)
+    val openLabel = stringResource(R.string.stream_compose_channel_item_open)
+    val optionsLabel = stringResource(R.string.stream_compose_channel_item_options)
 
     val interactionSource = remember { MutableInteractionSource() }
     val isFocused by interactionSource.collectIsFocusedAsState()
@@ -154,13 +153,14 @@ public fun ChannelItem(
             .testTag("Stream_ChannelItem")
             .fillMaxWidth()
             .wrapContentHeight()
-            .semantics { contentDescription = description }
             .applyIf(isFocused) { border(2.dp, ChatTheme.colors.borderUtilityFocused, shape) }
             .clip(shape)
             .applyIf(channelItem.isSelected) { background(ChatTheme.colors.backgroundUtilitySelected, shape) }
             .combinedClickable(
                 onClick = { onChannelClick(channel) },
+                onClickLabel = openLabel,
                 onLongClick = { onChannelLongClick(channel) },
+                onLongClickLabel = optionsLabel,
                 indication = ripple(),
                 interactionSource = interactionSource,
             ),
@@ -283,7 +283,7 @@ private fun TitleRow(
                         .testTag("Stream_ChannelMutedIcon")
                         .size(16.dp),
                     painter = painterResource(id = R.drawable.stream_design_ic_mute),
-                    contentDescription = null,
+                    contentDescription = stringResource(R.string.stream_compose_channel_item_muted),
                     tint = ChatTheme.colors.textTertiary,
                 )
             }
@@ -350,7 +350,7 @@ private fun MessageRow(
                     .testTag("Stream_ChannelMutedIcon")
                     .size(16.dp),
                 painter = painterResource(id = R.drawable.stream_design_ic_mute),
-                contentDescription = null,
+                contentDescription = stringResource(R.string.stream_compose_channel_item_muted),
                 tint = ChatTheme.colors.textTertiary,
             )
         }

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

@@ -36,6 +36,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.heading
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
 import io.getstream.chat.android.compose.R
 import io.getstream.chat.android.compose.ui.components.avatar.AvatarSize
@@ -140,7 +142,8 @@ internal fun RowScope.DefaultListHeaderCenterContent(
                 modifier = Modifier
                     .weight(1f)
                     .wrapContentWidth()
-                    .padding(horizontal = StreamTokens.spacingMd),
+                    .padding(horizontal = StreamTokens.spacingMd)
+                    .semantics { heading() },
                 text = title,
                 style = ChatTheme.typography.headingSmall,
                 maxLines = 1,
@@ -154,7 +157,8 @@ internal fun RowScope.DefaultListHeaderCenterContent(
                 modifier = Modifier
                     .weight(1f)
                     .wrapContentWidth()
-                    .padding(horizontal = StreamTokens.spacingMd),
+                    .padding(horizontal = StreamTokens.spacingMd)
+                    .semantics { heading() },
                 text = stringResource(R.string.stream_compose_disconnected),
                 style = ChatTheme.typography.headingSmall,
                 maxLines = 1,

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/channels/MessagePreviewContent.kt

@@ -25,7 +25,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.clearAndSetSemantics
 import androidx.compose.ui.semantics.text
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
@@ -64,7 +64,7 @@ internal fun MessagePreviewContent(
     Row(
         modifier = modifier
             .testTag("Stream_MessagePreview")
-            .semantics { text = AnnotatedString(fullPreview) },
+            .clearAndSetSemantics { text = AnnotatedString(fullPreview) },
         horizontalArrangement = Arrangement.spacedBy(StreamTokens.spacing3xs),
     ) {
         if (senderName != null) {
@@ -101,7 +101,7 @@ internal fun DraftPreviewContent(
     Row(
         modifier = modifier
             .testTag("Stream_MessagePreview")
-            .semantics { text = AnnotatedString(fullPreview) },
+            .clearAndSetSemantics { text = AnnotatedString(fullPreview) },
         horizontalArrangement = Arrangement.spacedBy(StreamTokens.spacing3xs),
     ) {
         Text(

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/channels/UnreadCountIndicator.kt

@@ -27,9 +27,13 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.pluralStringResource
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 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.StreamTokens
 
@@ -47,12 +51,18 @@ public fun UnreadCountIndicator(
     color: Color = ChatTheme.colors.accentPrimary,
 ) {
     val displayText = if (unreadCount > LimitTooManyUnreadCount) UnreadCountMany else unreadCount.toString()
+    val description = pluralStringResource(
+        R.plurals.stream_compose_channel_item_unread,
+        unreadCount,
+        unreadCount,
+    )
 
     Box(
         modifier = modifier
             .defaultMinSize(minWidth = 20.dp, minHeight = 20.dp)
             .background(shape = CircleShape, color = color)
-            .padding(horizontal = StreamTokens.spacing2xs), // 4dp horizontal content padding
+            .padding(horizontal = StreamTokens.spacing2xs)
+            .clearAndSetSemantics { contentDescription = description },
         contentAlignment = Alignment.Center,
     ) {
         Text(

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/util/TextUtils.kt

@@ -226,16 +226,21 @@ private fun AnnotatedString.Builder.tagUser(
 
         if (start < 0) return@forEach
 
+        // Backtrack one position to include the leading `@`. Clamp to 0 when the mention is at the
+        // start of the text and no `@` precedes it — otherwise the resulting -1 span start crashes
+        // TalkBack's spannable conversion with `setSpan (-1 ...) starts before 0`.
+        val styledStart = (start - 1).coerceAtLeast(0)
+
         addStyle(
             style = SpanStyle(color = mentionsColor),
-            start = start - 1, // -1 to include the @ symbol
+            start = styledStart,
             end = end,
         )
 
         addStringAnnotation(
             tag = AnnotationTagMention,
             annotation = userName,
-            start = start - 1, // -1 to include the @ symbol
+            start = styledStart,
             end = end,
         )
     }

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

@@ -56,7 +56,9 @@
   <string name="stream_compose_avatar_overflow_count">"+%1$d"</string>
   <string name="stream_compose_block_user">"Bloquear usuario"</string>
   <string name="stream_compose_cancel">"Cancelar"</string>
-  <string name="stream_compose_cd_channel_item">"Elemento de canal"</string>
+  <string name="stream_compose_channel_item_muted">"silenciado"</string>
+  <string name="stream_compose_channel_item_open">"Abrir conversación"</string>
+  <string name="stream_compose_channel_item_options">"Abrir opciones de conversación"</string>
   <string name="stream_compose_cd_message_item">"Elemento de mensaje"</string>
   <string name="stream_compose_cd_play_button">"Botón de reproducción"</string>
   <string name="stream_compose_channel_list_draft">"Borrador: "</string>
@@ -259,6 +261,10 @@
   <string name="stream_compose_user_status_online">"Conectado"</string>
   <string name="stream_compose_video_preview">"Vídeo"</string>
   <string name="stream_compose_waiting_for_network">"Esperando conexión de red"</string>
+  <plurals name="stream_compose_channel_item_unread">
+    <item quantity="one">"%d mensaje sin leer"</item>
+    <item quantity="other">"%d mensajes sin leer"</item>
+  </plurals>
   <plurals name="stream_compose_channel_list_typing_many">
     <item quantity="one">"%d persona está escribiendo"</item>
     <item quantity="other">"%d personas están escribiendo"</item>

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

@@ -56,7 +56,9 @@
   <string name="stream_compose_avatar_overflow_count">"+%1$d"</string>
   <string name="stream_compose_block_user">"Bloquer l\'utilisateur"</string>
   <string name="stream_compose_cancel">"Annuler"</string>
-  <string name="stream_compose_cd_channel_item">"Élément de canal"</string>
+  <string name="stream_compose_channel_item_muted">"en sourdine"</string>
+  <string name="stream_compose_channel_item_open">"Ouvrir la conversation"</string>
+  <string name="stream_compose_channel_item_options">"Ouvrir les options de conversation"</string>
   <string name="stream_compose_cd_message_item">"Élément de message"</string>
   <string name="stream_compose_cd_play_button">"Bouton de lecture"</string>
   <string name="stream_compose_channel_list_draft">"Brouillon : "</string>
@@ -259,6 +261,10 @@
   <string name="stream_compose_user_status_online">"En ligne"</string>
   <string name="stream_compose_video_preview">"Vidéo"</string>
   <string name="stream_compose_waiting_for_network">"En attente de réseau"</string>
+  <plurals name="stream_compose_channel_item_unread">
+    <item quantity="one">"%d message non lu"</item>
+    <item quantity="other">"%d messages non lus"</item>
+  </plurals>
   <plurals name="stream_compose_channel_list_typing_many">
     <item quantity="one">"%d personne écrit"</item>
     <item quantity="other">"%d personnes écrivent"</item>

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

@@ -15,6 +15,10 @@
     limitations under the License.
 -->
 <resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
+  <plurals name="stream_compose_channel_item_unread">
+    <item quantity="one">"%d अपठित संदेश"</item>
+    <item quantity="other">"%d अपठित संदेश"</item>
+  </plurals>
   <plurals name="stream_compose_channel_list_typing_many">
     <item quantity="one">"%d व्यक्ति टाइप कर रहा है"</item>
     <item quantity="other">"%d लोग टाइप कर रहे हैं"</item>
@@ -112,7 +116,9 @@
   <string name="stream_compose_avatar_overflow_count">"+%1$d"</string>
   <string name="stream_compose_block_user">"उपयोगकर्ता को ब्लॉक करें"</string>
   <string name="stream_compose_cancel">"रद्द करें"</string>
-  <string name="stream_compose_cd_channel_item">"चैनल आइटम"</string>
+  <string name="stream_compose_channel_item_muted">"म्यूट किया गया"</string>
+  <string name="stream_compose_channel_item_open">"बातचीत खोलें"</string>
+  <string name="stream_compose_channel_item_options">"बातचीत के विकल्प खोलें"</string>
   <string name="stream_compose_cd_message_item">"मैसेज आइटम"</string>
   <string name="stream_compose_cd_play_button">"चलाएँ बटन"</string>
   <string name="stream_compose_channel_list_draft">"ड्राफ़्ट: "</string>

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

@@ -56,7 +56,9 @@
   <string name="stream_compose_avatar_overflow_count">"+%1$d"</string>
   <string name="stream_compose_block_user">"Blokir pengguna"</string>
   <string name="stream_compose_cancel">"Batal"</string>
-  <string name="stream_compose_cd_channel_item">"Item saluran"</string>
+  <string name="stream_compose_channel_item_muted">"dibisukan"</string>
+  <string name="stream_compose_channel_item_open">"Buka percakapan"</string>
+  <string name="stream_compose_channel_item_options">"Buka opsi percakapan"</string>
   <string name="stream_compose_cd_message_item">"Item pesan"</string>
   <string name="stream_compose_cd_play_button">"Tombol putar"</string>
   <string name="stream_compose_channel_list_draft">"Draf: "</string>
@@ -259,6 +261,10 @@
   <string name="stream_compose_user_status_online">"Online"</string>
   <string name="stream_compose_video_preview">"Video"</string>
   <string name="stream_compose_waiting_for_network">"Menunggu jaringan"</string>
+  <plurals name="stream_compose_channel_item_unread">
+    <item quantity="one">"%d pesan belum dibaca"</item>
+    <item quantity="other">"%d pesan belum dibaca"</item>
+  </plurals>
   <plurals name="stream_compose_channel_list_typing_many">
     <item quantity="other">"%d orang sedang mengetik"</item>
   </plurals>

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

@@ -15,6 +15,10 @@
     limitations under the License.
 -->
 <resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
+  <plurals name="stream_compose_channel_item_unread">
+    <item quantity="one">"%d messaggio non letto"</item>
+    <item quantity="other">"%d messaggi non letti"</item>
+  </plurals>
   <plurals name="stream_compose_channel_list_typing_many">
     <item quantity="one">"%d persona sta scrivendo"</item>
     <item quantity="other">"%d persone stanno scrivendo"</item>
@@ -112,7 +116,9 @@
   <string name="stream_compose_avatar_overflow_count">"+%1$d"</string>
   <string name="stream_compose_block_user">"Blocca utente"</string>
   <string name="stream_compose_cancel">"Annulla"</string>
-  <string name="stream_compose_cd_channel_item">"Elemento canale"</string>
+  <string name="stream_compose_channel_item_muted">"silenziato"</string>
+  <string name="stream_compose_channel_item_open">"Apri conversazione"</string>
+  <string name="stream_compose_channel_item_options">"Apri opzioni conversazione"</string>
   <string name="stream_compose_cd_message_item">"Elemento messaggio"</string>
   <string name="stream_compose_cd_play_button">"Pulsante riproduci"</string>
   <string name="stream_compose_channel_list_draft">"Bozza: "</string>