Improve channel attachments TalkBack accessibility

stream-chat-android-compose-sample/src/main/AndroidManifest.xml

@@ -114,7 +114,13 @@
             />
         <activity android:name=".feature.reminders.MessageRemindersActivity" />
         <activity android:name=".ui.profile.UserProfileActivity" />
-        <activity android:name=".ui.channel.attachments.ChannelFilesAttachmentsActivity" />
-        <activity android:name=".ui.channel.attachments.ChannelMediaAttachmentsActivity" />
+        <activity
+            android:name=".ui.channel.attachments.ChannelFilesAttachmentsActivity"
+            android:label="@string/stream_ui_channel_attachments_files_title"
+            />
+        <activity
+            android:name=".ui.channel.attachments.ChannelMediaAttachmentsActivity"
+            android:label="@string/stream_ui_channel_attachments_media_title"
+            />
     </application>
 </manifest>

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/channel/attachments/ChannelFilesAttachmentsScreen.kt

@@ -26,6 +26,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.paneTitle
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -44,6 +47,7 @@ import io.getstream.chat.android.previewdata.PreviewMessageData
 import io.getstream.chat.android.previewdata.PreviewUserData
 import io.getstream.chat.android.ui.common.feature.channel.attachments.ChannelAttachmentsViewAction
 import io.getstream.chat.android.ui.common.state.channel.attachments.ChannelAttachmentsViewState
