letro/letro-android
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

a11y: Improve accessibility on ReactionSummaryView

Browse Source
This commit is contained in:
Benoit Marty
2025-06-16 14:40:03 +02:00
parent 2dd31d1b3a
commit 37425b192e
1 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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)