Sulkta-OSS/element-x-ada
3
0
Fork 0
Code Issues 1 Pull requests 10 Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

29
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineEventTimestampView.kt
View file

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

5
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemRow.kt
View file

@ -140,7 +140,10 @@ internal fun TimelineItemRow(
timelineItem.safeSenderName timelineItem.safeSenderName
} }
// For Polls, allow the answers to be traversed by Talkback // 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 // Custom clickable that applies over the whole item for accessibility
.then( .then(

1
libraries/ui-strings/src/main/res/values/localazy.xml
View file

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