+import io.getstream.chat.android.ui.common.R as UiCommonR
 
 /**
  * Displays the channel files attachments screen.
@@ -97,8 +101,9 @@ private fun ChannelFilesAttachmentsContent(
     onLoadMoreRequested: () -> Unit = {},
 ) {
     val listState = rememberLazyListState()
+    val paneTitleText = stringResource(UiCommonR.string.stream_ui_channel_attachments_files_title)
     Scaffold(
-        modifier = modifier,
+        modifier = modifier.semantics { paneTitle = paneTitleText },
         topBar = {
             ChatTheme.componentFactory.ChannelFilesAttachmentsTopBar(
                 params = ChannelFilesAttachmentsTopBarParams(

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/channel/attachments/ChannelMediaAttachmentsScreen.kt

@@ -30,6 +30,10 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.paneTitle
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -51,6 +55,7 @@ import io.getstream.chat.android.previewdata.PreviewMessageData
 import io.getstream.chat.android.ui.common.feature.channel.attachments.ChannelAttachmentsViewAction
 import io.getstream.chat.android.ui.common.state.channel.attachments.ChannelAttachmentsViewState
 import io.getstream.result.Error
+import io.getstream.chat.android.ui.common.R as UiCommonR
 
 /**
  * Displays the channel media attachments screen.
@@ -109,8 +114,9 @@ private fun ChannelMediaAttachmentsContent(
     onSharingError: (error: Error) -> Unit = {},
 ) {
     val gridState = rememberLazyGridState()
+    val paneTitleText = stringResource(UiCommonR.string.stream_ui_channel_attachments_media_title)
     Scaffold(
-        modifier = modifier,
+        modifier = modifier.semantics { paneTitle = paneTitleText },
         topBar = {
             ChatTheme.componentFactory.ChannelMediaAttachmentsTopBar(
                 params = ChannelMediaAttachmentsTopBarParams(
@@ -144,9 +150,24 @@ internal fun ChannelMediaAttachmentsItem(
 ) {
     val data = item.attachment.upload
         ?: if (item.attachment.isImage()) item.attachment.imageUrl else item.attachment.thumbUrl
+    val isVideo = item.attachment.isVideo()
+    val senderName = item.message.user.name
+    val tileDescription = when {
+        isVideo && senderName.isNotBlank() ->
+            stringResource(UiCommonR.string.stream_ui_channel_attachments_media_item_video_from_user, senderName)
+        isVideo ->
+            stringResource(UiCommonR.string.stream_ui_channel_attachments_media_item_video)
+        senderName.isNotBlank() ->
+            stringResource(UiCommonR.string.stream_ui_channel_attachments_media_item_photo_from_user, senderName)
+        else ->
+            stringResource(UiCommonR.string.stream_ui_channel_attachments_media_item_photo)
+    }
     Box(
-        modifier = Modifier
-            .clickable(onClick = onClick),
+        modifier = modifier
+            .clickable(onClick = onClick)
+            .semantics(mergeDescendants = true) {
+                contentDescription = tileDescription
+            },
     ) {
         StreamAsyncImage(
             modifier = Modifier

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatComponentFactory.kt

@@ -49,6 +49,8 @@ import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 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 androidx.core.net.toUri
 import io.getstream.chat.android.client.ChatClient
@@ -2704,6 +2706,7 @@ public interface ChatComponentFactory {
             title = {
                 Text(
                     text = stringResource(UiCommonR.string.stream_ui_channel_attachments_files_title),
+                    modifier = Modifier.semantics { heading() },
                     style = ChatTheme.typography.headingSmall,
                     maxLines = 1,
                 )
@@ -2770,7 +2773,8 @@ public interface ChatComponentFactory {
                 .background(ChatTheme.colors.backgroundCoreSurfaceSubtle)
                 .topBorder(color = ChatTheme.colors.borderCoreSubtle)
                 .bottomBorder(color = ChatTheme.colors.borderCoreSubtle)
-                .padding(horizontal = StreamTokens.spacingMd, vertical = StreamTokens.spacingXs),
+                .padding(horizontal = StreamTokens.spacingMd, vertical = StreamTokens.spacingXs)
+                .semantics { heading() },
             text = params.label,
             style = ChatTheme.typography.captionEmphasis,
             color = ChatTheme.colors.chatTextSystem,
@@ -2826,6 +2830,7 @@ public interface ChatComponentFactory {
             title = {
                 Text(
                     text = stringResource(UiCommonR.string.stream_ui_channel_attachments_media_title),
+                    modifier = Modifier.semantics { heading() },
                     style = ChatTheme.typography.headingSmall,
                     maxLines = 1,
                 )

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

@@ -25,6 +25,10 @@
   <string name="stream_ui_channel_attachments_media_empty_title">"No hay fotos ni videos"</string>
   <string name="stream_ui_channel_attachments_media_load_error">"¡Error al cargar los archivos multimedia!"</string>
   <string name="stream_ui_channel_attachments_media_title">"Fotos y Videos"</string>
+  <string name="stream_ui_channel_attachments_media_item_photo">"Foto"</string>
+  <string name="stream_ui_channel_attachments_media_item_video">"Vídeo"</string>
+  <string name="stream_ui_channel_attachments_media_item_photo_from_user">"Foto de %1$s"</string>
+  <string name="stream_ui_channel_attachments_media_item_video_from_user">"Vídeo de %1$s"</string>
   <string name="stream_ui_channel_info_add_members_error">"Error al agregar miembros"</string>
   <string name="stream_ui_channel_info_ban_member_error">"Error al suspender al miembro"</string>
   <string name="stream_ui_channel_info_ban_member_modal_no_timeout">"Permanentemente"</string>

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

@@ -25,6 +25,10 @@
   <string name="stream_ui_channel_attachments_media_empty_title">"Aucune photo ni vidéo"</string>
   <string name="stream_ui_channel_attachments_media_load_error">"Échec du chargement des fichiers multimédias !"</string>
   <string name="stream_ui_channel_attachments_media_title">"Photos et Vidéos"</string>
+  <string name="stream_ui_channel_attachments_media_item_photo">"Photo"</string>
+  <string name="stream_ui_channel_attachments_media_item_video">"Vidéo"</string>
+  <string name="stream_ui_channel_attachments_media_item_photo_from_user">"Photo de %1$s"</string>
+  <string name="stream_ui_channel_attachments_media_item_video_from_user">"Vidéo de %1$s"</string>
   <string name="stream_ui_channel_info_add_members_error">"Échec de l\'ajout des membres"</string>
   <string name="stream_ui_channel_info_ban_member_error">"Échec du bannissement du membre"</string>
   <string name="stream_ui_channel_info_ban_member_modal_no_timeout">"Définitivement"</string>

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

@@ -25,6 +25,10 @@
   <string name="stream_ui_channel_attachments_media_empty_title">"कोई फ़ोटो या वीडियो नहीं"</string>
   <string name="stream_ui_channel_attachments_media_load_error">"मीडिया अटैचमेंट लोड करने में विफल!"</string>
   <string name="stream_ui_channel_attachments_media_title">"फ़ोटो &amp; वीडियो"</string>
+  <string name="stream_ui_channel_attachments_media_item_photo">"फ़ोटो"</string>
+  <string name="stream_ui_channel_attachments_media_item_video">"वीडियो"</string>
+  <string name="stream_ui_channel_attachments_media_item_photo_from_user">"%1$s की फ़ोटो"</string>
+  <string name="stream_ui_channel_attachments_media_item_video_from_user">"%1$s का वीडियो"</string>
   <string name="stream_ui_channel_info_add_members_error">"सदस्य जोड़ने में विफल"</string>
   <string name="stream_ui_channel_info_ban_member_error">"सदस्य को प्रतिबंधित करने में विफल"</string>
   <string name="stream_ui_channel_info_ban_member_modal_no_timeout">"स्थायी रूप से"</string>

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

@@ -25,6 +25,10 @@
   <string name="stream_ui_channel_attachments_media_empty_title">"Tidak ada foto atau video"</string>
   <string name="stream_ui_channel_attachments_media_load_error">"Gagal memuat lampiran media!"</string>
   <string name="stream_ui_channel_attachments_media_title">"Foto &amp; Video"</string>
+  <string name="stream_ui_channel_attachments_media_item_photo">"Foto"</string>
+  <string name="stream_ui_channel_attachments_media_item_video">"Video"</string>
+  <string name="stream_ui_channel_attachments_media_item_photo_from_user">"Foto dari %1$s"</string>
+  <string name="stream_ui_channel_attachments_media_item_video_from_user">"Video dari %1$s"</string>
   <string name="stream_ui_channel_info_add_members_error">"Gagal menambahkan anggota"</string>
   <string name="stream_ui_channel_info_ban_member_error">"Gagal melarang anggota"</string>
   <string name="stream_ui_channel_info_ban_member_modal_no_timeout">"Secara permanen"</string>

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

@@ -25,6 +25,10 @@
   <string name="stream_ui_channel_attachments_media_empty_title">"Nessuna foto o video"</string>
   <string name="stream_ui_channel_attachments_media_load_error">"Impossibile caricare gli allegati multimediali!"</string>
   <string name="stream_ui_channel_attachments_media_title">"Foto &amp; Video"</string>
+  <string name="stream_ui_channel_attachments_media_item_photo">"Foto"</string>
+  <string name="stream_ui_channel_attachments_media_item_video">"Video"</string>
+  <string name="stream_ui_channel_attachments_media_item_photo_from_user">"Foto di %1$s"</string>
+  <string name="stream_ui_channel_attachments_media_item_video_from_user">"Video di %1$s"</string>
   <string name="stream_ui_channel_info_add_members_error">"Impossibile aggiungere i membri"</string>
   <string name="stream_ui_channel_info_ban_member_error">"Impossibile bannare il membro"</string>
   <string name="stream_ui_channel_info_ban_member_modal_no_timeout">"Permanentemente"</string>

stream-chat-android-ui-common/src/main/res/values-ja/strings.xml

@@ -25,6 +25,10 @@
   <string name="stream_ui_channel_attachments_media_empty_title">"写真・動画はありません"</string>
   <string name="stream_ui_channel_attachments_media_load_error">"メディア添付の読み込みに失敗しました！"</string>
   <string name="stream_ui_channel_attachments_media_title">"写真 &amp; 動画"</string>
+  <string name="stream_ui_channel_attachments_media_item_photo">"写真"</string>
+  <string name="stream_ui_channel_attachments_media_item_video">"動画"</string>
+  <string name="stream_ui_channel_attachments_media_item_photo_from_user">"%1$sからの写真"</string>
+  <string name="stream_ui_channel_attachments_media_item_video_from_user">"%1$sからの動画"</string>
   <string name="stream_ui_channel_info_add_members_error">"メンバーの追加に失敗しました"</string>
   <string name="stream_ui_channel_info_ban_member_error">"メンバーのBANに失敗しました"</string>
   <string name="stream_ui_channel_info_ban_member_modal_no_timeout">"永久"</string>

stream-chat-android-ui-common/src/main/res/values-ko/strings.xml

@@ -25,6 +25,10 @@
   <string name="stream_ui_channel_attachments_media_empty_title">"사진 또는 동영상 없음"</string>
   <string name="stream_ui_channel_attachments_media_load_error">"미디어 첨부를 로드하지 못했습니다!"</string>
   <string name="stream_ui_channel_attachments_media_title">"사진 &amp; 동영상"</string>
+  <string name="stream_ui_channel_attachments_media_item_photo">"사진"</string>
+  <string name="stream_ui_channel_attachments_media_item_video">"동영상"</string>
+  <string name="stream_ui_channel_attachments_media_item_photo_from_user">"%1$s님의 사진"</string>
+  <string name="stream_ui_channel_attachments_media_item_video_from_user">"%1$s님의 동영상"</string>
   <string name="stream_ui_channel_info_add_members_error">"멤버 추가에 실패했습니다"</string>
   <string name="stream_ui_channel_info_ban_member_error">"멤버 차단에 실패했습니다"</string>
   <string name="stream_ui_channel_info_ban_member_modal_no_timeout">"영구적"</string>

stream-chat-android-ui-common/src/main/res/values/strings.xml

@@ -199,6 +199,10 @@
     <string name="stream_ui_channel_attachments_media_empty_title">No photos or videos</string>
     <string name="stream_ui_channel_attachments_media_empty_text">Share a photo or video to see it here</string>
     <string name="stream_ui_channel_attachments_media_load_error">Failed to load media attachments!</string>
+    <string name="stream_ui_channel_attachments_media_item_photo">Photo</string>
+    <string name="stream_ui_channel_attachments_media_item_video">Video</string>
+    <string name="stream_ui_channel_attachments_media_item_photo_from_user">Photo from %1$s</string>
+    <string name="stream_ui_channel_attachments_media_item_video_from_user">Video from %1$s</string>
 
     <string name="stream_ui_channel_attachments_files_title">Files</string>
     <string name="stream_ui_channel_attachments_files_empty_title">No files</string>