[a11y] Group device information and spell out the deviceId

Author: bmarty

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,
             )
         }
     }

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,