[a11y] voice message improvements (#5980)

* A11Y: ensure a11y focus is not lost and reset to the back button when the user start playing a pending voice message.

* A11Y: ensure a11y focus is not lost and reset to the back button when the user use the keyboard to focus the send button and press the space bar to perform a click.

* Cleanup code. This if was not necessary.

* Small rework to prepare a bugfix. No behavior / UI change.

* Ensure that the keyboard focus and accessibility focus is not lost when deleting a pending voice message.

* Update screenshots

* Improve code readability.

* Update screenshots

---------

Co-authored-by: ElementBot <android@element.io>

Author: bmarty

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt

@@ -29,60 +29,49 @@ import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
-import io.element.android.libraries.matrix.api.core.EventId
-import io.element.android.libraries.matrix.api.timeline.item.event.toEventOrTransactionId
-import io.element.android.libraries.textcomposer.model.MessageComposerMode
 
 /**
  * Send button for the message composer.
  * Figma: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=1956-37575&node-type=frame&m=dev
  * Temporary Figma : https://www.figma.com/design/Ni6Ii8YKtmXCKYNE90cC67/Timeline-(new)?node-id=2274-39944&m=dev
  */
 @Composable
-internal fun SendButton(
+internal fun SendButtonIcon(
     canSendMessage: Boolean,
-    onClick: () -> Unit,
-    composerMode: MessageComposerMode,
+    isEditing: Boolean,
     modifier: Modifier = Modifier,
 ) {
-    IconButton(
+    val iconVector = when {
+        isEditing -> CompoundIcons.Check()
+        else -> CompoundIcons.SendSolid()
+    }
+    val iconStartPadding = when {
+        isEditing -> 0.dp
+        else -> 2.dp
+    }
+    Box(
         modifier = modifier
-            .size(48.dp),
-        onClick = onClick,
-        enabled = canSendMessage,
+            .clip(CircleShape)
+            .size(36.dp)
+            .buttonBackgroundModifier(canSendMessage)
     ) {
-        val iconVector = when {
-            composerMode.isEditing -> CompoundIcons.Check()
-            else -> CompoundIcons.SendSolid()
-        }
-        val iconStartPadding = when {
-            composerMode.isEditing -> 0.dp
-            else -> 2.dp
-        }
-        Box(
+        Icon(
             modifier = Modifier
-                .clip(CircleShape)
-                .size(36.dp)
-                .buttonBackgroundModifier(canSendMessage)
-        ) {
-            Icon(
-                modifier = Modifier
-                    .padding(start = iconStartPadding)
-                    .align(Alignment.Center),
-                imageVector = iconVector,
-                // Note: accessibility is managed in TextComposer.
-                contentDescription = null,
-                tint = if (canSendMessage) {
-                    if (ElementTheme.colors.isLight) {
-                        ElementTheme.colors.iconOnSolidPrimary
-                    } else {
-                        ElementTheme.colors.iconPrimary
-                    }
+                .padding(start = iconStartPadding)
+                .align(Alignment.Center),
+            imageVector = iconVector,
+            // Note: accessibility is managed in TextComposer.
+            contentDescription = null,
+            tint = if (canSendMessage) {
+                if (ElementTheme.colors.isLight) {
+                    ElementTheme.colors.iconOnSolidPrimary
                 } else {
-                    ElementTheme.colors.iconQuaternary
+                    ElementTheme.colors.iconPrimary
                 }
-            )
-        }
+            } else {
+                ElementTheme.colors.iconQuaternary
+            }
+        )
     }
 }
 
@@ -113,13 +102,19 @@ private fun Modifier.buttonBackgroundModifier(
 
 @PreviewsDayNight
 @Composable
-internal fun SendButtonPreview() = ElementPreview {
-    val normalMode = MessageComposerMode.Normal
-    val editMode = MessageComposerMode.Edit(EventId("\$id").toEventOrTransactionId(), "")
+internal fun SendButtonIconPreview() = ElementPreview {
     Row {
-        SendButton(canSendMessage = true, onClick = {}, composerMode = normalMode)
-        SendButton(canSendMessage = false, onClick = {}, composerMode = normalMode)
-        SendButton(canSendMessage = true, onClick = {}, composerMode = editMode)
-        SendButton(canSendMessage = false, onClick = {}, composerMode = editMode)
+        IconButton(onClick = {}) {
+            SendButtonIcon(canSendMessage = true, isEditing = false)
+        }
+        IconButton(onClick = {}) {
+            SendButtonIcon(canSendMessage = false, isEditing = false)
+        }
+        IconButton(onClick = {}) {
+            SendButtonIcon(canSendMessage = true, isEditing = true)
+        }
+        IconButton(onClick = {}) {
+            SendButtonIcon(canSendMessage = false, isEditing = true)
+        }
     }
 }

…es/textcomposer/components/SendButton.kt …extcomposer/components/SendButtonIcon.ktlibraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButton.kt renamed to libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButtonIcon.kt libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButton.kt renamed to libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButtonIcon.kt

@@ -23,41 +23,35 @@ import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.ui.strings.CommonStrings
 
 @Composable
-fun VoiceMessageDeleteButton(
+fun VoiceMessageDeleteButtonIcon(
     enabled: Boolean,
-    onClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    IconButton(
-        modifier = modifier
-            .size(48.dp),
-        enabled = enabled,
-        onClick = onClick,
-    ) {
-        Icon(
-            modifier = Modifier.size(24.dp),
-            imageVector = CompoundIcons.Delete(),
-            contentDescription = stringResource(CommonStrings.a11y_delete),
-            tint = if (enabled) {
-                ElementTheme.colors.iconCriticalPrimary
-            } else {
-                ElementTheme.colors.iconDisabled
-            },
-        )
-    }
+    Icon(
+        modifier = modifier.size(24.dp),
+        imageVector = CompoundIcons.Delete(),
+        contentDescription = stringResource(CommonStrings.a11y_delete),
+        tint = if (enabled) {
+            ElementTheme.colors.iconCriticalPrimary
+        } else {
+            ElementTheme.colors.iconDisabled
+        },
+    )
 }
 
 @PreviewsDayNight
 @Composable
-internal fun VoiceMessageDeleteButtonPreview() = ElementPreview {
+internal fun VoiceMessageDeleteButtonIconPreview() = ElementPreview {
     Row {
-        VoiceMessageDeleteButton(
-            enabled = true,
-            onClick = {},
-        )
-        VoiceMessageDeleteButton(
-            enabled = false,
-            onClick = {},
-        )
+        IconButton(onClick = {}) {
+            VoiceMessageDeleteButtonIcon(
+                enabled = true,
+            )
+        }
+        IconButton(onClick = {}) {
+            VoiceMessageDeleteButtonIcon(
+                enabled = false,
+            )
+        }
     }
 }

…r/components/VoiceMessageDeleteButton.kt …mponents/VoiceMessageDeleteButtonIcon.ktlibraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessageDeleteButton.kt renamed to libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessageDeleteButtonIcon.kt libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessageDeleteButton.kt renamed to libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessageDeleteButtonIcon.kt

@@ -67,32 +67,20 @@ internal fun VoiceMessagePreview(
             .heightIn(26.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
-        if (isPlaying) {
-            PlayerButton(
-                type = PlayerButtonType.Pause,
-                onClick = onPauseClick,
-                enabled = isInteractive,
-            )
-        } else {
-            PlayerButton(
-                type = PlayerButtonType.Play,
-                onClick = onPlayClick,
-                enabled = isInteractive
-            )
-        }
-
+        PlayerButton(
+            type = if (isPlaying) PlayerButtonType.Pause else PlayerButtonType.Play,
+            onClick = if (isPlaying) onPauseClick else onPlayClick,
+            enabled = isInteractive,
+        )
         Spacer(modifier = Modifier.width(8.dp))
-
         Text(
             text = time.formatShort(),
             color = ElementTheme.colors.textSecondary,
             style = ElementTheme.typography.fontBodySmMedium,
             maxLines = 1,
             overflow = TextOverflow.Ellipsis,
         )
-
         Spacer(modifier = Modifier.width(12.dp))
-
         WaveformPlaybackView(
             modifier = Modifier
                 .weight(1f)

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessagePreview.kt

@@ -14,9 +14,8 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.hapticfeedback.HapticFeedbackType
-import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
@@ -25,49 +24,25 @@ import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.utils.CommonDrawables
-import io.element.android.libraries.textcomposer.model.VoiceMessageRecorderEvent
 
 @Composable
-internal fun VoiceMessageRecorderButton(
+internal fun VoiceMessageRecorderButtonIcon(
     isRecording: Boolean,
-    onEvent: (VoiceMessageRecorderEvent) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    val hapticFeedback = LocalHapticFeedback.current
-
-    val performHapticFeedback = {
-        hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
-    }
-
     if (isRecording) {
-        StopButton(
-            modifier = modifier,
-            onClick = {
-                performHapticFeedback()
-                onEvent(VoiceMessageRecorderEvent.Stop)
-            }
-        )
+        StopButton(modifier)
     } else {
-        StartButton(
-            modifier = modifier,
-            onClick = {
-                performHapticFeedback()
-                onEvent(VoiceMessageRecorderEvent.Start)
-            }
-        )
+        StartButton(modifier)
     }
 }
 
 @Composable
 private fun StartButton(
-    onClick: () -> Unit,
     modifier: Modifier = Modifier,
-) = IconButton(
-    modifier = modifier.size(48.dp),
-    onClick = onClick,
 ) {
     Icon(
-        modifier = Modifier.size(24.dp),
+        modifier = modifier.size(24.dp),
         imageVector = CompoundIcons.MicOn(),
         // Note: accessibility is managed in TextComposer.
         contentDescription = null,
@@ -77,41 +52,40 @@ private fun StartButton(
 
 @Composable
 private fun StopButton(
-    onClick: () -> Unit,
     modifier: Modifier = Modifier,
-) = IconButton(
-    modifier = modifier
-        .size(48.dp),
-    onClick = onClick,
 ) {
     Box(
-        Modifier
+        modifier
             .size(36.dp)
             .background(
                 color = ElementTheme.colors.bgActionPrimaryRest,
                 shape = CircleShape,
-            )
-    )
-    Icon(
-        modifier = Modifier.size(24.dp),
-        resourceId = CommonDrawables.ic_stop,
-        // Note: accessibility is managed in TextComposer.
-        contentDescription = null,
-        tint = ElementTheme.colors.iconOnSolidPrimary,
-    )
+            ),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(
+            modifier = Modifier.size(24.dp),
+            resourceId = CommonDrawables.ic_stop,
+            // Note: accessibility is managed in TextComposer.
+            contentDescription = null,
+            tint = ElementTheme.colors.iconOnSolidPrimary,
+        )
+    }
 }
 
 @PreviewsDayNight
 @Composable
-internal fun VoiceMessageRecorderButtonPreview() = ElementPreview {
+internal fun VoiceMessageRecorderButtonIconPreview() = ElementPreview {
     Row {
-        VoiceMessageRecorderButton(
-            isRecording = false,
-            onEvent = {},
-        )
-        VoiceMessageRecorderButton(
-            isRecording = true,
-            onEvent = {},
-        )
+        IconButton(onClick = {}) {
+            VoiceMessageRecorderButtonIcon(
+                isRecording = false,
+            )
+        }
+        IconButton(onClick = {}) {
+            VoiceMessageRecorderButtonIcon(
+                isRecording = true,
+            )
+        }
     }
 }