feat: adjust accessibility strings for personal to team migration fea…

…ture (WPB-14347) (#3651)

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

@@ -69,14 +69,19 @@ fun HomeTopBar(
                 )
             }
             val openLabel = stringResource(R.string.content_description_open_label)
+            val contentDescription = if (shouldShowCreateTeamUnreadIndicator) {
+                stringResource(R.string.content_description_home_profile_btn_with_notification)
+            } else {
+                stringResource(R.string.content_description_home_profile_btn)
+            }
             UserProfileAvatar(
                 avatarData = userAvatarData,
                 clickable = remember {
                     Clickable(enabled = true, onClickDescription = openLabel) { onNavigateToSelfUserProfile() }
                 },
                 type = UserProfileAvatarType.WithIndicators.RegularUser(legalHoldIndicatorVisible = withLegalHoldIndicator),
                 shouldShowCreateTeamUnreadIndicator = shouldShowCreateTeamUnreadIndicator,
-                contentDescription = stringResource(R.string.content_description_home_profile_btn)
+                contentDescription = contentDescription
             )
         },
         elevation = elevation,

app/src/main/kotlin/com/wire/android/ui/userprofile/self/CreateTeamInfoCard.kt

@@ -22,7 +22,6 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.material.Icon
 import androidx.compose.material.Text
 import androidx.compose.material3.CardDefaults
@@ -36,6 +35,7 @@ import com.wire.android.R
 import com.wire.android.ui.common.button.WireSecondaryButton
 import com.wire.android.ui.common.colorsScheme
 import com.wire.android.ui.common.dimensions
+import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireTypography
 import com.wire.android.util.ui.PreviewMultipleThemes
 
