Jetpack Compose wrong screen reader order when using Modifier.testTags

Viewed 173

I have an issue with screen reader and jetpack compose

Imagine following scenario:

I have 2 Composables, Home and Detail:

@Composable
fun Home(navController: NavController) {
    Column(
        modifier = Modifier.testTag("hometag")
    ) {
        Text("home1")
        Text("home2")
        Button(onClick = {
            navController.navigate("detail",
            )
        }) {
            Text("NEXT")
        }

    }
}

@Composable
fun Detail(navController: NavController) {
    Column(
        modifier = Modifier
            .testTag("detailTag")
    ) {
        Text("detail1")
        Text("detail2")
        Text("detail3")
    }
}

The button in Home() just navigates to the Detail composable via compose navigation.

When I use the app via Talkback and will click on the next button - the Detail screen gets opened. But instead of the text "detail1" gets focussed, "detail3" is in the next focus for talkback. When I remove both Modifier.testTag modifier, the talkback order is correct.

Anything I'm missing here?

UPDATED: When switiching compose to 1.2.0_beta02 the issue with this example is gone. But when wrapping Text("detail3") also in an Button like this:

@Composable
fun Home(navController: NavController) {
    Column(
        modifier = Modifier
            .testTag("hometag")
    ) {
        Text("home1")
        Text("home2")
        Button(onClick = {
            navController.navigate(
                "detail"
            )
        }) {
            Text("NEXT")
        }

    }
}

@Composable
fun Detail() {
    Column(
        modifier = Modifier
            .testTag("detailTag")
    ) {
        Text("detail1")
        Text("detail2")
        Button(onClick = { /*TODO*/ }) {
            Text("detail3")
        }
    }
}

then the issue is still present. Already filed an issue in google issue tracker: https://issuetracker.google.com/issues/233251832

0 Answers
Related