material-components / material-components/material-components-android

[MaterialCheckBox] Unchecked outline color does not match M3 specs when pressed, focused, hovered

Open
#4,786 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

**Description:** According to the M3 specs, the outline color should be `colorOnSurfaceVariant` when unchecked, and `colorOnSurface` when pressed, focused, or hovered. Currently MDC always uses `colorOnSurfaceVariant`.

This bug exists in both `MaterialCheckBox` and `MaterialRadioButton`, they will use the same coloring.

**Expected behavior:** Use `colorOnSurface` when `unchecked && (pressed || focused || hovered)`.

**Source code:**
In CheckBox, MDC has only unchecked state color, and the colors in the other three states are missing.
https://github.com/material-components/material-components-android/blob/1dc3923bf7688d3a40510faf666517ebac1439b2/lib/java/com/google/android/material/checkbox/res/color/m3_checkbox_button_tint.xml#L32-L34

In RadioButton, the other three colors are defined, but should be declared as `android:state_checked="false"` instead of `true`.
https://github.com/material-components/material-components-android/blob/1dc3923bf7688d3a40510faf666517ebac1439b2/lib/java/com/google/android/material/radiobutton/res/color/m3_radiobutton_button_tint.xml#L36-L44

**Material Library version:** 1.13.0-alpha13

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with lib/java/com/google/android/material/checkbox/res/color/m3_checkbox_button_tint.xml and lib/java/com/google/android/material/radiobutton/res/color/m3_radiobutton_button_tint.xml at the referenced state definitions. Compare the unchecked pressed, focused, and hovered selectors with the M3 specification. Done means both MaterialCheckBox and MaterialRadioButton use colorOnSurface for those unchecked interaction states and colorOnSurfaceVariant otherwise.

Written by the indexing model from the issue text.

Assessment

Tech stack
android
Domain
design, mobile
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.