feat: Add accessibility strings to conversation details [WPB-9784]

app/src/main/kotlin/com/wire/android/ui/authentication/devices/register/RegisterDeviceScreen.kt

@@ -146,7 +146,7 @@ private fun RegisterDeviceContent(
             WireCenterAlignedTopAppBar(
                 elevation = dimensions().spacing0x,
                 title = stringResource(id = R.string.register_device_title),
-                navigationIconType = NavigationIconType.Close,
+                navigationIconType = NavigationIconType.Close(),
                 onNavigationPressed = onBackButtonClicked
             )
         },

app/src/main/kotlin/com/wire/android/ui/authentication/devices/remove/RemoveDeviceTopBar.kt

@@ -39,7 +39,7 @@ fun RemoveDeviceTopBar(elevation: Dp, onBackButtonClicked: () -> Unit) {
     WireCenterAlignedTopAppBar(
         elevation = elevation,
         title = stringResource(R.string.remove_device_title),
-        navigationIconType = NavigationIconType.Close,
+        navigationIconType = NavigationIconType.Close(),
         onNavigationPressed = onBackButtonClicked
     ) {
         Text(

app/src/main/kotlin/com/wire/android/ui/authentication/welcome/WelcomeScreen.kt

@@ -135,7 +135,7 @@ private fun WelcomeContent(
             WireCenterAlignedTopAppBar(
                 elevation = dimensions().spacing0x,
                 title = "",
-                navigationIconType = NavigationIconType.Close,
+                navigationIconType = NavigationIconType.Close(),
                 onNavigationPressed = navigateBack
             )
         } else {

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

@@ -18,7 +18,7 @@
 
 package com.wire.android.ui.common
 
-import androidx.compose.foundation.selection.selectable
+import android.annotation.SuppressLint
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -29,13 +29,17 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.platform.LocalLifecycleOwner
-import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.stateDescription
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.flowWithLifecycle
 import com.google.accompanist.placeholder.PlaceholderHighlight
 import com.google.accompanist.placeholder.placeholder
 import com.google.accompanist.placeholder.shimmer
+import com.wire.android.R
+import com.wire.android.model.Clickable
 import com.wire.android.ui.home.conversations.model.messagetypes.asset.UIAssetMessage
 import com.wire.android.ui.theme.wireColorScheme
 import com.wire.android.ui.theme.wireDimensions
@@ -53,13 +57,21 @@ import kotlin.coroutines.EmptyCoroutineContext
 
 // todo try to move as much as we can to common
 
+@SuppressLint("ComposeComposableModifier")
 @Composable
-fun Modifier.selectableBackground(isSelected: Boolean, onClick: () -> Unit): Modifier =
-    this.selectable(
-        selected = isSelected,
+fun Modifier.selectableBackground(isSelected: Boolean, onClick: () -> Unit): Modifier {
+    val onItemClick = Clickable(
+        enabled = !isSelected,
         onClick = onClick,
-        role = Role.Tab
+        onClickDescription = stringResource(id = R.string.content_description_select_label)
     )
+    val selectedDescription = stringResource(id = R.string.content_description_selected_label)
+
+    return this
+        .clickable(onItemClick)
+        .clickableDescriptions(onItemClick)
+        .semantics { stateDescription = if (isSelected) selectedDescription else "" }
+}
 
 @Composable
 fun Modifier.shimmerPlaceholder(

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

@@ -32,11 +32,12 @@ import com.wire.android.ui.theme.wireDimensions
 
 @Composable
 fun ArrowRightIcon(
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    @StringRes contentDescription: Int = R.string.content_description_right_arrow,
 ) {
     ArrowIcon(
         arrowIcon = R.drawable.ic_arrow_right,
-        contentDescription = R.string.content_description_right_arrow,
+        contentDescription = contentDescription,
         modifier = modifier
     )
 }

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

@@ -18,6 +18,7 @@
 
 package com.wire.android.ui.common
 
+import androidx.annotation.StringRes
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import com.wire.android.R
@@ -27,13 +28,14 @@ import com.wire.android.ui.common.button.WireSecondaryIconButton
 @Composable
 fun MoreOptionIcon(
     onButtonClicked: () -> Unit,
+    modifier: Modifier = Modifier,
     state: WireButtonState = WireButtonState.Default,
-    modifier: Modifier = Modifier
+    @StringRes contentDescription: Int = R.string.content_description_show_more_options
 ) {
     WireSecondaryIconButton(
         onButtonClicked = onButtonClicked,
         iconResource = R.drawable.ic_more,
-        contentDescription = R.string.content_description_show_more_options,
+        contentDescription = contentDescription,
         state = state,
         modifier = modifier
     )

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

@@ -134,6 +134,7 @@ fun UserProfileAvatar(
     clickable: Clickable? = null,
     showPlaceholderIfNoAsset: Boolean = true,
     withCrossfadeAnimation: Boolean = false,
+    contentDescription: String? = null,
     type: UserProfileAvatarType = UserProfileAvatarType.WithIndicators.RegularUser(legalHoldIndicatorVisible = false),
 ) {
     Box(
@@ -142,6 +143,7 @@ fun UserProfileAvatar(
             .wrapContentSize()
             .clip(CircleShape)
             .clickable(clickable)
+            .clickableDescriptions(clickable)
     ) {
         var userStatusIndicatorParams by remember { mutableStateOf(Size.Zero to Offset.Zero) }
         Box(
@@ -167,6 +169,7 @@ fun UserProfileAvatar(
                 withCrossfadeAnimation = withCrossfadeAnimation,
                 type = type,
                 size = size,
+                contentDescription = contentDescription,
                 modifier = Modifier
                     .padding(padding)
                     .clip(CircleShape)
@@ -224,14 +227,15 @@ private fun UserAvatar(
     type: UserProfileAvatarType,
     size: Dp,
     modifier: Modifier = Modifier,
+    contentDescription: String? = stringResource(R.string.content_description_user_avatar)
 ) {
     if (avatarData.shouldPreferNameBasedAvatar()) {
         DefaultInitialsAvatar(nameBasedAvatar = avatarData.nameBasedAvatar!!, type = type, size = size, modifier = modifier)
     } else {
         val painter = painter(avatarData, showPlaceholderIfNoAsset, withCrossfadeAnimation)
         Image(
             painter = painter,
-            contentDescription = stringResource(R.string.content_description_user_avatar),
+            contentDescription = contentDescription,
             contentScale = ContentScale.Crop,
             modifier = modifier,
         )

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

@@ -18,6 +18,7 @@
 
 package com.wire.android.ui.common
 
+import androidx.annotation.StringRes
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -30,10 +31,10 @@ import com.wire.android.ui.theme.wireColorScheme
 import com.wire.android.ui.theme.wireDimensions
 
 @Composable
-fun WireCheckIcon() {
+fun WireCheckIcon(@StringRes contentDescription: Int = R.string.content_description_check) {
     Icon(
         painter = painterResource(id = R.drawable.ic_check_circle),
-        contentDescription = stringResource(R.string.content_description_check),
+        contentDescription = stringResource(contentDescription),
         modifier = Modifier.size(MaterialTheme.wireDimensions.wireIconButtonSize),
         tint = MaterialTheme.wireColorScheme.positive
     )

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

@@ -29,6 +29,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.onClick
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.wire.android.ui.theme.wireColorScheme
@@ -43,9 +45,18 @@ fun WireSwitch(
     thumbContent: @Composable () -> Unit = { },
     enabled: Boolean = true,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
-    colors: SwitchColors = wireSwitchColors()
+    colors: SwitchColors = wireSwitchColors(),
+    toggleActionDescription: String? = null
 ) {
-    Switch(checked, onCheckedChange, modifier, thumbContent, enabled, colors, interactionSource)
+    Switch(
+        checked,
+        onCheckedChange,
+        modifier.semantics { toggleActionDescription?.let { onClick(it) { false } } },
+        thumbContent,
+        enabled,
+        colors,
+        interactionSource
+    )
 }
 
 @Composable

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

@@ -35,6 +35,9 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.onClick
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
 import com.wire.android.ui.theme.wireColorScheme
 import com.wire.android.ui.theme.wireTypography
@@ -70,8 +73,10 @@ fun WireTabRow(
             val text = tabItem.title.asString().let {
                 if (upperCaseTitles) it.uppercase() else it
             }
+            val selectText = stringResource(id = com.wire.android.R.string.content_description_select_label)
 
             Tab(
+                modifier = Modifier.semantics { onClick(selectText) { false } },
                 enabled = true,
                 text = {
                     Text(

app/src/main/kotlin/com/wire/android/ui/common/bottomsheet/RichMenuBottomSheetItem.kt

@@ -32,12 +32,14 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
+import com.wire.android.R
 import com.wire.android.model.Clickable
 import com.wire.android.ui.common.WireCheckIcon
 import com.wire.android.ui.common.clickable
+import com.wire.android.ui.common.clickableDescriptions
 import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.theme.DEFAULT_WEIGHT
 import com.wire.android.ui.theme.wireColorScheme
@@ -63,6 +65,7 @@ fun SelectableMenuBottomSheetItem(
             .defaultMinSize(minHeight = dimensions().spacing48x)
             .let { if (isSelectedItem(state)) it.background(MaterialTheme.wireColorScheme.secondaryButtonSelected) else it }
             .clickable(onItemClick)
+            .clickableDescriptions(onItemClick)
             .padding(vertical = dimensions().spacing12x, horizontal = dimensions().spacing16x)
     ) {
         icon()
@@ -91,7 +94,7 @@ fun SelectableMenuBottomSheetItem(
                     .padding(start = dimensions().spacing8x)
                     .align(Alignment.CenterVertically)
             ) {
-                WireCheckIcon()
+                WireCheckIcon(R.string.label_selected)
             }
         }
     }

app/src/main/kotlin/com/wire/android/ui/common/bottomsheet/conversation/HomeSheetContent.kt

@@ -99,11 +99,12 @@ internal fun ConversationMainSheetContent(
                         icon = {
                             MenuItemIcon(
                                 id = R.drawable.ic_mute,
-                                contentDescription = stringResource(R.string.content_description_muted_conversation),
+                                contentDescription = null,
                             )
                         },
                         action = { NotificationsOptionsItemAction(conversationSheetContent.mutingConversationState) },
-                        onItemClick = navigateToNotification
+                        onItemClick = navigateToNotification,
+                        onItemClickDescription = stringResource(id = R.string.content_description_open_notification_settings_label)
                     )
                 }
             }
@@ -139,10 +140,7 @@ internal fun ConversationMainSheetContent(
                     icon = {
                         MenuItemIcon(
                             id = R.drawable.ic_archive,
-                            contentDescription = stringResource(
-                                if (conversationSheetContent.isArchived) R.string.content_description_unarchive
-                                else R.string.content_description_move_to_archive
-                            ),
+                            contentDescription = null,
                         )
                     },
                     title = stringResource(
@@ -161,14 +159,15 @@ internal fun ConversationMainSheetContent(
                                 )
                             )
                         }
-                    })
+                    }
+                )
             }
             add {
                 MenuBottomSheetItem(
                     icon = {
                         MenuItemIcon(
                             id = R.drawable.ic_erase,
-                            contentDescription = stringResource(R.string.content_description_clear_content),
+                            contentDescription = null,
                         )
                     },
                     title = stringResource(R.string.label_clear_content),
@@ -191,7 +190,7 @@ internal fun ConversationMainSheetContent(
                         icon = {
                             MenuItemIcon(
                                 id = R.drawable.ic_block,
-                                contentDescription = stringResource(R.string.content_description_block_the_user),
+                                contentDescription = null,
                             )
                         },
                         itemProvidedColor = MaterialTheme.colorScheme.error,
@@ -214,7 +213,7 @@ internal fun ConversationMainSheetContent(
                         icon = {
                             MenuItemIcon(
                                 id = R.drawable.ic_block,
-                                contentDescription = stringResource(R.string.content_description_unblock_the_user)
+                                contentDescription = null
                             )
                         },
                         itemProvidedColor = MaterialTheme.colorScheme.onBackground,
@@ -236,7 +235,7 @@ internal fun ConversationMainSheetContent(
                         icon = {
                             MenuItemIcon(
                                 id = R.drawable.ic_leave,
-                                contentDescription = stringResource(R.string.content_description_leave_the_group),
+                                contentDescription = null,
                             )
                         },
                         itemProvidedColor = MaterialTheme.colorScheme.error,
@@ -258,7 +257,7 @@ internal fun ConversationMainSheetContent(
                         icon = {
                             MenuItemIcon(
                                 id = R.drawable.ic_remove,
-                                contentDescription = stringResource(R.string.content_description_delete_the_group),
+                                contentDescription = null,
                             )
                         },
                         title = stringResource(R.string.label_delete_group),
@@ -293,6 +292,6 @@ fun NotificationsOptionsItemAction(
             modifier = Modifier.weight(weight = 1f, fill = false)
         )
         Spacer(modifier = Modifier.size(dimensions().spacing16x))
-        ArrowRightIcon()
+        ArrowRightIcon(contentDescription = R.string.content_description_empty)
     }
 }