[a11y] Improve accessibility of screen headers.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/threads/list/ThreadsListView.kt

@@ -31,6 +31,9 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.heading
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
@@ -79,7 +82,18 @@ fun ThreadsListView(
         topBar = {
             TopAppBar(
                 title = {
-                    Row(horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically) {
+                    val description = stringResource(
+                        CommonStrings.a11y_threads_in_room,
+                        state.roomName,
+                    )
+                    Row(
+                        horizontalArrangement = Arrangement.spacedBy(8.dp),
+                        verticalAlignment = Alignment.CenterVertically,
+                        modifier = Modifier.clearAndSetSemantics {
+                            heading()
+                            contentDescription = description
+                        },
+                    ) {
                         Avatar(
                             avatarData = AvatarData(
                                 id = state.roomId.value,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/topbars/MessagesViewTopBar.kt

@@ -80,7 +80,8 @@ internal fun MessagesViewTopBar(
             Row(
                 modifier = Modifier
                     .clip(roundedCornerShape)
-                    .clickable { onRoomDetailsClick() },
+                    .clickable { onRoomDetailsClick() }
+                    .semantics { heading() },
                 horizontalArrangement = Arrangement.spacedBy(4.dp),
                 verticalAlignment = Alignment.CenterVertically,
             ) {
@@ -158,10 +159,7 @@ private fun RoomAvatarAndNameRow(
         )
         Text(
             modifier = Modifier
-                .padding(start = 8.dp)
+                .padding(start = 8.dp),
-                .semantics {
-                    heading()
-                },
             text = roomName ?: stringResource(CommonStrings.common_no_room_name),
             style = ElementTheme.typography.fontBodyLgMedium,
             fontStyle = FontStyle.Italic.takeIf { roomName == null },

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/topbars/ThreadTopBar.kt

@@ -17,8 +17,9 @@ 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.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.heading
-import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
@@ -58,7 +59,18 @@ internal fun ThreadTopBar(
             BackButton(onClick = onBackClick)
         },
         title = {
-            Row(verticalAlignment = Alignment.CenterVertically) {
+            val name = roomName ?: stringResource(CommonStrings.common_no_room_name)
+            val description = stringResource(
+                CommonStrings.a11y_thread_in_room,
+                name,
+            )
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier.clearAndSetSemantics {
+                    heading()
+                    contentDescription = description
+                },
+            ) {
                 Avatar(
                     avatarData = roomAvatarData,
                     avatarType = AvatarType.Room(
@@ -69,17 +81,14 @@ internal fun ThreadTopBar(
                 Column(
                     modifier = Modifier
                         .fillMaxWidth()
-                        .padding(horizontal = 8.dp)
+                        .padding(horizontal = 8.dp),
-                        .semantics {
-                            heading()
-                        },
                 ) {
                     Text(
                         text = stringResource(CommonStrings.common_thread),
                         style = ElementTheme.typography.fontBodyLgMedium,
                     )
                     Text(
-                        text = roomName ?: stringResource(CommonStrings.common_no_room_name),
+                        text = name,
                         style = ElementTheme.typography.fontBodySmRegular,
                         fontStyle = FontStyle.Italic.takeIf { roomName == null },
                         color = ElementTheme.colors.textSecondary,

libraries/ui-strings/src/main/res/values/localazy.xml

@@ -54,6 +54,8 @@
   <string name="a11y_start_call">"Start a call"</string>
   <string name="a11y_start_video_call">"Start a video call"</string>
   <string name="a11y_start_voice_call">"Start a voice call"</string>
+  <string name="a11y_thread_in_room">"Thread in %1$s"</string>
+  <string name="a11y_threads_in_room">"Threads in %1$s"</string>
   <string name="a11y_tombstoned_room">"Tombstoned room"</string>
   <string name="a11y_user_avatar">"User avatar"</string>
   <string name="a11y_user_menu">"User menu"</string>