Components: Standardize checkbox and radio focus outlines by himanshupathak95 · Pull Request #85379 · WordPress/gutenberg

himanshupathak95 · 2026-10-22T09:39:35Z

What?

See #80138. Use the shared outline focus ring in CheckboxControl and RadioControl.

Why?

Both controls still draw focus rings with box shadows. The existing rings were intentional, as described in #50127. This keeps the gap around each control while moving its ring to the shared design system style.

How?

Remove CheckboxControl's duplicate focus overrides so its existing input-control mixin supplies the outline.
Replace RadioControl's legacy focus mixin with outset-ring__focus() and clear the wp-admin focus shadow.
Remove RadioControl's shadow transition and redundant focus rule. Keep CheckboxControl's border-color transition.

The shared ring uses the focus-width token, including its fallbacks. Checked, mixed, and disabled styling stays the same.

Testing Instructions

Build the branch, then run npm run --workspace @wordpress/storybook storybook:dev.
Open CheckboxControl's Default and Indeterminate stories with WordPress CSS enabled. Check checked, unchecked, mixed, and disabled states.
Open RadioControl's Default and With Disabled Option stories.
In a draft post, open Post settings → Status. Check the selected status radio and the Sticky checkbox. Tab past Password protected, which uses the newer checkbox and is outside this patch.
Confirm the ring surrounds the full control, keeps its gap, and does not change the layout. At 1x density, the ring and gap are 2px; at 2x they are 1.5px.

Testing Instructions for Keyboard

Press Tab to focus a checkbox. Press Space to toggle it. Repeat with the mixed checkbox.
Press Tab to enter the radio group. Use arrow keys to move and select options. The disabled option should be skipped.
Confirm the focus ring stays visible throughout. Disabled checkboxes should be skipped by Tab.

Screenshots or screencast

Before

Screen.Recording.2026-10-22.at.15.25.29.mov

Screen.Recording.2026-10-22.at.15.28.57.mov

After

Screen.Recording.2026-10-22.at.15.07.32.mov

Screen.Recording.2026-10-22.at.15.11.14.mov

Use of AI Tools

Implemented with assistance of Codex (Astra 6)

@coderabbitai review

github-actions · 2026-10-22T09:39:52Z

🤖 PR meta 🤖

🎉 Props

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

coderabbitai · 2026-10-22T10:05:47Z

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

⚙️ Run configuration

Source mode: Auto
Repository: WordPress/gutenberg
Branch: trunk
File: .coderabbit.yaml
Commit: a149bc4
Layers: Repository YAML
Review profile: CHILL
Plan: Advanced
Run ID: 3d58505c-4c23-4a7f-8dbc-b59841847fd0

📥 Commits

Reviewing files that changed from the base of the PR and between b23a2f5 and 36b7ae4.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Source mode: Auto
Repository: WordPress/gutenberg
Branch: trunk
File: .coderabbit.yaml
Commit: b0377b7
Layers: Repository YAML
Review profile: CHILL
Plan: Advanced
Run ID: e029d9f1-9c47-40d1-b2ea-9aa2721c31c1

📥 Commits

Reviewing files that changed from the base of the PR and between 52370c0 and b23a2f5.

📒 Files selected for processing: 2

packages/components/src/checkbox-control/style.scss
packages/components/src/radio-control/style.scss

💤 Files with no reviewable changes: 1

packages/components/src/checkbox-control/style.scss

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

📝 Summary

Summary by CodeRabbit

Style
- Checkbox and radio controls now use the design system’s focus outline.
- Checkbox controls no longer apply their previous custom focus styling, and radio controls retain a neutral border when focused.
- Radio controls no longer use a motion-preference-specific transition. Disabled checked radio indicators retain their reduced opacity.

The checkbox stylesheet no longer defines its previous focus rules. The radio stylesheet uses an outset focus ring and clears its focus shadow. The changelog describes a design-system focus-ring outline for both controls.

Changes: Control focus styling

Layer / File(s)	Summary
Update control focus styling `packages/components/src/checkbox-control/style.scss`, `packages/components/src/radio-control/style.scss`, `packages/components/CHANGELOG.md`	The checkbox stylesheet removes its explicit border, radius, focus, and checked-state declarations while retaining the input mixin and hover background. The radio stylesheet replaces its focus styling with `outset-ring__focus()`, removes its colors import and reduced-motion transition, and changes the disabled checked indicator opacity rule. The changelog describes the focus-ring outline.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Other

Possibly related issues

WordPress/gutenberg#85400 — This pull request replaces legacy checkbox and radio focus shadows with the standard outline ring.
WordPress/gutenberg#81778 — This pull request changes the focus ring used by checkbox and radio controls.

Suggested reviewers: mirka

Merge Risk: ⚪ Minimal · up to b23a2

The focus-ring update preserves the existing checked, mixed, disabled, and layout behavior, so no actionable merge-blocking risk remains.

Pre-merge checks: 5

Check name	Status	Explanation
Title check		The title clearly and concisely describes the primary change: standardizing checkbox and radio focus outlines.
Description check		The description directly explains the focus-ring changes, rationale, implementation, and testing instructions for the checkbox and radio controls.
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

ciampo

Thank you!

While we're here, a few extra changes that we can make. We could also remove CheckboxControl's redundant initial border and border-radius declarations and first &:checked block, plus RadioControl's duplicate opacity: 1? Keep the :disabled:checked::before opacity override.

For the radio, could we add border-color: var(--wpds-color-stroke-interactive-neutral) to the focus block and move it before the hover, checked, and disabled rules? That prevents the existing forms.css focus rule from darkening an unchecked radio's border while preserving the other states.

ciampo

LGTM 🚀

github-actions · 2026-10-22T17:22:37Z

