CODEWITHSUNDEEP
androidandroid-jetpack-composetalkback
dmortal
dmortal

Reputation: 589

Jetpack compose accessibility with switch role

I'm trying to get a voiceover similar to XML:

  1. First the text is announced
  2. Then the state of the switch

The expected result is "Sometext on switch" or "Sometext off switch".

In Jetpack Compose it reads "Off sometext off switch" if you double-click it(using talkback to change state) and click again or swipe(to next and back), it reads "On sometext off switch".

Moreover, there is no sounding after double-clicking and changing state to on/off(like XML).

var isChecked by remember { mutableStateOf(false) }

val toggleModifier =
    Modifier.toggleable(
        value = isChecked,
        onValueChange = { isChecked = it },
        role = Role.Switch
    )

Box(modifier = Modifier.fillMaxSize()) {
    val rowModifier = toggleModifier
        .padding(16.dp)
        .align(Alignment.Center)
    Row(modifier = rowModifier) {
        Text(text = "Sometext")
        Switch(checked = isChecked, onCheckedChange = null)
    }
}

The second idea was to combine the text and the switch with mergeDescendants, but they are selected separately:

var isChecked by remember { mutableStateOf(false) }

val toggleModifier =
    Modifier.semantics(mergeDescendants = true) {}

Box(modifier = Modifier.fillMaxSize()) {
    val rowModifier = toggleModifier
        .padding(16.dp)
        .align(Alignment.Center)
    Row(modifier = rowModifier) {
        Text(text = "Sometext")
        Switch(checked = isChecked, onCheckedChange = { isChecked = !isChecked })
    }
}

Upvotes: 1

Views: 2559

Answers (1)

Scaldato Cuore
Scaldato Cuore

Reputation: 36

As Utkarsh Tiwari mentioned in comments, it's compose bug, not fixed yet. They advice to use Role.Checkbox instead temporarily, it works as expected. Or do not use role at all

btw it's better to use Modifier.then(rowModifier), then just modifier = rowModifier. So in the end it should be something like

Row(modifier = Modifier
.semantics(mergeDescendants = true) {}
.then(rowModifier)

Upvotes: 2

Related Questions