diff --git a/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/incoming/ui/SessionDetailsView.kt b/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/incoming/ui/SessionDetailsView.kt index 83d82ec795..da3471ddc1 100644 --- a/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/incoming/ui/SessionDetailsView.kt +++ b/features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/incoming/ui/SessionDetailsView.kt @@ -18,6 +18,7 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource +import androidx.compose.ui.semantics.semantics import androidx.compose.ui.unit.dp import io.element.android.compound.theme.ElementTheme import io.element.android.features.verifysession.impl.R @@ -46,7 +47,8 @@ fun SessionDetailsView( color = ElementTheme.colors.borderDisabled, shape = RoundedCornerShape(8.dp) ) - .padding(24.dp), + .padding(24.dp) + .semantics(mergeDescendants = true) {}, verticalArrangement = Arrangement.spacedBy(12.dp), ) { Row( @@ -76,6 +78,7 @@ fun SessionDetailsView( label = stringResource(CommonStrings.common_device_id), text = deviceId.value, modifier = Modifier.weight(5f), + spellText = true, ) } } diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/TextWithLabelMolecule.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/TextWithLabelMolecule.kt index 2d22ef38a0..cc195ca686 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/TextWithLabelMolecule.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/TextWithLabelMolecule.kt @@ -10,14 +10,26 @@ package io.element.android.libraries.designsystem.atomic.molecules import androidx.compose.foundation.layout.Column import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.semantics.contentDescription +import androidx.compose.ui.semantics.semantics import io.element.android.compound.theme.ElementTheme import io.element.android.libraries.designsystem.theme.components.Text +/** + * Display a label and a text in a column. + * @param label the label to display + * @param text the text to display + * @param modifier the modifier to apply to this layout + * @param spellText if true, the text will be spelled out in the content description for accessibility. + * Useful for deviceId for instance, that the screen reader will read as a list of letters instead of trying to read a + * word of random characters. + */ @Composable fun TextWithLabelMolecule( label: String, text: String, modifier: Modifier = Modifier, + spellText: Boolean = false, ) { Column(modifier = modifier) { Text( @@ -26,6 +38,11 @@ fun TextWithLabelMolecule( color = ElementTheme.colors.textSecondary, ) Text( + modifier = Modifier.semantics { + if (spellText) { + contentDescription = text.toList().joinToString() + } + }, text = text, style = ElementTheme.typography.fontBodyMdRegular, color = ElementTheme.colors.textPrimary,