Add "View avatar" content description to all clickable Avatar that will open the avatar preview. (#4948)

* Add "View avatar" content description to all clickable Avatar that will open the avatar preview.

* Improve accessibility of avatar images.
This commit is contained in:
Benoit Marty 2025-06-30 17:06:10 +02:00 committed by GitHub
parent c54608da44
commit c804fe0558
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 38 additions and 0 deletions

View file

@ -58,6 +58,7 @@ import io.element.android.libraries.designsystem.components.button.MainActionBut
import io.element.android.libraries.designsystem.components.list.ListItemContent
import io.element.android.libraries.designsystem.components.preferences.PreferenceCategory
import io.element.android.libraries.designsystem.components.preferences.PreferenceSwitch
import io.element.android.libraries.designsystem.modifiers.a11yClickLabel
import io.element.android.libraries.designsystem.modifiers.niceClickable
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
@ -400,6 +401,7 @@ private fun RoomHeaderSection(
.padding(horizontal = 16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
val actionView = stringResource(CommonStrings.action_view)
Avatar(
avatarData = AvatarData(roomId.value, roomName, avatarUrl, AvatarSize.RoomHeader),
avatarType = AvatarType.Room(
@ -408,9 +410,11 @@ private fun RoomHeaderSection(
}.toPersistentList(),
isTombstoned = isTombstoned,
),
contentDescription = avatarUrl?.let { stringResource(CommonStrings.a11y_room_avatar) },
modifier = Modifier
.clickable(enabled = avatarUrl != null) { openAvatarPreview(avatarUrl!!) }
.testTag(TestTags.roomDetailAvatar)
.a11yClickLabel(avatarUrl?.let { actionView })
)
TitleAndSubtitle(
title = roomName,

View file

@ -31,6 +31,7 @@ import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.modifiers.a11yClickLabel
import io.element.android.libraries.designsystem.modifiers.niceClickable
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@ -60,13 +61,16 @@ fun UserProfileHeaderSection(
.padding(horizontal = 16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
val actionView = stringResource(CommonStrings.action_view)
Avatar(
avatarData = AvatarData(userId.value, userName, avatarUrl, AvatarSize.UserHeader),
avatarType = AvatarType.User,
contentDescription = avatarUrl?.let { stringResource(CommonStrings.a11y_user_avatar) },
modifier = Modifier
.clip(CircleShape)
.clickable(enabled = avatarUrl != null) { openAvatarPreview(avatarUrl!!) }
.testTag(TestTags.memberDetailAvatar)
.a11yClickLabel(avatarUrl?.let { actionView })
)
Spacer(modifier = Modifier.height(24.dp))
if (userName != null) {