Skip to content

Commit 00f3cf9

Browse files
authored
Improve channel attachments TalkBack accessibility (#6460)
* Add pane title and heading semantics to channel attachments screens * Label channel media tiles with sender and type * Mark channel files section headers as headings * Set android:label for channel attachment Activities * Honor caller modifier on channel media attachments tile
1 parent 724e936 commit 00f3cf9

12 files changed

Lines changed: 76 additions & 7 deletions

File tree

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,13 @@
114114
/>
115115
<activity android:name=".feature.reminders.MessageRemindersActivity" />
116116
<activity android:name=".ui.profile.UserProfileActivity" />
117-
<activity android:name=".ui.channel.attachments.ChannelFilesAttachmentsActivity" />
118-
<activity android:name=".ui.channel.attachments.ChannelMediaAttachmentsActivity" />
117+
<activity
118+
android:name=".ui.channel.attachments.ChannelFilesAttachmentsActivity"
119+
android:label="@string/stream_ui_channel_attachments_files_title"
120+
/>
121+
<activity
122+
android:name=".ui.channel.attachments.ChannelMediaAttachmentsActivity"
123+
android:label="@string/stream_ui_channel_attachments_media_title"
124+
/>
119125
</application>
120126
</manifest>

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ import androidx.compose.runtime.Composable
2626
import androidx.compose.runtime.getValue
2727
import androidx.compose.ui.Alignment
2828
import androidx.compose.ui.Modifier
29+
import androidx.compose.ui.res.stringResource
30+
import androidx.compose.ui.semantics.paneTitle
31+
import androidx.compose.ui.semantics.semantics
2932
import androidx.compose.ui.tooling.preview.Preview
3033
import androidx.compose.ui.unit.dp
3134
import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -44,6 +47,7 @@ import io.getstream.chat.android.previewdata.PreviewMessageData
4447
import io.getstream.chat.android.previewdata.PreviewUserData
4548
import io.getstream.chat.android.ui.common.feature.channel.attachments.ChannelAttachmentsViewAction
4649
import io.getstream.chat.android.ui.common.state.channel.attachments.ChannelAttachmentsViewState
50+
import io.getstream.chat.android.ui.common.R as UiCommonR
4751

4852
/**
4953
* Displays the channel files attachments screen.
@@ -97,8 +101,9 @@ private fun ChannelFilesAttachmentsContent(
97101
onLoadMoreRequested: () -> Unit = {},
98102
) {
99103
val listState = rememberLazyListState()
104+
val paneTitleText = stringResource(UiCommonR.string.stream_ui_channel_attachments_files_title)
100105
Scaffold(
101-
modifier = modifier,
106+
modifier = modifier.semantics { paneTitle = paneTitleText },
102107
topBar = {
103108
ChatTheme.componentFactory.ChannelFilesAttachmentsTopBar(
104109
params = ChannelFilesAttachmentsTopBarParams(

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

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ import androidx.compose.runtime.getValue
3030
import androidx.compose.ui.Alignment
3131
import androidx.compose.ui.Modifier
3232
import androidx.compose.ui.layout.ContentScale
33+
import androidx.compose.ui.res.stringResource
34+
import androidx.compose.ui.semantics.contentDescription
35+
import androidx.compose.ui.semantics.paneTitle
36+
import androidx.compose.ui.semantics.semantics
3337
import androidx.compose.ui.tooling.preview.Preview
3438
import androidx.compose.ui.unit.dp
3539
import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -51,6 +55,7 @@ import io.getstream.chat.android.previewdata.PreviewMessageData
5155
import io.getstream.chat.android.ui.common.feature.channel.attachments.ChannelAttachmentsViewAction
5256
import io.getstream.chat.android.ui.common.state.channel.attachments.ChannelAttachmentsViewState
5357
import io.getstream.result.Error
58+
import io.getstream.chat.android.ui.common.R as UiCommonR
5459

5560
/**
5661
* Displays the channel media attachments screen.
@@ -109,8 +114,9 @@ private fun ChannelMediaAttachmentsContent(
109114
onSharingError: (error: Error) -> Unit = {},
110115
) {
111116
val gridState = rememberLazyGridState()
117+
val paneTitleText = stringResource(UiCommonR.string.stream_ui_channel_attachments_media_title)
112118
Scaffold(
113-
modifier = modifier,
119+
modifier = modifier.semantics { paneTitle = paneTitleText },
114120
topBar = {
115121
ChatTheme.componentFactory.ChannelMediaAttachmentsTopBar(
116122
params = ChannelMediaAttachmentsTopBarParams(
@@ -144,9 +150,24 @@ internal fun ChannelMediaAttachmentsItem(
144150
) {
145151
val data = item.attachment.upload
146152
?: if (item.attachment.isImage()) item.attachment.imageUrl else item.attachment.thumbUrl
153+
val isVideo = item.attachment.isVideo()
154+
val senderName = item.message.user.name
155+
val tileDescription = when {
156+
isVideo && senderName.isNotBlank() ->
157+
stringResource(UiCommonR.string.stream_ui_channel_attachments_media_item_video_from_user, senderName)
158+
isVideo ->
159+
stringResource(UiCommonR.string.stream_ui_channel_attachments_media_item_video)
160+
senderName.isNotBlank() ->
161+
stringResource(UiCommonR.string.stream_ui_channel_attachments_media_item_photo_from_user, senderName)
162+
else ->
163+
stringResource(UiCommonR.string.stream_ui_channel_attachments_media_item_photo)
164+
}
147165
Box(
148-
modifier = Modifier
149-
.clickable(onClick = onClick),
166+
modifier = modifier
167+
.clickable(onClick = onClick)
168+
.semantics(mergeDescendants = true) {
169+
contentDescription = tileDescription
170+
},
150171
) {
151172
StreamAsyncImage(
152173
modifier = Modifier

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ import androidx.compose.ui.platform.LocalInspectionMode
4949
import androidx.compose.ui.platform.testTag
5050
import androidx.compose.ui.res.painterResource
5151
import androidx.compose.ui.res.stringResource
52+
import androidx.compose.ui.semantics.heading
53+
import androidx.compose.ui.semantics.semantics
5254
import androidx.compose.ui.unit.dp
5355
import androidx.core.net.toUri
5456
import io.getstream.chat.android.client.ChatClient
@@ -2704,6 +2706,7 @@ public interface ChatComponentFactory {
27042706
title = {
27052707
Text(
27062708
text = stringResource(UiCommonR.string.stream_ui_channel_attachments_files_title),
2709+
modifier = Modifier.semantics { heading() },
27072710
style = ChatTheme.typography.headingSmall,
27082711
maxLines = 1,
27092712
)
@@ -2770,7 +2773,8 @@ public interface ChatComponentFactory {
27702773
.background(ChatTheme.colors.backgroundCoreSurfaceSubtle)
27712774
.topBorder(color = ChatTheme.colors.borderCoreSubtle)
27722775
.bottomBorder(color = ChatTheme.colors.borderCoreSubtle)
2773-
.padding(horizontal = StreamTokens.spacingMd, vertical = StreamTokens.spacingXs),
2776+
.padding(horizontal = StreamTokens.spacingMd, vertical = StreamTokens.spacingXs)
2777+
.semantics { heading() },
27742778
text = params.label,
27752779
style = ChatTheme.typography.captionEmphasis,
27762780
color = ChatTheme.colors.chatTextSystem,
@@ -2826,6 +2830,7 @@ public interface ChatComponentFactory {
28262830
title = {
28272831
Text(
28282832
text = stringResource(UiCommonR.string.stream_ui_channel_attachments_media_title),
2833+
modifier = Modifier.semantics { heading() },
28292834
style = ChatTheme.typography.headingSmall,
28302835
maxLines = 1,
28312836
)

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
<string name="stream_ui_channel_attachments_media_empty_title">"No hay fotos ni videos"</string>
2626
<string name="stream_ui_channel_attachments_media_load_error">"¡Error al cargar los archivos multimedia!"</string>
2727
<string name="stream_ui_channel_attachments_media_title">"Fotos y Videos"</string>
28+
<string name="stream_ui_channel_attachments_media_item_photo">"Foto"</string>
29+
<string name="stream_ui_channel_attachments_media_item_video">"Vídeo"</string>
30+
<string name="stream_ui_channel_attachments_media_item_photo_from_user">"Foto de %1$s"</string>
31+
<string name="stream_ui_channel_attachments_media_item_video_from_user">"Vídeo de %1$s"</string>
2832
<string name="stream_ui_channel_info_add_members_error">"Error al agregar miembros"</string>
2933
<string name="stream_ui_channel_info_ban_member_error">"Error al suspender al miembro"</string>
3034
<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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
<string name="stream_ui_channel_attachments_media_empty_title">"Aucune photo ni vidéo"</string>
2626
<string name="stream_ui_channel_attachments_media_load_error">"Échec du chargement des fichiers multimédias !"</string>
2727
<string name="stream_ui_channel_attachments_media_title">"Photos et Vidéos"</string>
28+
<string name="stream_ui_channel_attachments_media_item_photo">"Photo"</string>
29+
<string name="stream_ui_channel_attachments_media_item_video">"Vidéo"</string>
30+
<string name="stream_ui_channel_attachments_media_item_photo_from_user">"Photo de %1$s"</string>
31+
<string name="stream_ui_channel_attachments_media_item_video_from_user">"Vidéo de %1$s"</string>
2832
<string name="stream_ui_channel_info_add_members_error">"Échec de l\'ajout des membres"</string>
2933
<string name="stream_ui_channel_info_ban_member_error">"Échec du bannissement du membre"</string>
3034
<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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
<string name="stream_ui_channel_attachments_media_empty_title">"कोई फ़ोटो या वीडियो नहीं"</string>
2626
<string name="stream_ui_channel_attachments_media_load_error">"मीडिया अटैचमेंट लोड करने में विफल!"</string>
2727
<string name="stream_ui_channel_attachments_media_title">"फ़ोटो &amp; वीडियो"</string>
28+
<string name="stream_ui_channel_attachments_media_item_photo">"फ़ोटो"</string>
29+
<string name="stream_ui_channel_attachments_media_item_video">"वीडियो"</string>
30+
<string name="stream_ui_channel_attachments_media_item_photo_from_user">"%1$s की फ़ोटो"</string>
31+
<string name="stream_ui_channel_attachments_media_item_video_from_user">"%1$s का वीडियो"</string>
2832
<string name="stream_ui_channel_info_add_members_error">"सदस्य जोड़ने में विफल"</string>
2933
<string name="stream_ui_channel_info_ban_member_error">"सदस्य को प्रतिबंधित करने में विफल"</string>
3034
<string name="stream_ui_channel_info_ban_member_modal_no_timeout">"स्थायी रूप से"</string>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
<string name="stream_ui_channel_attachments_media_empty_title">"Tidak ada foto atau video"</string>
2626
<string name="stream_ui_channel_attachments_media_load_error">"Gagal memuat lampiran media!"</string>
2727
<string name="stream_ui_channel_attachments_media_title">"Foto &amp; Video"</string>
28+
<string name="stream_ui_channel_attachments_media_item_photo">"Foto"</string>
29+
<string name="stream_ui_channel_attachments_media_item_video">"Video"</string>
30+
<string name="stream_ui_channel_attachments_media_item_photo_from_user">"Foto dari %1$s"</string>
31+
<string name="stream_ui_channel_attachments_media_item_video_from_user">"Video dari %1$s"</string>
2832
<string name="stream_ui_channel_info_add_members_error">"Gagal menambahkan anggota"</string>
2933
<string name="stream_ui_channel_info_ban_member_error">"Gagal melarang anggota"</string>
3034
<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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
<string name="stream_ui_channel_attachments_media_empty_title">"Nessuna foto o video"</string>
2626
<string name="stream_ui_channel_attachments_media_load_error">"Impossibile caricare gli allegati multimediali!"</string>
2727
<string name="stream_ui_channel_attachments_media_title">"Foto &amp; Video"</string>
28+
<string name="stream_ui_channel_attachments_media_item_photo">"Foto"</string>
29+
<string name="stream_ui_channel_attachments_media_item_video">"Video"</string>
30+
<string name="stream_ui_channel_attachments_media_item_photo_from_user">"Foto di %1$s"</string>
31+
<string name="stream_ui_channel_attachments_media_item_video_from_user">"Video di %1$s"</string>
2832
<string name="stream_ui_channel_info_add_members_error">"Impossibile aggiungere i membri"</string>
2933
<string name="stream_ui_channel_info_ban_member_error">"Impossibile bannare il membro"</string>
3034
<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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
<string name="stream_ui_channel_attachments_media_empty_title">"写真・動画はありません"</string>
2626
<string name="stream_ui_channel_attachments_media_load_error">"メディア添付の読み込みに失敗しました!"</string>
2727
<string name="stream_ui_channel_attachments_media_title">"写真 &amp; 動画"</string>
28+
<string name="stream_ui_channel_attachments_media_item_photo">"写真"</string>
29+
<string name="stream_ui_channel_attachments_media_item_video">"動画"</string>
30+
<string name="stream_ui_channel_attachments_media_item_photo_from_user">"%1$sからの写真"</string>
31+
<string name="stream_ui_channel_attachments_media_item_video_from_user">"%1$sからの動画"</string>
2832
<string name="stream_ui_channel_info_add_members_error">"メンバーの追加に失敗しました"</string>
2933
<string name="stream_ui_channel_info_ban_member_error">"メンバーのBANに失敗しました"</string>
3034
<string name="stream_ui_channel_info_ban_member_modal_no_timeout">"永久"</string>

0 commit comments

Comments
 (0)