Adrian Landborn

    Adrian Landborn

    1 year ago
    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))
    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))
    }
    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

    Bryan Herbst

    1 year ago
    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

    Adrian Landborn

    1 year ago
    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

    Bryan Herbst

    1 year ago
    Is that still within a
    Row
    with a
    toggleable()
    Modifier?
    Adrian Landborn

    Adrian Landborn

    1 year ago
    No, only a checkbox.
    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

    Bryan Herbst

    1 year ago
    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

    Adrian Landborn

    1 year ago
    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

    Bryan Herbst

    1 year ago
    Oof, is the S10 actually running TalkBack or is it running a different accessibility service?
    Adrian Landborn

    Adrian Landborn

    1 year ago
    TalkBack
    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.
    One finding. Samsung is using their own Talkback app
    Bryan Herbst

    Bryan Herbst

    1 year ago
    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

    Adrian Landborn

    1 year ago
    Yes, I’m filing a bug tomorrow!
    JulianK

    JulianK

    1 year ago
    I encountered this bug (Samsungs Talkback not reading toggleable items correctly) today and I'm very happy to read about it here - did you file a bug? Is there any public bug tracker at Samsung? @Adrian Landborn
    Adrian Landborn

    Adrian Landborn

    1 year ago
    @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

    JulianK

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

    Adrian Landborn

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