Hello, i have an issue with screen reader and jetpack compose: When I'm using Modifier.testTags the ...

# compose

[Rene Win]

Hello, i have an issue with screen reader and jetpack compose:
When I'm using Modifier.testTags the screen reader order is not correct (detail3 is marked instead of detail1) when navigating to a other screen - see code and video below:
Some notes on the code (I can provide the whole application if necessary):
Home is the root view with just some text and a button, which opens the detail composable

@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")
    }
}

Is there something I can do against that behaviour? Thanks in advance!

recording.mp4

[Jelle Fresen [G]]

In the recording I see the a11y focus jump from "home1" to the "next" button. Is that the unexpected order?

[Rene Win]

the focus from home1 to next was a manual input. the issue is on the next screen, where detail3 is focussed instead of the first one

[Rene Win]

@Jelle Fresen [G] maybe i have not described perfectly. but the problem is resolved when I remove the testTags. Then the "detail1" in the second screen gets focussed correctly

[Zach Klippenstein (he/him) [MOD]]

This definitely seems like a bug, although I'm not sure where. Can you file a bug with this code and the details you mentioned in the thread?

[Rene Win]

@Zach Klippenstein (he/him) [MOD] did it already 🙂
https://issuetracker.google.com/issues/233251832

[Zach Klippenstein (he/him) [MOD]]

Thanks. Just to confirm, you're observing this in compose 1.1? Have you tried the latest version?

[Rene Win]

i tried with compose 1.1.1, yes

[Zach Klippenstein (he/him) [MOD]]

Have you tried with 1.2?

[Rene Win]

yes, just now. result in my minified dummy application -> the issue is gone.
result in my real application -> the issue is still here.
so i will try to create another minified version of the problem with compose 1.2

[Rene Win]

new day new try ->
when i change the code to :

@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 screen reader is again on the wrong element. (even with compose 1.2.0-beta02)
the only thing i changed is wrapping the Text("detail3") in a button, so the structure is the same as in the screen before.

[Rene Win]

i have updated the issue in google issue tracker also 😉

[Rene Win]

@Zach Klippenstein (he/him) [MOD] as this (on my point of view) randomly changes for every compose version - is there any chance to unit test the accessablity stuff so that we can ensure we dont break something when upgrading compose?