diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt index f849effb1a..a16f1efa19 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt @@ -39,7 +39,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource import androidx.compose.ui.semantics.clearAndSetSemantics -import androidx.compose.ui.semantics.contentDescription +import androidx.compose.ui.semantics.onClick import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.traversalIndex import androidx.compose.ui.text.style.TextAlign @@ -53,6 +53,7 @@ import io.element.android.features.messages.impl.crypto.sendfailure.VerifiedUser import io.element.android.features.messages.impl.crypto.sendfailure.VerifiedUserSendFailure.ChangedIdentity import io.element.android.features.messages.impl.crypto.sendfailure.VerifiedUserSendFailure.None import io.element.android.features.messages.impl.crypto.sendfailure.VerifiedUserSendFailure.UnsignedDevice +import io.element.android.features.messages.impl.timeline.a11y.a11yReactionAction import io.element.android.features.messages.impl.timeline.components.MessageShieldView import io.element.android.features.messages.impl.timeline.model.TimelineItem import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContent @@ -438,11 +439,10 @@ private fun EmojiButton( } else { Color.Transparent } - val description = if (isHighlighted) { - stringResource(id = CommonStrings.a11y_remove_reaction_with, emoji) - } else { - stringResource(id = CommonStrings.a11y_react_with, emoji) - } + val a11yClickLabel = a11yReactionAction( + emoji = emoji, + userAlreadyReacted = isHighlighted, + ) Box( modifier = modifier .size(48.dp) @@ -454,7 +454,12 @@ private fun EmojiButton( interactionSource = remember { MutableInteractionSource() } ) .semantics { - contentDescription = description + onClick( + label = a11yClickLabel, + ) { + onClick(emoji) + true + } }, contentAlignment = Alignment.Center ) { diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/a11y/Reactions.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/a11y/Reactions.kt new file mode 100644 index 0000000000..9da0168b38 --- /dev/null +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/a11y/Reactions.kt @@ -0,0 +1,61 @@ +/* + * Copyright 2025 New Vector Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial + * Please see LICENSE files in the repository root for full details. + */ + +package io.element.android.features.messages.impl.timeline.a11y + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.ReadOnlyComposable +import androidx.compose.ui.res.pluralStringResource +import androidx.compose.ui.res.stringResource +import io.element.android.features.messages.impl.R +import io.element.android.libraries.ui.strings.CommonStrings + +@Composable +@ReadOnlyComposable +fun a11yReactionAction( + emoji: String, + userAlreadyReacted: Boolean, +): String { + return if (userAlreadyReacted) { + stringResource(id = CommonStrings.a11y_remove_reaction_with, emoji) + } else { + stringResource(id = CommonStrings.a11y_react_with, emoji) + } +} + +@Composable +@ReadOnlyComposable +fun a11yReactionDetails( + emoji: String, + userAlreadyReacted: Boolean, + reactionCount: Int, +): String { + val reaction = if (emoji.startsWith("mxc://")) { + stringResource(CommonStrings.common_an_image) + } else { + emoji + } + return if (userAlreadyReacted) { + if (reactionCount == 1) { + stringResource(R.string.screen_room_timeline_reaction_you_a11y, reaction) + } else { + pluralStringResource( + R.plurals.screen_room_timeline_reaction_including_you_a11y, + reactionCount - 1, + reactionCount - 1, + reaction, + ) + } + } else { + pluralStringResource( + R.plurals.screen_room_timeline_reaction_a11y, + reactionCount, + reactionCount, + reaction, + ) + } +} diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessagesReactionButton.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessagesReactionButton.kt index 46133b69a7..b0026fb449 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessagesReactionButton.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessagesReactionButton.kt @@ -29,12 +29,17 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.stringResource +import androidx.compose.ui.semantics.clearAndSetSemantics +import androidx.compose.ui.semantics.contentDescription +import androidx.compose.ui.semantics.onClick 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.R +import io.element.android.features.messages.impl.timeline.a11y.a11yReactionAction +import io.element.android.features.messages.impl.timeline.a11y.a11yReactionDetails import io.element.android.features.messages.impl.timeline.model.AggregatedReaction import io.element.android.features.messages.impl.timeline.model.AggregatedReactionProvider import io.element.android.features.messages.impl.timeline.model.aTimelineItemReactions @@ -68,6 +73,27 @@ fun MessagesReactionButton( buttonColor } + val a11yText = when (content) { + is MessagesReactionsButtonContent.Icon -> stringResource(id = R.string.screen_room_timeline_add_reaction) + is MessagesReactionsButtonContent.Text -> content.text + is MessagesReactionsButtonContent.Reaction -> { + a11yReactionDetails( + emoji = content.reaction.key, + userAlreadyReacted = content.isHighlighted, + reactionCount = content.reaction.count, + ) + } + } + + val a11yClickLabel = if (content is MessagesReactionsButtonContent.Reaction) { + a11yReactionAction( + emoji = content.reaction.key, + userAlreadyReacted = content.isHighlighted + ) + } else { + "" + } + Surface( modifier = modifier .background(Color.Transparent) @@ -86,7 +112,18 @@ fun MessagesReactionButton( // Inner border, to highlight when selected .border(BorderStroke(1.dp, borderColor), RoundedCornerShape(corner = CornerSize(12.dp))) .background(buttonColor, RoundedCornerShape(corner = CornerSize(12.dp))) - .padding(vertical = 4.dp, horizontal = 10.dp), + .padding(vertical = 4.dp, horizontal = 10.dp) + .clearAndSetSemantics { + contentDescription = a11yText + if (content is MessagesReactionsButtonContent.Reaction) { + onClick( + label = a11yClickLabel + ) { + onClick() + true + } + } + }, color = buttonColor ) { when (content) { diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiItem.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiItem.kt index a27de9c324..b6ad695aa8 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiItem.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiItem.kt @@ -22,7 +22,6 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.res.stringResource import androidx.compose.ui.semantics.clearAndSetSemantics import androidx.compose.ui.semantics.contentDescription import androidx.compose.ui.unit.TextUnit @@ -30,11 +29,11 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import io.element.android.compound.theme.ElementTheme import io.element.android.emojibasebindings.Emoji +import io.element.android.features.messages.impl.timeline.a11y.a11yReactionAction import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.PreviewsDayNight import io.element.android.libraries.designsystem.text.toDp import io.element.android.libraries.designsystem.theme.components.Text -import io.element.android.libraries.ui.strings.CommonStrings @Composable fun EmojiItem( @@ -49,11 +48,10 @@ fun EmojiItem( } else { Color.Transparent } - val description = if (isSelected) { - stringResource(id = CommonStrings.a11y_remove_reaction_with, item.unicode) - } else { - stringResource(id = CommonStrings.a11y_react_with, item.unicode) - } + val description = a11yReactionAction( + emoji = item.unicode, + userAlreadyReacted = isSelected, + ) Box( modifier = modifier .sizeIn(minWidth = 40.dp, minHeight = 40.dp) diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/reactionsummary/ReactionSummaryView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/reactionsummary/ReactionSummaryView.kt index b1aa726628..c14d792252 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/reactionsummary/ReactionSummaryView.kt +++ b/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) diff --git a/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/MessagesViewTest.kt b/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/MessagesViewTest.kt index 4f6ac91890..d433614537 100644 --- a/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/MessagesViewTest.kt +++ b/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/MessagesViewTest.kt @@ -391,7 +391,10 @@ class MessagesViewTest { rule.setMessagesView( state = state, ) - rule.onAllNodesWithText("👍️").onFirst().performClick() + rule.onAllNodesWithText( + text = "👍️", + useUnmergedTree = true, + ).onFirst().performClick() eventsRecorder.assertSingle(MessagesEvents.ToggleReaction("👍️", timelineItem.eventOrTransactionId)) } @@ -411,7 +414,10 @@ class MessagesViewTest { rule.setMessagesView( state = state, ) - rule.onAllNodesWithText("👍️").onFirst().performTouchInput { longClick() } + rule.onAllNodesWithText( + text = "👍️", + useUnmergedTree = true, + ).onFirst().performTouchInput { longClick() } eventsRecorder.assertSingle(ReactionSummaryEvents.ShowReactionSummary(timelineItem.eventId!!, timelineItem.reactionsState.reactions, "👍️")) }