@@ -83,7 +83,6 @@ fun CreateTeamInfoCard(
         WireSecondaryButton(
             modifier = Modifier
                 .padding(dimensions().spacing8x)
-                .width(dimensions().createTeamInfoCardButtonWidth)
                 .height(dimensions().createTeamInfoCardButtonHeight),
             text = stringResource(R.string.user_profile_create_team_card_button),
             onClick = onCreateAccount,
@@ -97,5 +96,7 @@ fun CreateTeamInfoCard(
 @PreviewMultipleThemes
 @Composable
 fun PreviewCreateTeamInfoCard() {
-    CreateTeamInfoCard({ })
+    WireTheme {
+        CreateTeamInfoCard({ })
+    }
 }

app/src/main/kotlin/com/wire/android/ui/userprofile/teammigration/TeamMigrationScreen.kt

@@ -22,6 +22,7 @@ import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
@@ -54,6 +55,10 @@ import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.common.preview.MultipleThemePreviews
 import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.userprofile.teammigration.common.ConfirmMigrationLeaveDialog
+import com.wire.android.ui.userprofile.teammigration.step1.TEAM_MIGRATION_TEAM_PLAN_STEP
+import com.wire.android.ui.userprofile.teammigration.step2.TEAM_MIGRATION_TEAM_NAME_STEP
+import com.wire.android.ui.userprofile.teammigration.step3.TEAM_MIGRATION_CONFIRMATION_STEP
+import com.wire.android.ui.userprofile.teammigration.step4.TEAM_MIGRATION_DONE_STEP
 
 @OptIn(ExperimentalMaterialNavigationApi::class, ExperimentalAnimationApi::class)
 @WireDestination(style = PopUpNavigationAnimation::class)
@@ -82,6 +87,7 @@ fun TeamMigrationScreen(
     Column(
         modifier = modifier
             .padding(top = dimensions().spacing32x)
+            .navigationBarsPadding()
             .clip(
                 shape = RoundedCornerShape(
                     dimensions().corner16x,
@@ -91,6 +97,14 @@ fun TeamMigrationScreen(
             .fillMaxSize()
             .background(color = colorsScheme().surface)
     ) {
+        val closeIconContentDescription = when (teamMigrationViewModel.teamMigrationState.currentStep) {
+            TEAM_MIGRATION_TEAM_PLAN_STEP -> stringResource(R.string.personal_to_team_migration_close_team_account_content_description)
+            TEAM_MIGRATION_TEAM_NAME_STEP -> stringResource(R.string.personal_to_team_migration_close_team_name_content_description)
+            TEAM_MIGRATION_CONFIRMATION_STEP -> stringResource(R.string.personal_to_team_migration_close_confirmation_content_description)
+            TEAM_MIGRATION_DONE_STEP -> stringResource(R.string.personal_to_team_migration_close_team_created_content_description)
+            else -> stringResource(R.string.personal_to_team_migration_close_icon_content_description)
+        }
+
         IconButton(
             modifier = Modifier.align(alignment = Alignment.End),
             onClick = {
@@ -105,7 +119,7 @@ fun TeamMigrationScreen(
         ) {
             Icon(
                 painter = painterResource(id = R.drawable.ic_close),
-                contentDescription = stringResource(R.string.personal_to_team_migration_close_icon_content_description)
+                contentDescription = closeIconContentDescription
             )
         }
 

app/src/main/kotlin/com/wire/android/ui/userprofile/teammigration/TeamMigrationState.kt

@@ -23,5 +23,6 @@ import com.wire.kalium.logic.CoreFailure
 data class TeamMigrationState(
     val teamNameTextState: TextFieldState = TextFieldState(),
     val shouldShowMigrationLeaveDialog: Boolean = false,
-    val migrationFailure: CoreFailure? = null,
+    val currentStep: Int = 0,
+    val migrationFailure: CoreFailure? = null
 )

app/src/main/kotlin/com/wire/android/ui/userprofile/teammigration/TeamMigrationViewModel.kt

@@ -63,6 +63,10 @@ class TeamMigrationViewModel @Inject constructor(
         )
     }
 
+    fun setCurrentStep(step: Int) {
+        teamMigrationState = teamMigrationState.copy(currentStep = step)
+    }
+
     fun sendPersonalTeamCreationFlowCanceledEvent(
         modalLeaveClicked: Boolean? = null,
         modalContinueClicked: Boolean? = null

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

@@ -27,6 +27,8 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import com.wire.android.R
 import com.wire.android.ui.common.button.WireButtonState
 import com.wire.android.ui.common.button.WirePrimaryButton
@@ -41,6 +43,7 @@ fun BottomLineButtons(
     isContinueButtonEnabled: Boolean,
     modifier: Modifier = Modifier,
     isBackButtonVisible: Boolean = true,
+    backButtonContentDescription: String = stringResource(R.string.personal_to_team_migration_back_button_label),
     onBack: () -> Unit = { },
     onContinue: () -> Unit = { }
 ) {
@@ -60,7 +63,9 @@ fun BottomLineButtons(
     ) {
         if (isBackButtonVisible) {
             WireSecondaryButton(
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .semantics(true) { contentDescription = backButtonContentDescription },
                 text = stringResource(R.string.personal_to_team_migration_back_button_label),
                 onClick = onBack
             )

app/src/main/kotlin/com/wire/android/ui/userprofile/teammigration/step1/TeamMigrationTeamPlanStepScreen.kt

@@ -54,12 +54,14 @@ import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.destinations.TeamMigrationTeamNameStepScreenDestination
 import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireTypography
-import com.wire.android.ui.userprofile.teammigration.common.BottomLineButtons
 import com.wire.android.ui.userprofile.teammigration.PersonalToTeamMigrationNavGraph
 import com.wire.android.ui.userprofile.teammigration.TeamMigrationViewModel
+import com.wire.android.ui.userprofile.teammigration.common.BottomLineButtons
 import com.wire.android.util.CustomTabsHelper
 import com.wire.android.util.ui.PreviewMultipleThemes
 
+const val TEAM_MIGRATION_TEAM_PLAN_STEP = 1
+
 @PersonalToTeamMigrationNavGraph(start = true)
 @WireDestination(
     style = SlideNavigationAnimation::class
@@ -76,7 +78,8 @@ fun TeamMigrationTeamPlanStepScreen(
     )
 
     LaunchedEffect(Unit) {
-        teamMigrationViewModel.sendPersonalTeamCreationFlowStartedEvent(1)
+        teamMigrationViewModel.sendPersonalTeamCreationFlowStartedEvent(TEAM_MIGRATION_TEAM_PLAN_STEP)
+        teamMigrationViewModel.setCurrentStep(TEAM_MIGRATION_TEAM_PLAN_STEP)
     }
 }
 

app/src/main/kotlin/com/wire/android/ui/userprofile/teammigration/step2/TeamMigrationTeamNameStepScreen.kt

@@ -44,11 +44,13 @@ import com.wire.android.ui.common.textfield.WireTextField
 import com.wire.android.ui.destinations.TeamMigrationConfirmationStepScreenDestination
 import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireTypography
-import com.wire.android.ui.userprofile.teammigration.common.BottomLineButtons
 import com.wire.android.ui.userprofile.teammigration.PersonalToTeamMigrationNavGraph
 import com.wire.android.ui.userprofile.teammigration.TeamMigrationViewModel
+import com.wire.android.ui.userprofile.teammigration.common.BottomLineButtons
 import com.wire.android.util.ui.PreviewMultipleThemes
 
+const val TEAM_MIGRATION_TEAM_NAME_STEP = 2
+
 @PersonalToTeamMigrationNavGraph
 @WireDestination(
     style = SlideNavigationAnimation::class
@@ -68,7 +70,8 @@ fun TeamMigrationTeamNameStepScreen(
         teamNameTextFieldState = teamMigrationViewModel.teamMigrationState.teamNameTextState
     )
     LaunchedEffect(Unit) {
-        teamMigrationViewModel.sendPersonalTeamCreationFlowStartedEvent(2)
+        teamMigrationViewModel.sendPersonalTeamCreationFlowStartedEvent(TEAM_MIGRATION_TEAM_NAME_STEP)
+        teamMigrationViewModel.setCurrentStep(TEAM_MIGRATION_TEAM_NAME_STEP)
     }
 }
 
@@ -130,6 +133,7 @@ private fun TeamMigrationTeamNameStepScreenContent(
         BottomLineButtons(
             isContinueButtonEnabled = isContinueButtonEnabled,
             onContinue = onContinueButtonClicked,
+            backButtonContentDescription = stringResource(R.string.personal_to_team_migration_back_button_team_name_content_description),
             onBack = onBackButtonClicked
         )
     }

app/src/main/kotlin/com/wire/android/ui/userprofile/teammigration/step3/TeamMigrationConfirmationStepScreen.kt

@@ -59,6 +59,8 @@ import com.wire.android.ui.userprofile.teammigration.common.BulletList
 import com.wire.android.util.CustomTabsHelper
 import com.wire.android.util.ui.PreviewMultipleThemes
 
+const val TEAM_MIGRATION_CONFIRMATION_STEP = 3
+
 @PersonalToTeamMigrationNavGraph
 @WireDestination(
     style = SlideNavigationAnimation::class
@@ -86,7 +88,8 @@ fun TeamMigrationConfirmationStepScreen(
     HandleErrors(state, teamMigrationViewModel::failureHandled)
 
     LaunchedEffect(Unit) {
-        teamMigrationViewModel.sendPersonalTeamCreationFlowStartedEvent(3)
+        teamMigrationViewModel.sendPersonalTeamCreationFlowStartedEvent(TEAM_MIGRATION_CONFIRMATION_STEP)
+        teamMigrationViewModel.setCurrentStep(TEAM_MIGRATION_CONFIRMATION_STEP)
     }
 }
 
@@ -185,6 +188,7 @@ private fun TeamMigrationConfirmationStepScreenContent(
         BottomLineButtons(
             isContinueButtonEnabled = isContinueButtonEnabled,
             onContinue = onContinueButtonClicked,
+            backButtonContentDescription = stringResource(R.string.personal_to_team_migration_back_button_confirmation_content_description),
             onBack = onBackPressed
         )
     }

app/src/main/kotlin/com/wire/android/ui/userprofile/teammigration/step4/TeamMigrationDoneStepScreen.kt

@@ -27,6 +27,7 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
@@ -45,12 +46,14 @@ import com.wire.android.ui.common.spacers.VerticalSpace.x32
 import com.wire.android.ui.destinations.HomeScreenDestination
 import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireTypography
-import com.wire.android.ui.userprofile.teammigration.common.BulletList
 import com.wire.android.ui.userprofile.teammigration.PersonalToTeamMigrationNavGraph
 import com.wire.android.ui.userprofile.teammigration.TeamMigrationViewModel
+import com.wire.android.ui.userprofile.teammigration.common.BulletList
 import com.wire.android.util.CustomTabsHelper
 import com.wire.android.util.ui.PreviewMultipleThemes
 
+const val TEAM_MIGRATION_DONE_STEP = 4
+
 @PersonalToTeamMigrationNavGraph
 @WireDestination(
     style = SlideNavigationAnimation::class
@@ -84,6 +87,10 @@ fun TeamMigrationDoneStepScreen(
         teamName = teamMigrationViewModel.teamMigrationState.teamNameTextState.text.toString()
     )
 
+    LaunchedEffect(Unit) {
+        teamMigrationViewModel.setCurrentStep(TEAM_MIGRATION_DONE_STEP)
+    }
+
     BackHandler { }
 }
 

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

@@ -198,6 +198,7 @@
     <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_home_profile_btn_with_notification">Your profile, one unread hint.</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>
@@ -1581,7 +1582,13 @@ In group conversations, the group admin can overwrite this setting.</string>
     <string name="personal_to_team_migration_step_label">Step %1$d of 4</string>
     <string name="personal_to_team_migration_back_to_wire_button">Back to Wire</string>
     <string name="personal_to_team_migration_back_button_label">Back</string>
+    <string name="personal_to_team_migration_back_button_team_name_content_description">Go back to team account overview</string>
+    <string name="personal_to_team_migration_back_button_confirmation_content_description">Go back to team name view</string>
     <string name="personal_to_team_migration_close_icon_content_description">Close team migration flow</string>
+    <string name="personal_to_team_migration_close_team_account_content_description">Close team account overview</string>
+    <string name="personal_to_team_migration_close_team_name_content_description">Close team name view</string>
+    <string name="personal_to_team_migration_close_confirmation_content_description">Close confirmation view</string>
+    <string name="personal_to_team_migration_close_team_created_content_description">Close team created view</string>
 
     <string name="personal_to_team_migration_team_plan_step">Team Account</string>
     <string name="personal_to_team_migration_team_plan_description">Transform your personal account into a team account to get more out of your collaboration.</string>

core/ui-common/src/main/kotlin/com/wire/android/ui/theme/WireDimensions.kt

@@ -115,7 +115,6 @@ data class WireDimensions(
     val dialogCardMargin: Dp,
     // UserProfile
     val userProfileOtherAccItemHeight: Dp,
-    val createTeamInfoCardButtonWidth: Dp,
     val createTeamInfoCardButtonHeight: Dp,
     // Profile Image
     val imagePreviewHeight: Dp,
@@ -222,7 +221,6 @@ private val DefaultPhonePortraitWireDimensions: WireDimensions = WireDimensions(
     avatarStatusSize = 14.dp,
     unReadIndicatorSize = 16.dp,
     avatarStatusBorderWidth = 2.dp,
-    createTeamInfoCardButtonWidth = 120.dp,
     createTeamInfoCardButtonHeight = 32.dp,
     avatarTemporaryUserBorderWidth = 2.dp,
     avatarBigTemporaryUserBorderWidth = 4.dp,