Skip to content

[6.x] Make the whole radio/checkbox item clickable#14821

Merged
jaygeorge merged 3 commits into
6.xfrom
clickable-chips
Jun 15, 2026
Merged

[6.x] Make the whole radio/checkbox item clickable#14821
jaygeorge merged 3 commits into
6.xfrom
clickable-chips

Conversation

@duncanmcclean

Copy link
Copy Markdown
Member

This pull request makes the entire radio and checkbox item — including the padding and empty space around the control and label — clickable, rather than only the control and label text.

Previously the clickable area was limited to the Reka control (CheckboxRoot / RadioGroupItem) and the <label> wrapping the label text. This meant clicking the surrounding padding of a chip (or the description) did nothing.

This PR fixes it by stretching the inner <label>'s hit-area across the whole item using an absolutely-positioned before pseudo-element (before:absolute before:inset-0), with the container made relative to anchor it. The label keeps its for/id association to the control, so clicks anywhere in the item forward a single activation to the checkbox/radio.

This PR also tidies up the radio item's accessibility by giving the description an id and wiring it to the control via aria-describedby, matching the checkbox component.

@duncanmcclean duncanmcclean requested a review from jaygeorge June 15, 2026 11:18
@jaygeorge jaygeorge merged commit 155ee9b into 6.x Jun 15, 2026
18 checks passed
@jaygeorge jaygeorge deleted the clickable-chips branch June 15, 2026 13:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants