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

[a11y] Improve accessibility of media controller

Browse source
This commit is contained in:
Benoit Marty 2026-05-20 17:04:24 +02:00
parent bd01b27517
commit 4641ae666e
2 changed files with 34 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

39
libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/local/player/MediaPlayerControllerView.kt
View file

@ -28,6 +28,9 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.stateDescription
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
@ -100,36 +103,54 @@ fun MediaPlayerControllerView(
contentColor = ElementTheme.colors.iconOnSolidPrimary,
)
}
val a11yPause = stringResource(CommonStrings.a11y_pause)
val a11yPlay = stringResource(CommonStrings.a11y_play)
IconButton(
modifier = Modifier
.size(36.dp),
.size(36.dp)
.semantics {
stateDescription = if (state.isPlaying) a11yPause else a11yPlay
},
onClick = onTogglePlay,
colors = colors,
) {
if (state.isPlaying) {
Icon(
imageVector = CompoundIcons.PauseSolid(),
contentDescription = stringResource(CommonStrings.a11y_pause)
contentDescription = null,
)
} else {
Icon(
imageVector = CompoundIcons.PlaySolid(),
contentDescription = stringResource(CommonStrings.a11y_play)
contentDescription = null,
)
}
}
val position = state.displayProgressInMillis.toHumanReadableDuration()
val a11yPosition = stringResource(CommonStrings.a11y_position, position)
Text(
modifier = Modifier
.widthIn(min = 48.dp)
.padding(horizontal = 8.dp),
text = state.displayProgressInMillis.toHumanReadableDuration(),
.padding(horizontal = 8.dp)
.semantics {
contentDescription = a11yPosition
},
text = position,
textAlign = TextAlign.Center,
color = ElementTheme.colors.textPrimary,
style = ElementTheme.typography.fontBodyXsMedium,
)
var lastSelectedValue by remember { mutableFloatStateOf(-1f) }
Slider(
modifier = Modifier.weight(1f),
modifier = Modifier
.weight(1f)
.semantics {
// Speak out a progress percent instead of milliseconds
stateDescription = buildString {
append((state.progressAsFloat * 100).toInt())
append("%")
}
},
valueRange = 0f..state.durationInMillis.toFloat(),
value = lastSelectedValue.takeIf { it >= 0 }
?: state.seekingToMillis?.toFloat()
@ -146,10 +167,14 @@ fun MediaPlayerControllerView(
val formattedDuration = remember(state.durationInMillis) {
state.durationInMillis.toHumanReadableDuration()
}
val a11yDuration = stringResource(CommonStrings.a11y_duration, formattedDuration)
Text(
modifier = Modifier
.widthIn(min = 48.dp)
.padding(horizontal = 8.dp),
.padding(horizontal = 8.dp)
.semantics {
contentDescription = a11yDuration
},
text = formattedDuration,
textAlign = TextAlign.Center,
color = ElementTheme.colors.textPrimary,

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

@ -9,6 +9,7 @@
<item quantity="one">"%1$d digit entered"</item>
<item quantity="other">"%1$d digits entered"</item>
</plurals>
<string name="a11y_duration">"Duration: %1$s"</string>
<string name="a11y_edit_avatar">"Edit avatar"</string>
<string name="a11y_edit_room_address_hint">"The full address will be %1$s"</string>
<string name="a11y_encryption_details">"Encryption details"</string>
@ -33,6 +34,7 @@
<string name="a11y_playback_speed">"Playback speed"</string>
<string name="a11y_poll">"Poll"</string>
<string name="a11y_poll_end">"Ended poll"</string>
<string name="a11y_position">"Position: %1$s"</string>
<string name="a11y_qr_code">"QR Code"</string>
<string name="a11y_react_with">"React with %1$s"</string>
<string name="a11y_react_with_other_emojis">"React with other emojis"</string>