I am trying to dive in to Accessibility and Compose. A `Checkbox` is 24x24dp which is no-no, needs ...

# compose

[Adrian Landborn]

I am trying to dive in to Accessibility and Compose. A Checkbox is 24x24dp which is no-no, needs to be at least 48x48dp to pass the checks. So my approach is to combine Checkbox with Text to increase the width and add som internal padding to fix the height. Also add the same onClick on both items. But this does not work. Any advice? As soon as I add any padding, the mergeDescendants stops working. Is it a bug?

var checkedState by remember { mutableStateOf(false) }
Row(
    Modifier
        .clickable { checkedState = !checkedState }
        .semantics(mergeDescendants = true) {}
        .padding(top = 12.dp, bottom = 12.dp)
) {
    Checkbox(
        checked = checkedState,
        onCheckedChange = { checkedState = !checkedState })
    Text(text = "Some label", modifier = Modifier.padding(start = 8.dp))

[Adrian Landborn]

I’ve kind of managed to get past this. First of all I removed onCheckedChange completely from the checkbox and only kept it on the row. I also changed clickable to toggleable . Used minSize and center vertically to get the position right.

Here is the code.

Row(modifier
    .semantics(mergeDescendants = true) {
        toggleableState = ToggleableState(checked)
        stateDescription
    }
    .toggleable(
        value = checked,
        enabled = enabled,
        role = Role.Checkbox
    ) { onCheckedChange.invoke(checked) }
    .padding(start = space75)
    .defaultMinSize(space300, space300)
)
{
    Checkbox(
        checked = checked,
        onCheckedChange = null,
        interactionSource = interactionSource,
        enabled = enabled,
        colors = if (error) CheckboxStyle.Error.colors() else style.colors(),
        modifier = Modifier.align(Alignment.CenterVertically)
    )
    SpacerH(space100)
    Text(text = label, modifier = Modifier.align(Alignment.CenterVertically).padding(end = space75))
}

[Adrian Landborn]

One thing I am still struggling with is to get the TalkBack read out the state of the Checkox, ie. Checked/Unchecked. This does not seem to work with the Material version of the Compose Checkbox. I know @Bryan Herbst has put a lot of deep diving into Compose. Do you have any advice?

[Bryan Herbst]

You probably only need the toggleable() Modifier in your most recent code snippet- it will do a mergeDescendants and add the toggleableState semantics for you. With that configuration my checkbox rows with text are correctly reading out checked/unchecked!

[Adrian Landborn]

I tried to add a Material checkbox but the Talkback still doesnt work out of the box.
This only replies with “_Checkbox. Double tap to toggle”_

androidx.compose.material.Checkbox(checked = false, onCheckedChange = {})

[Bryan Herbst]

Is that still within a Row with a toggleable() Modifier?

[Adrian Landborn]

No, only a checkbox.

[Adrian Landborn]

The same thing in the JetSurvey sample app. Doesn’t read out the state. Googles Keep app does read the state but I assume that is not running on Compose.

[Bryan Herbst]

Huh, that’s odd- TalkBack does read “unchecked” for me with just a stock material Checkbox.

I’d file a bug on the issue tracker: https://issuetracker.google.com/issues/new?component=612128

[Adrian Landborn]

There could be an issue with either android 11 or samsung. I tried 2 Samsung Galaxy S10 with Android 11. -> Not working
However Pixel 3 with Android 12 seems to handle this correctly. 🥴

[Bryan Herbst]

Oof, is the S10 actually running TalkBack or is it running a different accessibility service?

[Adrian Landborn]

TalkBack

[Adrian Landborn]

[Adrian Landborn]

It could be an issue that Compose accessibility has issues with some devices since, as mentioned, Google Keep apps handles the TalkBack correctly.
And I think Keep is running AndroidViews.

[Adrian Landborn]

One finding. Samsung is using their own Talkback app

[Bryan Herbst]

Yeah, that’s what I suspected. I’d call it a bug in Samsung’s TalkBack 😉

Probably still worth filing a bug for- if nothing else Google can tell Samsung that they should fix their implementation.

[Adrian Landborn]

Yes, I’m filing a bug tomorrow!

[Adrian Landborn]

@JulianK Yes I reported a bug and they fixed it in Beta09. Now works on Samsung Talkback as well. https://issuetracker.google.com/issues/190633724

[JulianK]

Thanks! Turns out I'm already using beta09, my issue is slightly different: Those Samsung devices don't read the stateDescription 😞

[Adrian Landborn]

Maybe you can post a new issue on this? Which samsung devices have you tried with? Does it work with emulator or Pixel phones?