Hello! I am having an accessibility issue. I have a bottom sheet with content beneath it. If a user ...

# compose

[Lucas Kivi]

Hello! I am having an accessibility issue. I have a bottom sheet with content beneath it. If a user clicks a spot on the bottom sheet where their aren’t clickable components the focus is dispatched to the content beneath it. how can I avoid that?

[Lucas Kivi]

Imagine I have a component like this:

Box {
    Content()
    BottomSheet(
        modifier = Modifier
            .swipeable( ... ),
    )
}

[Lucas Kivi]

I tried a few different things with the semantics , focusable , and focusProperties Modifier s to no avail.

[ephemient]

what BottomSheet is that? Compose has BottomSheetScaffold and ModalBottomSheetLayout

[Albert Chang]

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]yout&ss=androidx%2Fplatform%2Fframeworks%2Fsupport:compose%2F

[ephemient]

I believe that's somewhat opposite to what OP wants - it dismisses the sheet, instead of preventing clicks from passing through it

[ephemient]

that is handled by Surface, which the material bottom sheets already use internally. so we need to know which bottom sheet Lucas is using, if it's not one of those…

[Albert Chang]

Sorry I misread the message. So do you mean normal clicks or clicks in screen reader mode (because you mentioned "accessibility")? If it's the former, yeah, a Surface or a Modifier.pointerInput(Unit) {} should work.

[Lucas Kivi]

Sorry, I guess I wasn’t clear. In this case BottomSheet is a custom composable.

[Lucas Kivi]

I tried the Modifier.pointerInput(Unit) {} but focus was still passed through. I will try Surface

[Lucas Kivi]

The touches are being dispatched right through the Surface as well.

[ephemient]

sounds more like something is wrong with your custom layout drawing on top but not taking events first

[Lucas Kivi]

It can be reproduced here:

@Composable
private fun AccessibilityExample() {
    val markerStateSydney = remember { MarkerState(position = LatLng(-34.0, 151.0)) }
    val markerStateTokyo = remember { MarkerState(position = LatLng(35.66, 139.6)) }

    BottomSheetScaffold(
        sheetContent = {
            Spacer(
                modifier = Modifier
                    .background(
                        color = Color.Gray,
                        shape = RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp),
                    )
                    .fillMaxWidth()
                    .fillMaxHeight(0.5f)
            )
        },
    ) {
        GoogleMap(
            modifier = Modifier
                .clearAndSetSemantics { invisibleToUser() }
                .focusable(enabled = false)
                .fillMaxSize()
        ) {
            Marker(
                state = markerStateSydney,
                title = "Marker in Sydney",
            )
            Marker(
                state = markerStateTokyo,
                title = "Marker in Tokyo"
            )
        }
    }
}

[Lucas Kivi]

If you want a full repo let me know

[Lucas Kivi]

I can push my changes. I have had so many issues with goolgle-maps-compose I have a full blown repo just to repro bugs