a11y: Improve accessibility on ReactionSummaryView

Author: bmarty

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/reactionsummary/ReactionSummaryView.kt

@@ -27,6 +27,7 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.selection.selectable
 import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -45,12 +46,17 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import coil3.compose.AsyncImage
 import io.element.android.compound.theme.ElementTheme
+import io.element.android.features.messages.impl.timeline.a11y.a11yReactionDetails
 import io.element.android.features.messages.impl.timeline.components.REACTION_IMAGE_ASPECT_RATIO
 import io.element.android.features.messages.impl.timeline.model.AggregatedReaction
 import io.element.android.libraries.designsystem.components.avatar.Avatar
@@ -140,9 +146,7 @@ private fun ReactionSummaryViewContent(
         HorizontalPager(state = pagerState) { page ->
             LazyColumn(modifier = Modifier.fillMaxHeight()) {
                 items(summary.reactions[page].senders) { sender ->
-
                     val user = sender.user ?: MatrixUser(userId = sender.senderId)
-
                     SenderRow(
                         avatarData = user.getAvatarData(AvatarSize.UserListItem),
                         name = user.displayName ?: user.userId.value,
@@ -166,21 +170,32 @@ private fun AggregatedReactionButton(
     } else {
         Color.Transparent
     }
-
     val textColor = if (isHighlighted) {
         MaterialTheme.colorScheme.inversePrimary
     } else {
         ElementTheme.colors.textPrimary
     }
-
     val roundedCornerShape = RoundedCornerShape(corner = CornerSize(percent = 50))
+    val a11yText = a11yReactionDetails(
+        emoji = reaction.key,
+        userAlreadyReacted = reaction.isHighlighted,
+        reactionCount = reaction.count,
+    )
     Surface(
         modifier = Modifier
             .background(buttonColor, roundedCornerShape)
             .clip(roundedCornerShape)
             .clickable(onClick = onClick)
-            .padding(vertical = 8.dp, horizontal = 12.dp),
-        color = buttonColor
+            .padding(vertical = 8.dp, horizontal = 12.dp)
+            .selectable(
+                selected = isHighlighted,
+                role = Role.Tab,
+                onClick = onClick,
+            )
+            .clearAndSetSemantics {
+                contentDescription = a11yText
+            },
+        color = buttonColor,
     ) {
         Row(
             verticalAlignment = Alignment.CenterVertically,
@@ -230,7 +245,8 @@ private fun SenderRow(
         modifier = Modifier
             .fillMaxWidth()
             .heightIn(min = 56.dp)
-            .padding(start = 16.dp, top = 4.dp, end = 16.dp, bottom = 4.dp),
+            .padding(start = 16.dp, top = 4.dp, end = 16.dp, bottom = 4.dp)
+            .semantics(mergeDescendants = true) {},
         verticalAlignment = Alignment.CenterVertically
     ) {
         Avatar(avatarData)