Search code examples
androidaccessibilityfocusandroid-jetpack-composeandroid-a11y

How to find which element has focus in Jetpack Compose?


I'm trying to understand which element has obtained focus when I use the tab key from a external keyboard.

I'm only using composable elements in the app, mostly custom elements. I've tried to using the Layout Inspector, but that only helps if an composable has explicitly an focus attribute(parameter) exposed.

This is essential to solve since not seeing what element has focus is an accessibility issue for keyboard users.

Here is an example image of focused and non-focused elements. In my app none of my UI elements highlight that it is focused, but when I push the enter-key on the keyboard a click event is sent to the selected element. Meaning that they are gaining focus but not highlighting it.

focus states


Solution

  • If you activate Android's TalkBack feature you'll get a green box around the focused element.

    Se example below on how it looks when activated.

    Screenshot android Screenshot android focus

    This will help when debugging which element has current focus.