Commit 62cc3702795 for woocommerce
commit 62cc37027954cb9b51a4a7d63cbc63e142027486
Author: Thilina Pituwala <thilina.hasantha@gmail.com>
Date: Fri Aug 28 14:38:45 2026 +1000
Remove the stray blue box drawn around the selected Marketplace tab (#68078)
Remove the stray blue box drawn around the selected Marketplace tab.
diff --git a/plugins/woocommerce/changelog/wccom-2882-marketplace-tab-focus-ring b/plugins/woocommerce/changelog/wccom-2882-marketplace-tab-focus-ring
new file mode 100644
index 00000000000..a44caf92d6e
--- /dev/null
+++ b/plugins/woocommerce/changelog/wccom-2882-marketplace-tab-focus-ring
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Remove the stray blue box drawn around the selected Marketplace tab on WordPress 7.1.
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/tabs/tabs.scss b/plugins/woocommerce/client/admin/client/marketplace/components/tabs/tabs.scss
index 6d8a91c150b..808c4e5f4b0 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/tabs/tabs.scss
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/tabs/tabs.scss
@@ -20,12 +20,25 @@
padding: 0;
white-space: nowrap;
- &:focus:not(:disabled) {
+ // WordPress 7.1 moved Button focus indication from box-shadow to a real
+ // outline, so suppressing box-shadow alone no longer hides it. Scope the
+ // suppression to pointer focus; keyboard focus keeps core's ring.
+ &:focus:not(:disabled):not(:focus-visible) {
box-shadow: none;
+ outline: none;
}
+ // The tab strip clips its overflow, which cuts the top and bottom off a
+ // ring drawn outside the button. Pull core's ring inside instead.
+ &:focus:not(:disabled):focus-visible {
+ outline-offset: -2px;
+ }
+
+ // Only the bottom edge is the active indicator. WordPress 7.1 gives
+ // .components-button a 1px transparent border on all four sides, so the
+ // border-color shorthand would paint a full box around the active tab.
&.is-active {
- border-color: var(--wp-admin-theme-color);
+ border-bottom-color: var(--wp-admin-theme-color);
}
}