[a11y] Add click action to the message bottom sheet handle (#5228)

Author: jmartinesp

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt

@@ -39,7 +39,10 @@ import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.semantics.heading
+import androidx.compose.ui.semantics.onClick
+import androidx.compose.ui.semantics.role
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.style.TextAlign
@@ -81,6 +84,7 @@ import io.element.android.features.roomcall.api.RoomCallState
 import io.element.android.libraries.androidutils.ui.hideKeyboard
 import io.element.android.libraries.designsystem.atomic.molecules.ComposerAlertMolecule
 import io.element.android.libraries.designsystem.components.ExpandableBottomSheetLayout
+import io.element.android.libraries.designsystem.components.ExpandableBottomSheetLayoutState
 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.AvatarType
@@ -288,7 +292,25 @@ fun MessagesView(
             )
         },
         sheetDragHandle = if (state.composerState.showTextFormatting) {
-            @Composable { BottomSheetDragHandle() }
+            @Composable { toggleAction ->
+                val expandA11yLabel = stringResource(CommonStrings.a11y_expand_message_text_field)
+                val collapseA11yLabel = stringResource(CommonStrings.a11y_collapse_message_text_field)
+                BottomSheetDragHandle(
+                    modifier = Modifier.semantics {
+                        role = Role.Button
+
+                        // Accessibility action to toggle the bottom sheet state
+                        val label = when (expandableState.position) {
+                            ExpandableBottomSheetLayoutState.Position.COLLAPSED, ExpandableBottomSheetLayoutState.Position.DRAGGING -> expandA11yLabel
+                            ExpandableBottomSheetLayoutState.Position.EXPANDED -> collapseA11yLabel
+                        }
+                        onClick(label) {
+                            toggleAction()
+                            true
+                        }
+                    }
+                )
+            }
         } else {
             @Composable {}
         },

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ExpandableBottomSheetLayout.kt

@@ -60,7 +60,7 @@ import kotlin.math.roundToInt
 
 @Composable
 fun ExpandableBottomSheetLayout(
-    sheetDragHandle: @Composable BoxScope.() -> Unit,
+    sheetDragHandle: @Composable BoxScope.(toggleAction: () -> Unit) -> Unit,
     bottomSheetContent: @Composable ColumnScope.() -> Unit,
     state: ExpandableBottomSheetLayoutState,
     maxBottomSheetContentHeight: Dp,
@@ -152,7 +152,19 @@ fun ExpandableBottomSheetLayout(
                 }
         ) {
             Box(Modifier.fillMaxWidth()) {
-                sheetDragHandle()
+                sheetDragHandle {
+                    coroutineScope.launch {
+                        val destination = if (state.position == ExpandableBottomSheetLayoutState.Position.EXPANDED) {
+                            state.internalPosition = ExpandableBottomSheetLayoutState.Position.COLLAPSED
+                            minBottomContentHeightPx.toFloat()
+                        } else {
+                            state.internalPosition = ExpandableBottomSheetLayoutState.Position.EXPANDED
+                            calculatedMaxBottomContentHeightPx.toFloat()
+                        }
+                        animatable.snapTo(currentBottomContentHeightPx.toFloat())
+                        animatable.animateTo(destination)
+                    }
+                }
             }
             bottomSheetContent()
         }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ExpandableBottomSheetLayoutState.kt

@@ -38,7 +38,7 @@ class ExpandableBottomSheetLayoutState {
     /**
      * The current position of the bottom sheet layout.
      */
-    val position = internalPosition
+    val position get() = internalPosition
 
     /**
      * The percentage of the bottom sheet layout that is currently being dragged.