Hello I am trying to make talkback read out text from Text() and default line from Switch() using compose semantics. This is my code:
var toggle by remember {
mutableStateOf(true)
}
Column(
modifier = Modifier.fillMaxSize(),
) {
Row(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.semantics(mergeDescendants = true) {
isTraversalGroup = true
},
) {
Text(
modifier = Modifier.semantics {
traversalIndex = 1f
},
text = "Show my name.",
)
Switch(
modifier = Modifier.semantics {
traversalIndex = 2f
},
checked = toggle,
onCheckedChange = { toggle = !toggle },
)
}
}
For some reason only the Text gets read out and the default line of switch is ignored. My goal is to have it read like "Show my name. On/Off switch double tap to toggle". In one go. How can I achieve this?
According to the documentation:
When implementing selection controls like Switch, RadioButton, or Checkbox, you typically lift the clickable behavior to a parent container, set the click callback on the composable to null, and add a toggleable or selectable modifier to the parent composable.
So using the toggleable
modifier on the row in your case would look something like:
var toggle by remember {
mutableStateOf(true)
}
Column(
modifier = Modifier.fillMaxSize(),
) {
Row(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.toggleable(
value = toggle,
role = Role.Switch,
onValueChange = { toggle = !toggle }
)
) {
Text(
text = "Show my name.",
modifier = Modifier
.weight(1f)
.align(Alignment.CenterVertically)
)
Switch(
checked = toggle,
onCheckedChange = null,
)
}
}
I tried it with basic keyboard functions as well and it seems to work:
adb shell input keyevent KEYCODE_TAB # navigate
adb shell input keyevent KEYCODE_ENTER # toggle
If the order of the announcement concerns you ('On, [Text], Switch'), please be aware that this can be modified by user settings of TalkBack and is a result of the calculations on the screen reader (TalkBack).