feat: Add Accessibility strings to YourProfile [WPB-9826] (#3568)

wireapp · Oct 30, 2024 · 6b9e651 · 6b9e651
1 parent 4fceaf1
commit 6b9e651
Show file tree

Hide file tree

Showing 33 changed files with 129 additions and 110 deletions.
diff --git a/...src/main/kotlin/com/wire/android/ui/authentication/create/code/CreateAccountCodeScreen.kt b/...src/main/kotlin/com/wire/android/ui/authentication/create/code/CreateAccountCodeScreen.kt
@@ -60,6 +60,7 @@ import com.wire.android.ui.common.progress.WireCircularProgressIndicator
 import com.wire.android.ui.common.scaffold.WireScaffold
 import com.wire.android.ui.common.textfield.CodeTextField
 import com.wire.android.ui.common.textfield.WireTextFieldState
+import com.wire.android.ui.common.topappbar.NavigationIconType
 import com.wire.android.ui.common.topappbar.WireCenterAlignedTopAppBar
 import com.wire.android.ui.destinations.CreateAccountSummaryScreenDestination
 import com.wire.android.ui.destinations.RemoveDeviceScreenDestination
@@ -143,7 +144,8 @@ private fun CodeContent(
                         style = MaterialTheme.wireTypography.body01
                     )
                 }
