[a11y] Add content descriptions to room list item indicators (#5236)

* [a11y] Add content descriptions to room list item indicators. These can now be read aloud as 'ongoing call', 'new messages', 'new mentions'.

* Add `contentDescription` to `UnreadIndicatorAtom` as an optional value

* Make the 'ongoing call', 'new messages', etc. indicators be read aloud before the latest event of the room summary

---------

Co-authored-by: ElementBot <[email protected]>

Author: jmartinesp

features/home/impl/src/main/kotlin/io/element/android/features/home/impl/components/RoomSummaryRow.kt

@@ -35,6 +35,7 @@ import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.home.impl.R
@@ -285,9 +286,13 @@ private fun MessagePreviewAndIndicatorRow(
             maxLines = 2,
             overflow = TextOverflow.Ellipsis
         )
+
         // Call and unread
         Row(
-            modifier = Modifier.height(16.dp),
+            modifier = Modifier
+                .height(16.dp)
+                // Used to force this line to be read aloud earlier than the latest event when using Talkback
+                .zIndex(-1f),
             horizontalArrangement = Arrangement.spacedBy(8.dp),
             verticalAlignment = Alignment.CenterVertically,
         ) {
@@ -303,8 +308,10 @@ private fun MessagePreviewAndIndicatorRow(
                 MentionIndicatorAtom()
             }
             if (room.hasNewContent) {
+                val contentDescription = stringResource(CommonStrings.a11y_notifications_new_messages)
                 UnreadIndicatorAtom(
-                    color = tint
+                    color = tint,
+                    contentDescription = contentDescription,
                 )
             }
         }
@@ -371,7 +378,7 @@ private fun OnGoingCallIcon(
     Icon(
         modifier = Modifier.size(16.dp),
         imageVector = CompoundIcons.VideoCallSolid(),
-        contentDescription = null,
+        contentDescription = stringResource(CommonStrings.a11y_notifications_ongoing_call),
         tint = color,
     )
 }
@@ -380,7 +387,7 @@ private fun OnGoingCallIcon(
 private fun NotificationOffIndicatorAtom() {
     Icon(
         modifier = Modifier.size(16.dp),
-        contentDescription = null,
+        contentDescription = stringResource(CommonStrings.a11y_notifications_muted),
         imageVector = CompoundIcons.NotificationsOffSolid(),
         tint = ElementTheme.colors.iconQuaternary,
     )
@@ -390,7 +397,7 @@ private fun NotificationOffIndicatorAtom() {
 private fun MentionIndicatorAtom() {
     Icon(
         modifier = Modifier.size(16.dp),
-        contentDescription = null,
+        contentDescription = stringResource(CommonStrings.a11y_notifications_new_mentions),
         imageVector = CompoundIcons.Mention(),
         tint = ElementTheme.colors.unreadIndicator,
     )

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/UnreadIndicatorAtom.kt

@@ -15,6 +15,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
@@ -28,9 +30,13 @@ fun UnreadIndicatorAtom(
     size: Dp = 12.dp,
     color: Color = ElementTheme.colors.unreadIndicator,
     isVisible: Boolean = true,
+    contentDescription: String? = null,
 ) {
     Box(
         modifier = modifier
+            .semantics {
+                contentDescription?.let { this.contentDescription = it }
+            }
             .size(size)
             .clip(CircleShape)
             .background(if (isVisible) color else Color.Transparent)