From c16d3daf142383b8f38b89b291bf145b3a55db40 Mon Sep 17 00:00:00 2001 From: Khokan Sardar Date: Mon, 27 Jul 2026 17:28:33 +0530 Subject: [PATCH] Administration: Fix the focus ring size for meta box header buttons. Adding tooltips to the meta box move up, move down, and show/hide buttons wrapped them in a `.wp-tooltip` element, and the tooltip focus style is more specific than the meta box one. Enabled buttons therefore draw the tooltip's outset ring while disabled buttons keep the meta box's inset ring, so the two do not match, and the outset ring is reported as being cut off in the block editor meta boxes area. Wrap the tooltip wrapper in `:where()` so it no longer contributes to the specificity of the focus style. Which elements the selector matches is unchanged, so disabled toggles are still excluded, and buttons that ship their own focus style, such as the meta box handles, now keep it. Follow-up to [62816]. Fixes #65727. --- src/wp-admin/css/wp-tooltip.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/wp-admin/css/wp-tooltip.css b/src/wp-admin/css/wp-tooltip.css index f09a1317cdea8..e72c51a72781f 100644 --- a/src/wp-admin/css/wp-tooltip.css +++ b/src/wp-admin/css/wp-tooltip.css @@ -28,7 +28,11 @@ color: var(--wp-admin-theme-color, #3858e9); } -.wp-tooltip:not(:has(button[aria-disabled="true"],button[disabled])) .wp-tooltip__toggle:focus, +/* + * `:where()` keeps the wrapper out of the specificity total, so buttons + * passed into a tooltip keep control of their own focus ring. + */ +:where(.wp-tooltip:not(:has(button[aria-disabled="true"],button[disabled]))) .wp-tooltip__toggle:focus, .wp-tooltip .wp-tooltip__close:focus { outline: 2px solid transparent; box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);