-            }
+            },
+            navigationIconType = NavigationIconType.Back(R.string.content_description_login_back_btn)
         )
     }) { internalPadding ->
         Column(

diff --git a/...com/wire/android/ui/authentication/create/overview/CreatePersonalAccountOverviewScreen.kt b/...com/wire/android/ui/authentication/create/overview/CreatePersonalAccountOverviewScreen.kt
@@ -26,7 +26,6 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
-import com.wire.android.ui.common.scaffold.WireScaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -36,6 +35,7 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.clearAndSetSemantics
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.tooling.preview.Preview
@@ -51,6 +51,8 @@ import com.wire.android.ui.authentication.create.common.CreatePersonalAccountNav
 import com.wire.android.ui.authentication.create.common.CreateTeamAccountNavGraph
 import com.wire.android.ui.common.button.WirePrimaryButton
 import com.wire.android.ui.common.dimensions
+import com.wire.android.ui.common.scaffold.WireScaffold
+import com.wire.android.ui.common.topappbar.NavigationIconType
 import com.wire.android.ui.common.topappbar.WireCenterAlignedTopAppBar
 import com.wire.android.ui.destinations.CreateAccountEmailScreenDestination
 import com.wire.android.ui.theme.WireTheme
@@ -126,6 +128,7 @@ private fun OverviewContent(
                 elevation = dimensions().spacing0x,
                 title = overviewParams.title,
                 onNavigationPressed = onBackPressed,
+                navigationIconType = NavigationIconType.Back(R.string.content_description_login_back_btn),
                 subtitleContent = {
                     if (serverConfig.isOnPremises) {
                         ServerTitle(
@@ -149,6 +152,7 @@ private fun OverviewContent(
                         horizontal = MaterialTheme.wireDimensions.spacing64x,
                         vertical = MaterialTheme.wireDimensions.spacing32x
                     )
+                    .clearAndSetSemantics {}
             )
             OverviewTexts(
                 modifier = Modifier.padding(horizontal = MaterialTheme.wireDimensions.spacing24x),
@@ -182,13 +186,14 @@ private fun OverviewTexts(
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(bottom = MaterialTheme.wireDimensions.spacing8x)
+                    .clearAndSetSemantics {}
             )
         }
         Text(
             text = overviewParams.contentText,
             style = MaterialTheme.wireTypography.body02,
             textAlign = TextAlign.Center,
-            modifier = Modifier.fillMaxWidth()
+            modifier = Modifier.fillMaxWidth().clearAndSetSemantics {}
         )
         Text(
             text = overviewParams.learnMoreText,
@@ -201,7 +206,8 @@ private fun OverviewTexts(
                 .clickable(
                     interactionSource = remember { MutableInteractionSource() },
                     indication = null,
-                    onClick = onLearnMoreClick
+                    onClick = onLearnMoreClick,
+                    onClickLabel = stringResource(R.string.content_description_open_link_label)
                 )
         )
     }

diff --git a/app/src/main/kotlin/com/wire/android/ui/authentication/devices/DeviceItem.kt b/app/src/main/kotlin/com/wire/android/ui/authentication/devices/DeviceItem.kt
@@ -42,8 +42,6 @@ import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
-import androidx.compose.ui.semantics.onClick
-import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import com.wire.android.BuildConfig
@@ -103,19 +101,17 @@ private fun DeviceItemContent(
     shouldShowE2EIInfo: Boolean,
     modifier: Modifier = Modifier,
 ) {
-    val openDetailsDescription = stringResource(id = R.string.content_description_user_profile_open_device_btn)
-
     Row(
         verticalAlignment = Alignment.Top,
         modifier = modifier
-            .clickable(enabled = isWholeItemClickable) {
+            .clickable(
+                enabled = isWholeItemClickable,
+                onClickLabel = stringResource(id = R.string.content_description_user_profile_open_device_btn)
+            ) {
                 if (isWholeItemClickable) {
                     onClickAction?.invoke(device)
                 }
             }
-            .semantics {
-                if (isWholeItemClickable) onClick(openDetailsDescription) { false }
-            }
     ) {
         Row(
             modifier = Modifier

diff --git a/app/src/main/kotlin/com/wire/android/ui/authentication/login/LoginScreen.kt b/app/src/main/kotlin/com/wire/android/ui/authentication/login/LoginScreen.kt
@@ -70,6 +70,7 @@ import com.wire.android.ui.common.dialogs.FeatureDisabledWithProxyDialogContent
 import com.wire.android.ui.common.dialogs.FeatureDisabledWithProxyDialogState
 import com.wire.android.ui.common.rememberTopBarElevationState
 import com.wire.android.ui.common.scaffold.WireScaffold
+import com.wire.android.ui.common.topappbar.NavigationIconType
 import com.wire.android.ui.common.topappbar.WireCenterAlignedTopAppBar
 import com.wire.android.ui.common.visbility.rememberVisibilityState
 import com.wire.android.ui.destinations.E2EIEnrollmentScreenDestination
@@ -174,7 +175,8 @@ private fun MainLoginContent(
                         )
                     }
                 },
-                onNavigationPressed = onBackPressed
+                onNavigationPressed = onBackPressed,
+                navigationIconType = NavigationIconType.Back(R.string.content_description_login_back_btn)
             ) {
                 WireTabRow(
                     tabs = LoginTabItem.values().toList(),

diff --git a/app/src/main/kotlin/com/wire/android/ui/authentication/login/email/LoginEmailScreen.kt b/app/src/main/kotlin/com/wire/android/ui/authentication/login/email/LoginEmailScreen.kt
@@ -239,6 +239,7 @@ private fun UserIdentifierInput(
             error != null -> WireTextFieldState.Error(error)
             else -> WireTextFieldState.Default
         },
+        semanticDescription = stringResource(R.string.content_description_login_email_field),
         keyboardOptions = KeyboardOptions.DefaultEmailNext,
         modifier = modifier.testTag("emailField"),
         testTag = "userIdentifierInput"
@@ -252,6 +253,7 @@ private fun PasswordInput(passwordState: TextFieldState, modifier: Modifier = Mo
         textState = passwordState,
         keyboardOptions = KeyboardOptions.DefaultPassword.copy(imeAction = ImeAction.Done),
         onKeyboardAction = { keyboardController?.hide() },
+        semanticDescription = stringResource(R.string.content_description_login_password_field),
         modifier = modifier.testTag("passwordField"),
         autoFill = true,
         testTag = "PasswordInput"
@@ -273,7 +275,8 @@ private fun ForgotPasswordLabel(forgotPasswordUrl: String, modifier: Modifier =
                 .clickable(
                     interactionSource = remember { MutableInteractionSource() },
                     indication = null,
-                    onClick = { openForgotPasswordPage(context, forgotPasswordUrl) }
+                    onClick = { openForgotPasswordPage(context, forgotPasswordUrl) },
+                    onClickLabel = stringResource(R.string.content_description_open_link_label)
                 )
                 .testTag("Forgot password?")
         )

diff --git a/app/src/main/kotlin/com/wire/android/ui/authentication/login/sso/LoginSSOScreen.kt b/app/src/main/kotlin/com/wire/android/ui/authentication/login/sso/LoginSSOScreen.kt
@@ -159,6 +159,7 @@ private fun SSOCodeInput(
     WireTextField(
         textState = ssoCodeState,
         labelText = stringResource(R.string.login_sso_code_label),
+        semanticDescription = stringResource(R.string.content_description_login_sso_code_field),
         state = if (error != null) WireTextFieldState.Error(error) else WireTextFieldState.Default,
         keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Next),
         modifier = modifier.testTag("ssoCodeField")

diff --git a/app/src/main/kotlin/com/wire/android/ui/authentication/welcome/WelcomeScreen.kt b/app/src/main/kotlin/com/wire/android/ui/authentication/welcome/WelcomeScreen.kt
@@ -39,7 +39,6 @@ import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
-import com.wire.android.ui.common.scaffold.WireScaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -59,6 +58,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringArrayResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.semantics.clearAndSetSemantics
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTagsAsResourceId
 import androidx.compose.ui.text.style.TextAlign
@@ -81,6 +81,7 @@ import com.wire.android.ui.common.dialogs.FeatureDisabledWithProxyDialogState
 import com.wire.android.ui.common.dialogs.MaxAccountsReachedDialog
 import com.wire.android.ui.common.dialogs.MaxAccountsReachedDialogState
 import com.wire.android.ui.common.dimensions
+import com.wire.android.ui.common.scaffold.WireScaffold
 import com.wire.android.ui.common.topappbar.NavigationIconType
 import com.wire.android.ui.common.topappbar.WireCenterAlignedTopAppBar
 import com.wire.android.ui.common.visbility.rememberVisibilityState
@@ -135,7 +136,7 @@ private fun WelcomeContent(
             WireCenterAlignedTopAppBar(
                 elevation = dimensions().spacing0x,
                 title = "",
-                navigationIconType = NavigationIconType.Close(),
+                navigationIconType = NavigationIconType.Close(R.string.content_description_welcome_screen_close_btn),
                 onNavigationPressed = navigateBack
             )
         } else {
@@ -157,7 +158,7 @@ private fun WelcomeContent(
             Icon(
                 imageVector = ImageVector.vectorResource(id = R.drawable.ic_wire_logo),
                 tint = MaterialTheme.colorScheme.onBackground,
-                contentDescription = stringResource(id = R.string.content_description_welcome_wire_logo)
+                contentDescription = null
             )
 
             if (state.isOnPremises) {
@@ -297,7 +298,7 @@ private fun WelcomeCarouselItem(pageIconResId: Int, pageText: String) {
     ) {
         Image(
             painter = painterResource(id = pageIconResId),
-            contentDescription = "",
+            contentDescription = null,
             contentScale = ContentScale.Inside,
             modifier = Modifier
                 .weight(1f, true)
@@ -311,7 +312,9 @@ private fun WelcomeCarouselItem(pageIconResId: Int, pageText: String) {
             style = MaterialTheme.wireTypography.title01,
             overflow = TextOverflow.Ellipsis,
             textAlign = TextAlign.Center,
-            modifier = Modifier.padding(horizontal = MaterialTheme.wireDimensions.welcomeTextHorizontalPadding)
+            modifier = Modifier
+                .padding(horizontal = MaterialTheme.wireDimensions.welcomeTextHorizontalPadding)
+                .clearAndSetSemantics {}
         )
     }
 }
@@ -358,7 +361,8 @@ private fun WelcomeFooter(modifier: Modifier, onPrivateAccountClick: () -> Unit)
                 .clickable(
                     interactionSource = remember { MutableInteractionSource() },
                     indication = null,
-                    onClick = onPrivateAccountClick
+                    onClick = onPrivateAccountClick,
+                    onClickLabel = stringResource(R.string.content_description_open_link_label)
                 )
         )
 

diff --git a/app/src/main/kotlin/com/wire/android/ui/common/AppExtensions.kt b/app/src/main/kotlin/com/wire/android/ui/common/AppExtensions.kt
@@ -69,7 +69,6 @@ fun Modifier.selectableBackground(isSelected: Boolean, onClick: () -> Unit): Mod
 
     return this
         .clickable(onItemClick)
-        .clickableDescriptions(onItemClick)
         .semantics { stateDescription = if (isSelected) selectedDescription else "" }
 }
 

diff --git a/app/src/main/kotlin/com/wire/android/ui/common/UserProfileAvatar.kt b/app/src/main/kotlin/com/wire/android/ui/common/UserProfileAvatar.kt
@@ -143,7 +143,6 @@ fun UserProfileAvatar(
             .wrapContentSize()
             .clip(CircleShape)
             .clickable(clickable)
-            .clickableDescriptions(clickable)
     ) {
         var userStatusIndicatorParams by remember { mutableStateOf(Size.Zero to Offset.Zero) }
         Box(

diff --git a/app/src/main/kotlin/com/wire/android/ui/common/WireDropDown.kt b/app/src/main/kotlin/com/wire/android/ui/common/WireDropDown.kt
@@ -32,10 +32,10 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ExpandMore
 import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -55,6 +55,8 @@ import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.onClick
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
@@ -72,13 +74,14 @@ import com.wire.kalium.logic.data.conversation.ConversationOptions
 @Composable
 internal fun WireDropDown(
     items: List<String>,
+    label: String?,
+    modifier: Modifier = Modifier,
     defaultItemIndex: Int = -1,
     selectedItemIndex: Int = defaultItemIndex,
-    label: String?,
-    modifier: Modifier,
     autoUpdateSelection: Boolean = true,
     showDefaultTextIndicator: Boolean = true,
     leadingCompose: @Composable ((index: Int) -> Unit)? = null,
+    onChangeClickDescription: String = stringResource(R.string.content_description_change_it_label),
     onSelected: (selectedIndex: Int) -> Unit
 ) {
     var expanded by remember { mutableStateOf(false) }
@@ -114,7 +117,7 @@ internal fun WireDropDown(
                         // the DropDown the same width
                         selectionFieldWidth = coordinates.size.toSize()
                     }
-                    .clickable { expanded = true },
+                    .clickable(onClickLabel = onChangeClickDescription) { expanded = true },
                 leadingCompose = leadingCompose,
                 selectedIndex = selectedIndex,
                 text = selectionText,
@@ -177,7 +180,7 @@ private fun MenuPopUp(
         ) {
 
             SelectionField(
-                Modifier.clickable { hidePopUp() },
+                Modifier.clickable(onClickLabel = stringResource(R.string.content_description_close_dropdown)) { hidePopUp() },
                 leadingCompose,
                 selectedIndex,
                 selectionText,
@@ -236,7 +239,7 @@ private fun SelectionField(
         )
         Icon(
             imageVector = Icons.Filled.ExpandMore,
-            contentDescription = stringResource(R.string.change),
+            contentDescription = null,
             tint = MaterialTheme.wireColorScheme.secondaryText,
             modifier = Modifier
                 .padding(top = 4.dp)
@@ -256,8 +259,9 @@ private fun DropdownItem(
     leadingCompose: (@Composable () -> Unit)?,
     isSelected: Boolean,
     onClick: () -> Unit
-) =
-    DropdownMenuItem(
+) {
+    val selectLabel = stringResource(R.string.content_description_select_label)
+    return DropdownMenuItem(
         text = {
             Text(
                 text = text,
@@ -270,16 +274,18 @@ private fun DropdownItem(
         leadingIcon = leadingCompose,
         trailingIcon = {
             if (isSelected) {
-                WireCheckIcon()
+                WireCheckIcon(R.string.content_description_selected_label)
             }
         },
         onClick = onClick,
         modifier = Modifier
+            .semantics { onClick(selectLabel) { false } }
             .background(
                 color = if (isSelected) MaterialTheme.wireColorScheme.secondaryButtonSelected
-                        else MaterialTheme.wireColorScheme.tertiaryButtonEnabled
+                else MaterialTheme.wireColorScheme.tertiaryButtonEnabled
             )
     )
+}
 
 @Composable
 private fun RowScope.LeadingIcon(convent: @Composable () -> Unit) {
@@ -299,7 +305,7 @@ fun PreviewWireDropdownPreviewWithLabel() {
         items = ConversationOptions.Protocol.values().map { it.name },
         defaultItemIndex = 0,
         selectedItemIndex = 0,
-        "Protocol",
+        label = "Protocol",
         modifier = Modifier
     ) {}
 }
diff --git a/app/src/main/kotlin/com/wire/android/ui/common/WireLabelledCheckbox.kt b/app/src/main/kotlin/com/wire/android/ui/common/WireLabelledCheckbox.kt
@@ -42,12 +42,12 @@ fun WireLabelledCheckbox(
     label: String,
     checked: Boolean,
     onCheckClicked: ((Boolean) -> Unit),
+    modifier: Modifier = Modifier,
     maxLine: Int = Int.MAX_VALUE,
     overflow: TextOverflow = TextOverflow.Visible,
     horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
     contentPadding: PaddingValues = PaddingValues(dimensions().spacing0x),
-    checkboxEnabled: Boolean = true,
-    modifier: Modifier = Modifier
+    checkboxEnabled: Boolean = true
 ) {
     Row(
         verticalAlignment = Alignment.CenterVertically,

diff --git a/app/src/main/kotlin/com/wire/android/ui/common/bottomsheet/RichMenuBottomSheetItem.kt b/app/src/main/kotlin/com/wire/android/ui/common/bottomsheet/RichMenuBottomSheetItem.kt
@@ -39,7 +39,6 @@ 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
@@ -65,7 +64,6 @@ 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()