Administration: Replace hardcoded 0.5px focus styles with the standard focus-width variable

[i-am-chitti]

Ticket

https://core.trac.wordpress.org/ticket/65645

What & why

Since the 7.0 admin refresh, a few focus styles regressed to a hardcoded box-shadow: 0 0 0 0.5px. 0.5px is a sub-pixel value — the browser rounds or anti-aliases it, so the focus indicator renders thinner and less reliably than intended.

This PR replaces those values with the --wp-admin-border-width-focus custom property (fallback 1.5px), the pattern already used across the admin styles. It resolves to:

• 2px on standard-density displays, and
• 1.5px on displays with a device pixel ratio ≥ 2 (@media (min-resolution: 192dpi)),

so the ring always maps to whole physical pixels and avoids sub-pixel rounding.

Changes

• wp-admin/css/forms.css — #pass1/#pass1-text and .mailserver-pass-wrap .button.wp-hide-pw: 0.5px → var(--wp-admin-border-width-focus, 1.5px).
• wp-includes/css/media-views.css — .media-frame inputs / select / textarea: 0.5px → var(--wp-admin-border-width-focus, 1.5px).
• wp-admin/css/edit.css — div.tabs-panel-active:focus: add border-color: var(--wp-admin-theme-color) so the 1px border and the box-shadow form a single uniform ring (a consistency fix; not a thin-value change — this selector already used the variable).

Only the authored LTR source files are committed; -rtl.css/.min.css are build artifacts regenerated via grunt rtl cssmin.

Why the password case was hard to spot

The #pass1 and .wp-hide-pw selectors are also defined — correctly — in the admin color scheme (colors/_admin.scss → colors/*/colors.css), which loads after forms.css on admin pages and masks the thin rule there. So the password regression is most visible on the Reset Password screen (wp-login.php), which loads no color scheme — where it was originally reported. The .media-frame and .tabs-panel cases have no such duplicate, so they are visible directly on their admin screens.

Testing instructions

1. Reset Password screen (wp-login.php?action=rp&...): focus New password. Computed box-shadow should be ... var(--wp-admin-border-width-focus, 1.5px) ... (→ 2px, or 1.5px on HiDPI), not ... 0.5px ....
2. Media Library / Add Media modal: focus the search field, the filter selects, and the Alt Text field — all should show the same var(--wp-admin-border-width-focus) ring (2px, 1.5px on HiDPI).
3. Appearance → Menus: Tab into the "Most Recent" pages panel and compare its focus ring to the Menu Name input — they should now read as the same thickness (no gray 1px separator between content and the blue ring).
4. Best verified on a display with a device pixel ratio of 2.

Out of scope (raising as questions on the ticket)

These consistency items from the ticket need a design decision rather than a value swap, so they are intentionally left out of this PR:

• Attachment thumbnail focus differs between the grid Media Library (media.css → .media-frame.mode-grid .attachment:focus, outset ring) and the editor's select-media modal (media-views.css → .wp-core-ui .attachment:focus, inset ring).
• Borderless focusable elements (thumbnails, view-switch links, menu items) get a thinner ring than bordered inputs, because inputs add a same-color 1px border on top of the shadow.
• List/grid view-switch links have no focus ring at all on focus (only an icon color change).

Screenshots

Before -

Now -

Before -

Now -

Before -

After -

Use of AI

Claude Code Opus 4.8

Assisted with investigating the conflicting focus rules and drafting PR description; all changes were manually reviewed and tested before committing.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props iamchitti, afercia.

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

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[afercia]

This appears to be duplicated in other stylesheets but It's better to have it duplicated rather than having the password toggle button focus unstyled in some edge cases.

[Copilot]

Pull request overview

This PR standardizes several admin (and media modal) focus styles by replacing hardcoded 0.5px box-shadow spreads with the shared --wp-admin-border-width-focus custom property (with a 1.5px fallback), improving focus ring consistency and avoiding sub-pixel rendering.

Changes:

