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

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

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

8
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/DmAvatars.kt
View file

@ -23,13 +23,16 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.CompositingStrategy
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.LayoutDirection
import io.element.android.libraries.designsystem.modifiers.a11yClickLabel
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.text.toPx
import io.element.android.libraries.testtags.TestTags
import io.element.android.libraries.testtags.testTag
import io.element.android.libraries.ui.strings.CommonStrings
/** Ratio between the box size (120 on Figma) and the avatar size (75 on Figma). */
private const val SIZE_RATIO = 1.6f
@ -49,6 +52,7 @@ fun DmAvatars(
val boxSizePx = boxSize.toPx()
val otherAvatarRadius = otherUserAvatarData.size.dp.toPx() / 2
val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
val actionView = stringResource(CommonStrings.action_view)
Box(
modifier = modifier.size(boxSize),
) {
@ -56,6 +60,7 @@ fun DmAvatars(
Avatar(
avatarData = userAvatarData,
avatarType = AvatarType.User,
contentDescription = userAvatarData.url?.let { stringResource(CommonStrings.a11y_your_avatar) },
modifier = Modifier
.align(Alignment.BottomStart)
.graphicsLayer {
@ -82,11 +87,13 @@ fun DmAvatars(
.clickable(enabled = userAvatarData.url != null) {
userAvatarData.url?.let { openAvatarPreview(it) }
}
.a11yClickLabel(userAvatarData.url?.let { actionView })
)
// Draw other user avatar
Avatar(
avatarData = otherUserAvatarData,
avatarType = AvatarType.User,
contentDescription = otherUserAvatarData.url?.let { stringResource(CommonStrings.a11y_other_user_avatar) },
modifier = Modifier
.align(Alignment.TopEnd)
.clip(CircleShape)
@ -94,6 +101,7 @@ fun DmAvatars(
otherUserAvatarData.url?.let { openOtherAvatarPreview(it) }
}
.testTag(TestTags.memberDetailAvatar)
.a11yClickLabel(otherUserAvatarData.url?.let { actionView })
)
}
}

17
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/modifiers/Clickable.kt
View file

@ -12,6 +12,8 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.semantics.onClick
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
fun Modifier.clickableIfNotNull(onClick: (() -> Unit)? = null): Modifier = this.then(
@ -29,3 +31,18 @@ fun Modifier.niceClickable(
.clickable { onClick() }
.padding(horizontal = 4.dp)
}
fun Modifier.a11yClickLabel(
label: String?,
): Modifier = then(
if (label != null) {
Modifier.semantics {
onClick(
label = label,
action = null,
)
}
} else {
Modifier
}
)