Allow nullable `onClick` arguments in RadioButton, Checkbox, & Switch [171819073]

Fixed

Bug

Status Update

No update yet.

Description

al...@gmail.com

created issue #1

Oct 27, 2020 08:28PM

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.

Comments

ma...@google.com <ma...@google.com> #2Oct 28, 2020 12:59PM

There is a report about it in kotlinlang Slack: https://kotlinlang.slack.com/archives/C01D6HTPATV/p1706005056105739

al...@gmail.com <al...@gmail.com> #3Oct 29, 2020 02:21AM

Thanks for the report!

Message last modified on Oct 29, 2020 02:22AM

radiobutton-talkback.mp4

964 KB

Download

radiobutton-ripple.mp4

2.5 MB

Download

al...@gmail.com <al...@gmail.com> #4Oct 30, 2020 08:36PM

The release notes documentation has been edited to clarify this change in behavior for line height.

To support non-standard text sizes, we encourage users to follow the Material design system and use a different type scale rather than changing the font size directly. Alternatively, users can overwrite the line height like so: style = LocalTextStyle.current.copy(lineHeight = TextUnit.Unspecified), or create a custom Typography entirely.

br...@monzo.com <br...@monzo.com> #5Nov 1, 2020 02:07PM

deleted

al...@gmail.com <al...@gmail.com> #6Nov 1, 2020 06:41PM

In my case, I have multiple font sizes in the same Text (using SpanStyle in AnnotatedString). There are legitimate reasons for this. For example, when combining Chinese and English (phonetic) together (for language-learning purposes).

ae...@google.com <ae...@google.com> Feb 10, 2021 12:12AM

Reassigned to ae...@google.com.

ap...@google.com <ap...@google.com> #7Feb 11, 2021 06:30AM

Project: platform/frameworks/support
Branch: androidx-main

commit a234d18045d35a211dfceea56b20fece51dc34cb
Author: Alexandre Elias <aelias@google.com>
Date: Tue Feb 09 14:10:13 2021

Improve selection control APIs to support "passive embedding"

This makes the Switch/Checkbox/RadioButton lambdas nullable. If null,
then the entire "toggleable" modifier is removed, disabling click input
handling, Material ripple and accessibility semantics.

These are intended for use cases (as in the samples) where the control
is embedded within a larger row which handles the click action for it.
Note that this is distinct from "enabled", which is for use cases where
the UI is grayed out to indicate it cannot currently be interacted with
in any way.

Bug: 171819073
Test: "New 'whenNullLambda' tests in RadioButtonTest,
SwitchTest, and CheckboxUiTest"
Relnote: "Switch, Checkbox and RadioButton action lambdas are now
nullable. Checkbox-in-clickable-row samples updated to use this
feature."

Change-Id: If601b88cf4622111bca5f4927cbb86c7d300ebbf

M compose/material/material/api/current.txt
M compose/material/material/api/public_plus_experimental_current.txt
M compose/material/material/api/restricted_current.txt
M compose/material/material/samples/src/main/java/androidx/compose/material/samples/ListSamples.kt
M compose/material/material/samples/src/main/java/androidx/compose/material/samples/SelectionControlsSamples.kt
M compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/CheckboxUiTest.kt
M compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/RadioButtonTest.kt
M compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/SwitchTest.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/Checkbox.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/RadioButton.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/Switch.kt

https://android-review.googlesource.com/1581991

ae...@google.com <ae...@google.com> #8Feb 11, 2021 07:08AM

Marked as fixed.

OK, after some discussion, we decided the suggested API change was a good one and landed it :)

Re: comment #5, the new ListItem sample in the next release will achieve your desired behavior.

Re: the radiobutton ripple videos in #3. In the latest Compose Material sample code of row with radio button, we went with an implementation that highlights the entire row, consistently with listitem+switch, so the nullability is not necessarily what you need. However, we also made sure it remains possible to achieve any other UX ripple behaviors that might be required in a design system, for example Modifier.clearAndSetSemantics {} around a radio-button-with-identical-non-nullable-lambda will continue to be a supported way of doing things.