feat: Add accessibility string to ConversationList [WPB-9789] 🍒 (#3567)

Co-authored-by: boris <[email protected]>

app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/JoinButton.kt

@@ -67,7 +67,8 @@ fun JoinButton(
         contentPadding = PaddingValues(
             horizontal = dimensions().spacing8x,
             vertical = dimensions().spacing4x
-        )
+        ),
+        onClickDescription = stringResource(R.string.content_description_join_call_label)
     )
 }
 

app/src/main/kotlin/com/wire/android/ui/connection/ConnectionActionButton.kt

@@ -123,7 +123,7 @@ fun ConnectionActionButton(
             leadingIcon = {
                 Icon(
                     painter = painterResource(id = R.drawable.ic_check_tick),
-                    contentDescription = stringResource(R.string.content_description_right_arrow),
+                    contentDescription = null,
                     modifier = Modifier.padding(dimensions().spacing8x)
                 )
             },
@@ -139,7 +139,7 @@ fun ConnectionActionButton(
                 leadingIcon = {
                     Icon(
                         painter = painterResource(id = R.drawable.ic_check_tick),
-                        contentDescription = stringResource(R.string.content_description_right_arrow),
+                        contentDescription = null,
                         modifier = Modifier.padding(dimensions().spacing8x)
                     )
                 },
@@ -159,7 +159,7 @@ fun ConnectionActionButton(
                 leadingIcon = {
                     Icon(
                         painter = painterResource(id = R.drawable.ic_close),
-                        contentDescription = stringResource(R.string.content_description_right_arrow),
+                        contentDescription = null,
                         modifier = Modifier.padding(dimensions().spacing8x)
                     )
                 },
@@ -194,7 +194,7 @@ fun ConnectionActionButton(
             leadingIcon = {
                 Icon(
                     painter = painterResource(id = R.drawable.ic_add_contact),
-                    contentDescription = stringResource(R.string.content_description_right_arrow),
+                    contentDescription = null,
                     modifier = Modifier.padding(dimensions().spacing8x)
                 )
             },

app/src/main/kotlin/com/wire/android/ui/home/HomeTopBar.kt

@@ -68,11 +68,15 @@ fun HomeTopBar(
                     onButtonClicked = { onOpenConversationFilter(navigationItem.currentFilter()) }
                 )
             }
+            val openLabel = stringResource(R.string.content_description_open_label)
             UserProfileAvatar(
                 avatarData = userAvatarData,
-                clickable = remember { Clickable(enabled = true) { onNavigateToSelfUserProfile() } },
+                clickable = remember {
+                    Clickable(enabled = true, onClickDescription = openLabel) { onNavigateToSelfUserProfile() }
+                },
                 type = UserProfileAvatarType.WithIndicators.RegularUser(legalHoldIndicatorVisible = withLegalHoldIndicator),
-                shouldShowCreateTeamUnreadIndicator = shouldShowCreateTeamUnreadIndicator
+                shouldShowCreateTeamUnreadIndicator = shouldShowCreateTeamUnreadIndicator,
+                contentDescription = stringResource(R.string.content_description_home_profile_btn)
             )
         },
         elevation = elevation,

app/src/main/kotlin/com/wire/android/ui/home/conversations/details/GroupConversationDetailsScreen.kt

@@ -337,8 +337,7 @@ private fun GroupConversationDetailsContent(
                     WireTopAppBarTitle(
                         title = stringResource(R.string.conversation_details_title),
                         style = MaterialTheme.wireTypography.title01,
-                        maxLines = 2,
-                        contentDescription = stringResource(id = R.string.content_description_conversation_details_header)
+                        maxLines = 2
                     )
                     VerificationInfo(conversationSheetContent)
                 },

app/src/main/kotlin/com/wire/android/ui/home/conversations/details/editguestaccess/EditGuestAccessScreen.kt

@@ -102,12 +102,12 @@ fun EditGuestAccessScreen(
     WireScaffold(
         modifier = modifier,
         topBar = {
+            val title = stringResource(id = R.string.conversation_options_guests_label)
             WireCenterAlignedTopAppBar(
                 elevation = scrollState.rememberTopBarElevationState().value,
                 navigationIconType = NavigationIconType.Back(R.string.content_description_edit_guests_option_back_btn),
                 onNavigationPressed = navigator::navigateBack,
-                title = stringResource(id = R.string.conversation_options_guests_label),
-                titleContentDescription = stringResource(id = R.string.content_description_edit_guests_option_title)
+                title = title
             )
         }
     ) { internalPadding ->

app/src/main/kotlin/com/wire/android/ui/home/conversations/details/editselfdeletingmessages/EditSelfDeletingMessagesScreen.kt

@@ -73,11 +73,11 @@ fun EditSelfDeletingMessagesScreen(
 
     WireScaffold(
         topBar = {
+            val title = stringResource(id = R.string.self_deleting_messages_title)
             WireCenterAlignedTopAppBar(
                 elevation = scrollState.rememberTopBarElevationState().value,
                 onNavigationPressed = navigator::navigateBack,
-                title = stringResource(id = R.string.self_deleting_messages_title),
-                titleContentDescription = stringResource(id = R.string.content_description_edit_self_delete_title),
+                title = title,
                 navigationIconType = NavigationIconType.Back(R.string.content_description_edit_self_delete_back_btn)
             )
         }

app/src/main/kotlin/com/wire/android/ui/home/conversationslist/common/ConversationItemFactory.kt

@@ -73,23 +73,29 @@ fun ConversationItemFactory(
     joinCall: (ConversationId) -> Unit = {},
     onAudioPermissionPermanentlyDenied: () -> Unit = {}
 ) {
+    val openConversationOptionDescription = stringResource(R.string.content_description_conversation_details_more_btn)
+    val openUserProfileDescription = stringResource(R.string.content_description_open_user_profile_label)
+    val openConversationDescription = stringResource(R.string.content_description_open_conversation_label)
     val onConversationItemClick = remember(conversation) {
-        Clickable(
-            enabled = true,
-            onClick = {
-                when (val lastEvent = conversation.lastMessageContent) {
-                    is UILastMessageContent.Connection -> openUserProfile(lastEvent.userId)
-                    else -> openConversation(conversation)
-                }
-            },
-            onLongClick = {
-                when (conversation.lastMessageContent) {
-                    is UILastMessageContent.Connection -> {}
-                    else -> openMenu(conversation)
-                }
-            }
-        )
+        when (val lastEvent = conversation.lastMessageContent) {
+            is UILastMessageContent.Connection -> Clickable(
+                enabled = true,
+                onClick = { openUserProfile(lastEvent.userId) },
+                onLongClick = null,
+                onClickDescription = openUserProfileDescription,
+                onLongClickDescription = null
+            )
+
+            else -> Clickable(
+                enabled = true,
+                onClick = { openConversation(conversation) },
+                onLongClick = { openMenu(conversation) },
+                onClickDescription = openConversationDescription,
+                onLongClickDescription = openConversationOptionDescription,
+            )
+        }
     }
+
     GeneralConversationItem(
         modifier = modifier,
         conversation = conversation,

app/src/main/kotlin/com/wire/android/ui/home/conversationslist/common/EventBadge.kt

@@ -149,6 +149,7 @@ fun ConnectRequestBadge(modifier: Modifier = Modifier) {
 fun ConnectPendingRequestBadge(modifier: Modifier = Modifier) {
     WireItemLabel(
         text = stringResource(id = R.string.connection_pending_label),
+        contentDescription = stringResource(R.string.content_description_pending_connection_badge),
         modifier = modifier
     )
 }

app/src/main/kotlin/com/wire/android/ui/userprofile/common/UserProfileInfo.kt

@@ -340,11 +340,13 @@ fun QRCodeIcon(
     modifier: Modifier = Modifier,
 ) {
     val contentDescription = stringResource(id = R.string.user_profile_qr_code_share_link)
+    val clickDescription = stringResource(id = R.string.content_description_share_label)
     WireSecondaryButton(
         modifier = modifier.semantics { this.contentDescription = contentDescription },
         leadingIcon = Icons.Filled.QrCode.Icon(),
         contentPadding = PaddingValues(0.dp),
         onClick = onQrCodeClick,
+        onClickDescription = clickDescription,
         fillMaxWidth = false,
         minSize = MaterialTheme.wireDimensions.buttonSmallMinSize,
         minClickableSize = MaterialTheme.wireDimensions.buttonMinClickableSize,

app/src/main/kotlin/com/wire/android/ui/userprofile/other/OtherUserProfileScreen.kt

@@ -396,10 +396,12 @@ private fun TopBarHeader(
     onNavigateBack: () -> Unit,
     openConversationBottomSheet: () -> Unit
 ) {
-    val navigationIconType = if (state.groupState == null) {
-        NavigationIconType.Close()
-    } else {
+    val navigationIconType = if (state.groupState != null) {
         NavigationIconType.Close(R.string.content_description_user_profile_close_btn)
+    } else if (state.connectionState == ConnectionState.PENDING || state.connectionState == ConnectionState.IGNORED) {
+        NavigationIconType.Close(R.string.content_description_connection_request_close_btn)
+    } else {
+        NavigationIconType.Close()
     }
 
     WireCenterAlignedTopAppBar(
@@ -409,8 +411,7 @@ private fun TopBarHeader(
             WireTopAppBarTitle(
                 title = stringResource(id = R.string.user_profile_title),
                 style = MaterialTheme.wireTypography.title01,
-                maxLines = 2,
-                contentDescription = stringResource(id = R.string.content_description_user_profile_heading)
+                maxLines = 2
             )
         },
         elevation = elevation,

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

@@ -118,7 +118,7 @@
     <string name="content_description_conversation_send_gif">Send GIF button</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_new_conversation">Start a new conversation</string>
+    <string name="content_description_new_conversation">Search for people or create a new group</string>
     <string name="content_description_back_button">Back button</string>
     <string name="content_description_send_button">Send</string>
     <string name="content_description_timed_message_button">Self-deleting messages, button</string>
@@ -180,7 +180,6 @@
     <string name="content_description_proteus_certificate_valid">All of all participants are verified (Proteus)</string>
     <string name="content_description_jump_to_last_message">Scroll to end of conversation</string>
     <string name="content_description_location_icon">Location item</string>
-    <string name="content_description_conversation_details_header">Conversation details, heading</string>
     <string name="content_description_conversation_details_more_btn">Open conversation options</string>
     <string name="content_description_conversation_details_options_tab_header">Options</string>
     <string name="content_description_conversation_details_participants_tab_header">Participants</string>
@@ -194,31 +193,37 @@
     <string name="content_description_user_profile_copy_phone_btn">Copy phone</string>
     <string name="content_description_user_profile_copy_email_btn">Copy email</string>
     <string name="content_description_user_profile_open_device_btn">open device details</string>
+    <string name="content_description_connection_request_close_btn">Close connection request view</string>
     <string name="content_description_search_text_in_conversation_btn">Search text messages</string>
     <string name="content_description_see_media_in_conversation_btn">Open overview of pictures and files</string>
     <string name="content_description_add_participants_heading">Add participant, heading</string>
     <string name="content_description_add_participants_close">Close add partipants view</string>
     <string name="content_description_add_participants_search_field">Search people by name or username</string>
     <string name="content_description_add_participants_back_btn">Go back to add participants view</string>
+    <string name="content_description_home_profile_btn">Your profile</string>
+    <string name="content_description_open_label">open</string>
+    <string name="content_description_join_call_label">join a call</string>
+    <string name="content_description_share_label">share</string>
     <string name="content_description_collapse_label">collapse</string>
     <string name="content_description_expand_label">expand</string>
     <string name="content_description_edit_label">edit</string>
     <string name="content_description_select_label">select</string>
     <string name="content_description_unselect_label">unselect</string>
     <string name="content_description_selected_label">selected</string>
+    <string name="content_description_heading_suffix">%s, heading</string>
     <string name="content_description_toggle_setting_label">toggle setting</string>
-    <string name="content_description_edit_guests_option_title">Guests, heading</string>
     <string name="content_description_edit_guests_option_back_btn">Go back to conversation details</string>
-    <string name="content_description_edit_self_delete_title">Self-deleting messages, heading</string>
     <string name="content_description_edit_self_delete_back_btn">Go back to conversation details</string>
     <string name="content_description_open_user_profile_label">open profile</string>
+    <string name="content_description_open_conversation_label">open conversation</string>
     <string name="content_description_open_service_label">open service</string>
     <string name="content_description_open_notification_settings_label">open notification settings</string>
     <string name="content_description_new_conversation_name_back_btn">Go back to new conversation view</string>
     <string name="content_description_new_conversation_name_heading">New group, heading</string>
     <string name="content_description_new_conversation_name_field">Type group name</string>
     <string name="content_description_new_conversation_options_heading">Conversation options, heading</string>
     <string name="content_description_new_conversation_options_back_btn">Go back to new group creation</string>
+    <string name="content_description_pending_connection_badge">pending approval of connection request</string>
     <string name="content_description_empty"> </string>
     <!-- Non translatable strings-->
     <string name="url_android_release_notes" translatable="false">https://medium.com/wire-news/android-updates/home</string>

core/ui-common/src/main/kotlin/com/wire/android/ui/common/button/WireItemLabel.kt

@@ -33,6 +33,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -43,15 +45,17 @@ import com.wire.android.ui.theme.wireTypography
 @Composable
 fun WireItemLabel(
     text: String,
+    modifier: Modifier = Modifier,
     minHeight: Dp = dimensions().badgeSmallMinSize.height,
     minWidth: Dp = dimensions().badgeSmallMinSize.height,
     contentPadding: PaddingValues = PaddingValues(horizontal = dimensions().spacing6x, vertical = dimensions().spacing2x),
     shape: Shape = RoundedCornerShape(dimensions().spacing6x),
-    modifier: Modifier = Modifier
+    contentDescription: String = text
 ) = Box(
     modifier = modifier
         .border(width = 1.dp, color = MaterialTheme.wireColorScheme.divider, shape = shape)
         .padding(contentPadding)
+        .semantics(mergeDescendants = true) { this.contentDescription = contentDescription }
         .wrapContentWidth()
         .wrapContentHeight(),
 ) {

core/ui-common/src/main/kotlin/com/wire/android/ui/common/topappbar/WireCenterAlignedTopAppBar.kt

@@ -34,6 +34,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.TextLayoutResult
@@ -43,6 +44,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.wire.android.ui.common.R
 import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireDimensions
@@ -60,7 +62,7 @@ fun WireCenterAlignedTopAppBar(
     onNavigationPressed: () -> Unit = {},
     navigationIconType: NavigationIconType? = NavigationIconType.Back(),
     elevation: Dp = MaterialTheme.wireDimensions.topBarShadowElevation,
-    titleContentDescription: String? = null,
+    titleContentDescription: String? = stringResource(id = R.string.content_description_heading_suffix, title),
     actions: @Composable RowScope.() -> Unit = {},
     bottomContent: @Composable ColumnScope.() -> Unit = {}
 ) {
@@ -123,7 +125,7 @@ fun WireTopAppBarTitle(
     style: TextStyle,
     modifier: Modifier = Modifier,
     maxLines: Int = 2,
-    contentDescription: String? = null
+    contentDescription: String? = stringResource(id = R.string.content_description_heading_suffix, title)
 ) {
     // There's an ongoing issue about multiline text taking all width available instead of wrapping visible text.
     // https://issuetracker.google.com/issues/206039942

core/ui-common/src/main/res/values/strings.xml

@@ -23,4 +23,6 @@
     <string name="content_description_close_button">Close button</string>
     <string name="content_description_menu_button">Main navigation</string>
     <string name="content_description_drop_down_icon">Drop down arrow</string>
+    <string name="content_description_heading_suffix">%s, heading</string>
+    <string name="content_description_pending_connection_badge">pending approval of connection request</string>
 </resources>