There was a conflict while trying to cherry-pick the commit to the wp/7.2 branch. Please resolve the conflict manually and create a PR to the wp/7.2 branch.

PRs to wp/7.2 are similar to PRs to trunk, but you should base your PR on the wp/7.2 branch instead of trunk.

# Checkout the wp/7.2 branch instead of trunk.
git checkout wp/7.2

# Create a new branch for your PR.
git checkout -b my-branch

# Cherry-pick the commit.
git cherry-pick 9345e88e486590fe7dcff82407902b888fe661de

# Check which files have conflicts.
git status

# Resolve the conflict...
# Add the resolved files to the staging area.
git status
git add .
git cherry-pick --continue

# Push the branch to the repository
git push origin my-branch

# Create a PR and set the base to the wp/7.2 branch.
# See https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request.

himanshupathak95 · 2026-10-22T17:29:21Z

I think the automatic cherry-pick failed on this one.

ciampo · 2026-10-22T21:54:22Z

It did. would you be able to create a manual cherry pick yourself? Cc @t-hamano

himanshupathak95 · 2026-10-23T01:31:22Z

It did. would you be able to create a manual cherry pick yourself? Cc @t-hamano

Yes, I can do that.

t-hamano · 2026-10-23T01:37:14Z

In the first place, this PR is an enhancement, but should we backport it?

himanshupathak95 · 2026-10-23T07:53:19Z

In the first place, this PR is an enhancement, but should we backport it?

Other focus ring enhancement updates under #80138 have been backported to wp/7.2 as well such as #85359, #85410.

I've opened the backport PR here #85436.

…85436) * Components: Use shared checkbox and radio focus outlines * Components: Document checkbox and radio focus ring changes * Components: Link PR 85379 to checkbox and radio focus changelog * CheckboxControl: Remove redundant input styles * RadioControl: Preserve state borders on focus --- (cherry picked from commit 9345e88) Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>

t-hamano · 2026-10-24T01:28:26Z

This PR was backported to wp/7.2 by #85436.

github-actions Bot added the [Package] Components /packages/components label Oct 22, 2026

himanshupathak95 added the [Type] Enhancement A suggestion for improvement. label Oct 22, 2026

himanshupathak95 marked this pull request as ready for review October 22, 2026 10:00

himanshupathak95 requested a review from a team as a code owner October 22, 2026 10:00

ciampo reviewed Oct 22, 2026

View reviewed changes

ciampo assigned himanshupathak95 Oct 22, 2026

himanshupathak95 added 5 commits October 22, 2026 22:19

Components: Use shared checkbox and radio focus outlines

5c91590

Components: Document checkbox and radio focus ring changes

cc88e9f

Components: Link PR 85379 to checkbox and radio focus changelog

4b60eb3

CheckboxControl: Remove redundant input styles

6425f5a

RadioControl: Preserve state borders on focus

36b7ae4

himanshupathak95 force-pushed the fix/80138-checkbox-radio-focus-rings branch from b23a2f5 to 36b7ae4 Compare October 22, 2026 16:49

ciampo approved these changes Oct 22, 2026

View reviewed changes

ciampo added Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) Backport to WP 7.2 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Oct 22, 2026

ciampo enabled auto-merge (squash) October 22, 2026 16:51

ciampo merged commit 9345e88 into WordPress:trunk Oct 22, 2026
99 checks passed

github-actions Bot added this to the Gutenberg 24.4 milestone Oct 22, 2026

himanshupathak95 mentioned this pull request Oct 23, 2026

[WP 7.2] Components: Standardize checkbox and radio focus outlines (#85379) #85436

Merged

t-hamano mentioned this pull request Oct 23, 2026

UnitControl: Use the design system outline for the unit select focus ring #85444

Merged

t-hamano added Backported to WP Core Pull request that has been successfully merged into WP Core and removed Backport to WP 7.2 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Oct 24, 2026

Navigation Menu

Repository navigation

Components: Standardize checkbox and radio focus outlines - #85379

Components: Standardize checkbox and radio focus outlines#85379
ciampo merged 5 commits into
WordPress:trunkfrom
himanshupathak95:fix/80138-checkbox-radio-focus-rings

himanshupathak95 commented Oct 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 22, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 22, 2026 •

edited

Loading

Review skipped

Summary by CodeRabbit

Uh oh!

ciampo left a comment

Uh oh!

ciampo left a comment

Uh oh!

Uh oh!

github-actions Bot commented Oct 22, 2026

Uh oh!

himanshupathak95 commented Oct 22, 2026

Uh oh!

ciampo commented Oct 22, 2026

Uh oh!

himanshupathak95 commented Oct 23, 2026

Uh oh!

t-hamano commented Oct 23, 2026

Uh oh!

himanshupathak95 commented Oct 23, 2026

Uh oh!

t-hamano commented Oct 24, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

himanshupathak95 commented Oct 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Before

After

Use of AI Tools

Uh oh!

github-actions Bot commented Oct 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤖 PR meta 🤖

🎉 Props

Uh oh!

coderabbitai Bot commented Oct 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Summary by CodeRabbit

Uh oh!

ciampo left a comment

Choose a reason for hiding this comment

Uh oh!

ciampo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Oct 22, 2026

Uh oh!

himanshupathak95 commented Oct 22, 2026

Uh oh!

ciampo commented Oct 22, 2026

Uh oh!

himanshupathak95 commented Oct 23, 2026

Uh oh!

t-hamano commented Oct 23, 2026

Uh oh!

himanshupathak95 commented Oct 23, 2026

Uh oh!

t-hamano commented Oct 24, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

himanshupathak95 commented Oct 22, 2026 •

edited

Loading

github-actions Bot commented Oct 22, 2026 •

edited

Loading

coderabbitai Bot commented Oct 22, 2026 •

edited

Loading