fix: talkBack labels for message avatars and rich text actions [WPB-14771] [WPB-14767] [WPB-14773] [WPB-14812]

app/src/main/kotlin/com/wire/android/ui/home/conversations/messages/item/MessageStatusIndicator.kt

@@ -102,7 +102,7 @@ fun MessageStatusIndicator(
             modifier = modifier,
             painter = painterResource(id = R.drawable.ic_warning_circle),
             tint = errorTint,
-            contentDescription = stringResource(R.string.content_description_message_error_status),
+            contentDescription = null,
         )
     }
 }

app/src/main/kotlin/com/wire/android/ui/home/conversations/messages/item/RegularMessageItemLeading.kt

@@ -19,11 +19,14 @@ package com.wire.android.ui.home.conversations.messages.item
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
+import androidx.compose.ui.res.stringResource
+import com.wire.android.R
 import com.wire.android.model.Clickable
 import com.wire.android.model.UserAvatarData
 import com.wire.android.ui.common.avatar.UserProfileAvatar
 import com.wire.android.ui.common.avatar.UserProfileAvatarType.WithIndicators
 import com.wire.android.ui.home.conversations.model.MessageHeader
+import com.wire.android.ui.common.R as commonR
 
 @Composable
 fun RegularMessageItemLeading(
@@ -35,15 +38,31 @@ fun RegularMessageItemLeading(
     val isProfileRedirectEnabled =
         header.userId != null && !(header.isSenderDeleted || header.isSenderUnavailable)
     if (showAuthor) {
-        val avatarClickable = remember {
-            Clickable(enabled = isProfileRedirectEnabled) {
+        val openProfileDescription = stringResource(
+            id = R.string.content_description_open_user_profile_label
+        )
+        val avatarClickable = remember(isProfileRedirectEnabled, header.userId, openProfileDescription, onOpenProfile) {
+            Clickable(
+                enabled = isProfileRedirectEnabled,
+                onClickDescription = openProfileDescription
+            ) {
                 onOpenProfile(header.userId!!.toString())
             }
         }
+        val avatarStatusDescription = userAvatarData.getAvailabilityStatusDescriptionId()
+            ?.let { stringResource(id = it) }
+            ?: stringResource(id = commonR.string.user_profile_status_none)
+        val avatarContentDescription = listOfNotNull(
+            stringResource(id = commonR.string.content_description_user_avatar),
+            header.username.asString(),
+            avatarStatusDescription,
+            openProfileDescription.takeIf { isProfileRedirectEnabled }
+        ).joinToString(", ")
         // because avatar takes start padding we don't need to add padding to message item
         UserProfileAvatar(
             avatarData = userAvatarData,
             clickable = avatarClickable,
+            contentDescription = avatarContentDescription,
             type = header.guestExpiresAt?.let { WithIndicators.TemporaryUser(it) } ?: WithIndicators.RegularUser(false)
         )
     }

app/src/main/res/values/strings.xml

@@ -106,13 +106,14 @@
     <string name="content_description_delete_the_conversation">Delete the conversation</string>
     <string name="content_description_conversation_phone_icon">Start audio call</string>
     <string name="content_description_welcome_wire_logo">Wire</string>
-    <string name="content_description_conversation_enable_rich_text_mode">Enable rich text mode button</string>
-    <string name="content_description_conversation_enable_drawing_mode">Enable drawing mode button</string>
-    <string name="content_description_conversation_rich_text_header">Rich text formatting Header</string>
-    <string name="content_description_conversation_rich_text_bold">Rich text formatting Bold</string>
-    <string name="content_description_conversation_rich_text_italic">Rich text formatting Italic</string>
-    <string name="content_description_conversation_send_emoticon">Send Emoticon button</string>
-    <string name="content_description_conversation_send_gif">Send GIF button</string>
+    <string name="content_description_conversation_enable_rich_text_mode">Open formatting options</string>
+    <string name="content_description_conversation_enable_drawing_mode">Enable drawing mode</string>
+    <string name="content_description_conversation_rich_text_header">Use a heading</string>
+    <string name="content_description_conversation_rich_text_bold">Use bolded text</string>
+    <string name="content_description_conversation_rich_text_italic">Use italic text</string>
+    <string name="content_description_conversation_rich_text_close">Close formatting options</string>
+    <string name="content_description_conversation_send_emoticon">Send Emoticon</string>
+    <string name="content_description_conversation_send_gif">Send GIF</string>
     <string name="content_description_conversation_mention_someone">Mention someone</string>
     <string name="content_description_conversation_back_btn">Go back to conversation list</string>
     <string name="content_description_conversation_open_details_label">open conversation details</string>
@@ -134,7 +135,7 @@
     <string name="content_description_right_arrow">Right arrow</string>
     <string name="content_description_left_arrow">Go back</string>
     <string name="content_description_mention_icon">Mention icon</string>
-    <string name="content_description_attachment_item">Attach new item to conversation</string>
+    <string name="content_description_attachment_item">Add attachment</string>
     <string name="content_description_open_message_details">Open Message Details</string>
     <string name="content_description_copy_the_message">Copy the message</string>
     <string name="content_description_share_the_file">Share the selected file with other app</string>

core/ui-common/src/main/kotlin/com/wire/android/ui/common/avatar/UserProfileAvatar.kt

@@ -127,7 +127,7 @@
  * @param type type of the avatar, if [UserProfileAvatarType.WithIndicators] then composable will be larger by the indicators borders
  */
 @Composable
 fun UserProfileAvatar(
     avatarData: UserAvatarData,
     modifier: Modifier = Modifier,
     size: Dp = dimensions().avatarDefaultSize,
@@ -148,11 +148,22 @@
         legalHoldIndicatorVisible = false
     ),
 ) {
+    val accessibilityModifier = if (contentDescription != null) {
+        Modifier.clearAndSetSemantics {
+            this.contentDescription = contentDescription
+            if (clickable?.enabled == true) {
+                role = Role.Button
+            }
+        }
+    } else {
+        Modifier
+    }
     Box(
         contentAlignment = Alignment.Center,
         modifier = modifier
             .wrapContentSize()
             .clip(CircleShape)
+            .then(accessibilityModifier)
             .clickable(clickable)
     ) {
         var userStatusIndicatorParams by remember { mutableStateOf(Size.Zero to Offset.Zero) }