IssueTracker

Consider a custom ListItem component that displays a RadioButton at the start of its content, implemented something like this:

Row(
    modifier = modifier
        .fillMaxWidth()
        .preferredHeightIn(min = 48.dp)
        .selectable(
            selected = checked,
            onClick = onClick,
            interactionState = interactionState,
            indication = null,
            enabled = enabled,
        ),
    verticalAlignment = Alignment.CenterVertically,
) {
    RadioButton(
        checked = checked,
        onClick = onClick,
        modifier = Modifier.padding(horizontal = 8.dp),
        size = size,
        enabled = enabled,
        interactionState = interactionState,
    )
    Text(
        text = text,
        style = size.textStyle,
    )
}

The problem I have with this code is that I only want the Row to show up as focusable in TalkBack and I only want the Row to have a ripple indication. In other words, I would like the RadioButton to be treated just as a decorative icon inside the Row that is not individually interactive at all.

The problem with this code is that by passing onClick to both the Row and the RadioButton, both end up being interactive and clickable. However, RadioButton requires the click listener to be non-null, so there is currently no way to workaround this using the current API.

The only way that I’ve been able to workaround this is by creating a custom RadioButton component that accepts a nullable onClick argument. This allows me to pass null as the click listener in the code above, and internally the RadioButton will do something like if (onClick == null) Modifier else Modifier.selectable(...) to ensure that it can be used as a non-interactive widget.

This same issue also exists for Checkbox and Switch as well.