letro/letro-android
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jorge Martin Espinosa
2025-09-01 15:27:40 +02:00
committed by GitHub
parent c4555bc76a
commit f5b5bb39ba
3 changed files with 38 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 {}
},

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

@@ -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()
}

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

@@ -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.