Search code examples
androidandroid-jetpack-composetalkback

Is there a way to change the order of jetpack compose semantics merged descendants


I use Jetpack Compose v1.5.0 to create a Row with two Text controls, and I merged two Texts into one semantics group by setting mergeDescendants = true:

Row(
    modifier = Modifier.semantics(mergeDescendants = true) {  }
) {
    Text("text 1")
    Text("text 2")
}

When the Talkback services focus on the Row, talkback will read out the Texts by the normal order: "text one text two".

But my goal is to change the order of the Texts so that talkback should read out: "text two text one". Is it possible?

I read Android document at https://developer.android.com/jetpack/compose/accessibility but I didn't find the solution. I also tried isTraversalGroup and traversalIndex, but it didn't work:

Row(
    modifier = Modifier.semantics(mergeDescendants = true) { isTraversalGroup = true }
) {
    Text(
        text = "text 1",
        modifier = Modifier.semantics() { traversalIndex = 2f }
    )
    Text(
        text = "text 2",
        modifier = Modifier.semantics() { traversalIndex = 1f }
    )
}

Solution

  • As mentioned in this issue: https://issuetracker.google.com/issues/285043826

    You can use the zIndex modifier to achieve what you need.

    Here's a fixed version of your example:

    Row(
        modifier = Modifier.semantics(mergeDescendants = true)
    ) {
        Text(text = "text 1", modifier = Modifier.zIndex(1f))
        Text(text = "text 2", modifier = Modifier.zIndex(0f))
    }
    

    It will read "text 2 text 1".