Improve how Talkback works with the timeline

Sadly, it's still not 100% working, there is some issue with the `LazyColumn` using `reverseLayout` that only Google can fix.
element-hq · Feb 16, 2024 · 5c1c171 · 5c1c171
1 parent 34ab25e
commit 5c1c171
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 5 deletions.
diff --git a/changelog.d/+improve-accessibility-in-timeline.bugfix b/changelog.d/+improve-accessibility-in-timeline.bugfix
@@ -0,0 +1 @@
+Improve how Talkback works with the timeline. Sadly, it's still not 100% working, but there is some issue with the `LazyColumn` using `reverseLayout` that only Google can fix.
diff --git a/...lin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt b/...lin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt
@@ -45,6 +45,7 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.clipToBounds
@@ -53,6 +54,10 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalViewConfiguration
 import androidx.compose.ui.platform.ViewConfiguration
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.invisibleToUser
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
@@ -256,6 +261,7 @@ private fun SwipeSensitivity(
     }
 }
 
+@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 private fun TimelineItemEventRowContent(
     event: TimelineItem.Event,
@@ -305,6 +311,8 @@ private fun TimelineItemEventRowContent(
                     .padding(horizontal = 16.dp)
                     .zIndex(1f)
                     .clickable(onClick = onUserDataClicked)
+                    // This is redundant when using talkback
+                    .clearAndSetSemantics { invisibleToUser() }
             )
         }
 
@@ -413,6 +421,7 @@ private fun MessageSenderInformation(
 private fun MessageEventBubbleContent(
     event: TimelineItem.Event,
     onMessageLongClick: () -> Unit,
+    @Suppress("UNUSED_PARAMETER")
     inReplyToClick: () -> Unit,
     onTimestampClicked: () -> Unit,
     onMentionClicked: (Mention) -> Unit,
@@ -445,6 +454,7 @@ private fun MessageEventBubbleContent(
                 text = stringResource(CommonStrings.common_thread),
                 style = ElementTheme.typography.fontBodyXsRegular,
                 color = ElementTheme.colors.textPrimary,
+                modifier = Modifier.clearAndSetSemantics { }
             )
         }
     }
@@ -580,7 +590,8 @@ private fun MessageEventBubbleContent(
                 modifier = Modifier
                     .padding(top = topPadding, start = 8.dp, end = 8.dp)
                     .clip(RoundedCornerShape(6.dp))
-                    .clickable(enabled = true, onClick = inReplyToClick),
+                // FIXME when a node is clickable, its contents won't be added to the semantics tree of its parent
+//                    .clickable(enabled = true, onClick = inReplyToClick)
             )
         }
         if (inReplyToDetails != null) {
@@ -611,7 +622,9 @@ private fun MessageEventBubbleContent(
         timestampPosition = timestampPosition,
         inReplyToDetails = event.inReplyTo,
         canShrinkContent = event.content is TimelineItemVoiceContent,
-        modifier = bubbleModifier
+        modifier = bubbleModifier.semantics(mergeDescendants = true) {
+            contentDescription = event.safeSenderName
+        }
     )
 }
 
@@ -641,8 +654,12 @@ private fun ReplyToContent(
             )
             Spacer(modifier = Modifier.width(8.dp))
         }
+        val a11InReplyToText = stringResource(CommonStrings.common_in_reply_to, senderName)
         Column(verticalArrangement = Arrangement.SpaceBetween) {
             Text(
+                modifier = Modifier.semantics {
+                    contentDescription = a11InReplyToText
+                },
                 text = senderName,
                 style = ElementTheme.typography.fontBodySmMedium,
                 textAlign = TextAlign.Start,

diff --git a/...element/android/features/messages/impl/timeline/components/event/TimelineItemImageView.kt b/...element/android/features/messages/impl/timeline/components/event/TimelineItemImageView.kt
@@ -18,22 +18,27 @@ package io.element.android.features.messages.impl.timeline.components.event
 
 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 androidx.compose.ui.tooling.preview.PreviewParameter
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContentProvider
 import io.element.android.libraries.designsystem.components.BlurHashAsyncImage
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.matrix.ui.media.MediaRequestData
+import io.element.android.libraries.ui.strings.CommonStrings
 
 @Composable
 fun TimelineItemImageView(
     content: TimelineItemImageContent,
     modifier: Modifier = Modifier,
 ) {
+    val description = stringResource(CommonStrings.common_image)
     TimelineItemAspectRatioBox(
         aspectRatio = content.aspectRatio,
-        modifier = modifier,
+        modifier = modifier.semantics { contentDescription = description },
     ) {
         BlurHashAsyncImage(
             model = MediaRequestData(content.preferredMediaSource, MediaRequestData.Kind.File(content.body, content.mimeType)),

diff --git a/.../element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt b/.../element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt
@@ -23,6 +23,8 @@ import androidx.compose.material3.LocalTextStyle
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayout
@@ -48,7 +50,7 @@ fun TimelineItemTextView(
         val formattedBody = content.formattedBody
         val body = SpannableString(formattedBody ?: content.body)
 
-        Box(modifier) {
+        Box(modifier.semantics { contentDescription = body.toString() }) {
             EditorStyledText(
                 text = body,
                 onLinkClickedListener = onLinkClicked,

diff --git a/...element/android/features/messages/impl/timeline/components/event/TimelineItemVideoView.kt b/...element/android/features/messages/impl/timeline/components/event/TimelineItemVideoView.kt
@@ -27,6 +27,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVideoContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVideoContentProvider
@@ -42,9 +44,10 @@ fun TimelineItemVideoView(
     content: TimelineItemVideoContent,
     modifier: Modifier = Modifier,
 ) {
+    val description = stringResource(CommonStrings.common_image)
     TimelineItemAspectRatioBox(
         aspectRatio = content.aspectRatio,
-        modifier = modifier,
+        modifier = modifier.semantics { contentDescription = description },
         contentAlignment = Alignment.Center,
     ) {
         BlurHashAsyncImage(