Improve accessibility of the timeline (#4579)

* Make whole messages selectable and readable as a single unit when possible.
* Make most UI components not clickable when talkback is enabled.
* Make voice messages work with talkback too.
* Read grouped state events even if the events are collapsed.
* Move image and video item actions to the timeline item.
* Improve accessibility in the message context menu too
* Fix a11y issue on add attachment button.
* Add `contentDescription` to file icon so it's read aloud

---------

Co-authored-by: Benoit Marty <benoit@matrix.org>
This commit is contained in:
Jorge Martin Espinosa 2025-04-15 17:28:29 +02:00 committed by GitHub
parent f9c00ac99d
commit 740c28eda9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 226 additions and 70 deletions

View file

@ -19,13 +19,11 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.ui.strings.CommonStrings
/**
* Button with colored background.
@ -35,6 +33,7 @@ import io.element.android.libraries.ui.strings.CommonStrings
fun IconColorButton(
onClick: () -> Unit,
imageVector: ImageVector,
contentDescription: String?,
modifier: Modifier = Modifier,
buttonSize: ButtonSize = ButtonSize.Large,
iconColorButtonStyle: IconColorButtonStyle = IconColorButtonStyle.Primary,
@ -55,7 +54,7 @@ fun IconColorButton(
.background(bgColor)
.padding(buttonSize.toContainerPadding()),
imageVector = imageVector,
contentDescription = stringResource(CommonStrings.action_close),
contentDescription = contentDescription,
tint = ElementTheme.colors.iconOnSolidPrimary
)
}
@ -101,6 +100,7 @@ internal fun IconColorButtonPreview() = ElementPreview {
IconColorButton(
onClick = {},
imageVector = CompoundIcons.Close(),
contentDescription = null,
buttonSize = size,
iconColorButtonStyle = style,
)