• Updated focus ring thickness in password-related controls (forms.css) and Media modal form controls (media-views.css) to use var(--wp-admin-border-width-focus, 1.5px).
• Tweaked Menus “tabs panel” focus styling (edit.css) so the border color matches the focus ring color.
• Added a new focus treatment to the list-table view switch links (list-tables.css), including a transparent border and a :focus border-color change.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
src/wp-includes/css/media-views.css	Replaces a hardcoded 0.5px focus shadow spread with the shared focus-width variable.
src/wp-admin/css/forms.css	Updates focus shadows for password-related controls to use the standard focus-width variable.
src/wp-admin/css/edit.css	Aligns the tabs panel border color with the focus ring color for a more uniform focus indicator.
src/wp-admin/css/list-tables.css	Introduces a new focus indicator approach for the view-switch links (transparent border + focused border color).

Comments suppressed due to low confidence (1)

src/wp-admin/css/list-tables.css:785

• This PR is described as only replacing hardcoded 0.5px focus styles, and the description explicitly calls out view-switch links as out of scope. The changes here add a new focus treatment for .view-switch a, so the PR description (and/or scope) should be updated to reflect this additional change, or the change should be moved to a separate PR.

.view-switch a:focus {
	border-color: var(--wp-admin-theme-color);
}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[afercia]

The feedback for the password quality uses colored red, orange, green border colors, see:

• #pass1.short
• #pass1.bad
• #pass1.good
• #pass1.strong

the focus style is thinner than expected. I'd rather see a consistent focus style and I'm OK to have the colored border not visible on focus. It is still visible when the input field is not focused.
I'm going to push a change to add the border-color to the focus style. Screenshot before and after:

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (2)

src/wp-admin/css/list-tables.css:772

• Adding a 1px border to .view-switch a while it also has explicit width/height will increase the element’s rendered size unless box-sizing: border-box is set. This can cause small layout shifts in the view-switch controls.

Set box-sizing: border-box on the link so the border is included in the declared dimensions.

	line-height: 1.84615384;
	text-decoration: none;
	/* This border is needed for the focus style, which will change the border color. */
	border: 1px solid transparent;
}

src/wp-admin/css/forms.css:741

• #pass1:focus / #pass1-text:focus now sets border-color, which overrides the password-strength state colors (#pass1.short, .bad, .good, .strong) while the field is focused (same specificity, later rule). That makes the strength feedback harder to see while typing.

If the intent is only to adjust the focus ring thickness, consider removing the border-color override so the strength classes can continue to control the border.

#pass1:focus,
#pass1-text:focus {
	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
	border-color: var(--wp-admin-theme-color, #3858e9);
	/* Only visible in Windows High Contrast mode */

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (3)

src/wp-admin/css/list-tables.css:767

• Adding a 1px border to .view-switch a changes the element’s rendered size because the rule also sets fixed width/height and there is no box-sizing: border-box here. That can subtly shift the view-switch layout. Consider setting box-sizing: border-box so the border is included in the 28px/36px sizing.

.view-switch a {
	float: left;
	width: 28px;
	height: 28px;
	text-align: center;

src/wp-admin/css/edit.css:1393

• This new border-color relies on --wp-admin-theme-color but the box-shadow line already includes a fallback color. Adding the same fallback here avoids the border staying gray if the custom property is unavailable.

	border-color: var(--wp-admin-theme-color);

src/wp-admin/css/list-tables.css:786

• This introduces a new focus treatment for the list/grid .view-switch links (adding a border and changing its color on focus), but the PR description/title focus on replacing hardcoded 0.5px focus widths and even call out view-switch links as out-of-scope. Please either update the PR description/scope to include this change, or move it to a separate PR.

.view-switch a:focus {
	/* This focus style already inherits box-shadow and outline from the regular links focus style. */
	border-color: var(--wp-admin-theme-color, #3858e9);
}

[afercia]

Screenshot of the fix for the view-switch links focus style, compared with other elements in the Media library toolbar.

[github-actions]

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 62942
GitHub commit: c2a8f06

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.