Toolbar: Fix unnatural focus outline on frontend.

t-hamano · t-hamano · commit a6a1aadf38dc · 2026-06-04T09:44:28.000Z
Make the focus outline transparent to avoid showing an unnatural focus outline on the front end. In Windows high contrast mode, the focus outline is still displayed as before. Props hbhalodia, joedolson, wildworks. Fixes #65177. git-svn-id: https://develop.svn.wordpress.org/trunk@62459 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
@@ -78,8 +78,9 @@ html:lang(he-il) .rtl #wpadminbar * {
 }
 
 #wpadminbar a:focus {
-	/* Inherits transparent outline only visible in Windows High Contrast mode */
 	outline-offset: -1px;
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
 }
 
 #wpadminbar {

Original file line number	Diff line number	Diff line change
`@@ -78,8 +78,9 @@ html:lang(he-il) .rtl #wpadminbar * {`
`78`	`78`	`}`
`79`	`79`
`80`	`80`	`#wpadminbar a:focus {`
`81`		`- /* Inherits transparent outline only visible in Windows High Contrast mode */`
`82`	`81`	`outline-offset: -1px;`
	`82`	`+ /* Only visible in Windows High Contrast mode */`
	`83`	`+ outline: 2px solid transparent;`
`83`	`84`	`}`
`84`	`85`
`85`	`86`	`#wpadminbar {`