From 3cef8c2796cf1d9be2427f6d6683fc6e33a00dc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrgen=20Wischer?=
 <33184634+unclejay80@users.noreply.github.com>
Date: Mon, 20 Jul 2026 08:50:51 +0200
Subject: [PATCH] Announce expanded/collapsed state on the timeline group
 header (#7226)

* Announce expanded/collapsed state on the timeline group header

GroupHeaderView (the accordion-style header used for grouped state
events in the timeline) uses toggleable() combined with
clearAndSetSemantics { contentDescription = text }. The
clearAndSetSemantics block discards the state information that
toggleable() would otherwise expose, so TalkBack never announces
whether the group is currently expanded or collapsed.

Add an explicit stateDescription (two new a11y_state_expanded /
a11y_state_collapsed strings in temporary.xml) alongside the existing
contentDescription so the expanded/collapsed state is communicated to
assistive technology.

Internal note: this single-file/single-root-cause fix addresses three
separate BITV findings raised in the same accessibility audit against
this component's toggle semantics.

* Update screenshots

---------

Co-authored-by: ElementBot <android@element.io>
---
 .../impl/timeline/components/group/GroupHeaderView.kt       | 6 ++++++
 libraries/ui-strings/src/main/res/values/temporary.xml      | 2 ++
 .../images/features.messages.impl_MessagesViewA11y_en.png   | 4 ++--
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/group/GroupHeaderView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/group/GroupHeaderView.kt
index 883c591fd2..9dbeb83a3c 100644
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/group/GroupHeaderView.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/group/GroupHeaderView.kt
@@ -26,9 +26,11 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.semantics.clearAndSetSemantics
 import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.stateDescription
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
@@ -37,6 +39,7 @@ import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.ui.strings.CommonStrings
 
 private val CORNER_RADIUS = 8.dp
 
@@ -52,6 +55,8 @@ fun GroupHeaderView(
     val backgroundColor = Color.Transparent
     val shape = RoundedCornerShape(CORNER_RADIUS)
 
+    val expandedStateDescription = stringResource(CommonStrings.a11y_state_expanded)
+    val collapsedStateDescription = stringResource(CommonStrings.a11y_state_collapsed)
     Box(
         modifier = modifier
             .fillMaxWidth()
@@ -62,6 +67,7 @@ fun GroupHeaderView(
             )
             .clearAndSetSemantics {
                 contentDescription = text
+                stateDescription = if (isExpanded) expandedStateDescription else collapsedStateDescription
             },
         contentAlignment = Alignment.Center
     ) {
diff --git a/libraries/ui-strings/src/main/res/values/temporary.xml b/libraries/ui-strings/src/main/res/values/temporary.xml
index c0573cc6c2..2526f254d3 100644
--- a/libraries/ui-strings/src/main/res/values/temporary.xml
+++ b/libraries/ui-strings/src/main/res/values/temporary.xml
@@ -8,6 +8,8 @@
 <resources>
     <string name="action_mark_as_read">"Mark as read"</string>
     <string name="a11y_jump_to_unread_messages">"Jump to first unread message"</string>
+    <string name="a11y_state_expanded">"Expanded"</string>
+    <string name="a11y_state_collapsed">"Collapsed"</string>
     <string name="screen_local_network_opt_in_title">Allow access to local network</string>
     <string name="screen_local_network_opt_in_subtitle">Your homeserver is on your local network. To connect, Element needs permission to reach other devices on this network.</string>
     <string name="a11y_active">Active</string>
diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesViewA11y_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesViewA11y_en.png
index b2b3f0b813..f47e74ab7b 100644
--- a/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesViewA11y_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.messages.impl_MessagesViewA11y_en.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:02c4892eaa7d27c867266c428374b64e5915ec50ddcdf8b1d532e1cbc6f56462
-size 130436
+oid sha256:5823ae9a382421609200d569799505706180b94c6923f315caa81f8767ac58f8
+size 131340