Best way to implement focus highlight in Jetpack Compose?

Question

There is this documentation highlighting how to implement advanced focus highlight in Jetpack Compose to improve accessibility of the app. The problem here is that it uses a custom Indication, which replaces the default Indication for the clickable element when applied. This in turn disables the default click handling effects for the component, such as ripple and pressed effects, which is bad.

What's the best way to implement focus highlight in Jetpack Compose for your own components?

Answer 1

I solved this by creating my own custom Modifier.

fun Modifier.focusHighlight() = composed {
    this.onFocusChanged {
        if (it.hasFocus) {
            drawWithContent {
                drawRect(size = size, color = Color(Color.WhatEver), alpha = 0.4f)
            }
        }
    }
}

Seems to work fine. With this, we are not overriding the default indication and thus we can have both nice things.

I added piece of code to the issue I created for Google. Let's see what they comment. IMO this kind of functionality should be provided by the platform.