[a11y] Improve accessibility of picto next to the timestamp.

https://github.com/element-hq/customer-success/issues/572
This commit is contained in:
Benoit Marty
2025-07-09 17:03:50 +02:00
parent 62c2738de0
commit 803a5292ba
3 changed files with 20 additions and 15 deletions

View File

@@ -18,8 +18,6 @@ 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.hideFromAccessibility
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme
@@ -44,15 +42,15 @@ fun TimelineEventTimestampView(
modifier: Modifier = Modifier,
) {
val formattedTime = event.sentTime
val hasError = event.localSendState is LocalEventSendState.Failed
val hasError = event.failedToSend
val hasEncryptionCritical = event.messageShield?.isCritical.orFalse()
val isMessageEdited = event.content.isEdited()
val isMessageRedacted = event.content.isRedacted()
val tint = if (hasError || hasEncryptionCritical && !isMessageRedacted) ElementTheme.colors.textCriticalPrimary else ElementTheme.colors.textSecondary
Row(
modifier = Modifier
.padding(PaddingValues(start = TimelineEventTimestampViewDefaults.spacing))
.then(modifier),
.padding(PaddingValues(start = TimelineEventTimestampViewDefaults.spacing))
.then(modifier),
verticalAlignment = Alignment.CenterVertically,
) {
if (isMessageEdited) {
@@ -76,11 +74,13 @@ fun TimelineEventTimestampView(
contentDescription = stringResource(id = CommonStrings.common_sending_failed),
tint = tint,
modifier = Modifier
.size(15.dp, 18.dp)
.clickable(isVerifiedUserSendFailure) {
eventSink(TimelineEvents.ComputeVerifiedUserSendFailure(event))
}
.semantics { hideFromAccessibility() }
.size(15.dp, 18.dp)
.clickable(
enabled = isVerifiedUserSendFailure,
onClickLabel = stringResource(CommonStrings.action_open_context_menu),
) {
eventSink(TimelineEvents.ComputeVerifiedUserSendFailure(event))
}
)
}
@@ -89,13 +89,14 @@ fun TimelineEventTimestampView(
Spacer(modifier = Modifier.width(2.dp))
Icon(
imageVector = shield.toIcon(),
contentDescription = shield.toText(),
contentDescription = stringResource(id = CommonStrings.a11y_encryption_details),
modifier = Modifier
.size(15.dp)
.clickable {
.clickable(
onClickLabel = stringResource(CommonStrings.a11y_view_details),
) {
eventSink(TimelineEvents.ShowShieldDialog(shield))
}
.semantics { hideFromAccessibility() },
},
tint = shield.toIconColor(),
)
Spacer(modifier = Modifier.width(4.dp))

View File

@@ -140,7 +140,10 @@ internal fun TimelineItemRow(
timelineItem.safeSenderName
}
// For Polls, allow the answers to be traversed by Talkback
isTraversalGroup = timelineItem.content is TimelineItemPollContent
isTraversalGroup = timelineItem.content is TimelineItemPollContent ||
timelineItem.failedToSend ||
timelineItem.messageShield != null
// TODO Also set to true when the event has link(s)
}
// Custom clickable that applies over the whole item for accessibility
.then(

View File

@@ -8,6 +8,7 @@
<item quantity="other">"%1$d digits entered"</item>
</plurals>
<string name="a11y_edit_avatar">"Edit avatar"</string>
<string name="a11y_encryption_details">"Encryption details"</string>
<string name="a11y_hide_password">"Hide password"</string>
<string name="a11y_join_call">"Join call"</string>
<string name="a11y_jump_to_bottom">"Jump to bottom"</string>