Commit 8ef94ac8c78 for woocommerce
commit 8ef94ac8c7840b24bfaa4a046af914f9ca580a33
Author: Ann <annchichi@users.noreply.github.com>
Date: Tue May 12 16:41:03 2026 +0800
Fix Marketplace product card title focus ring (#64788)
* Fix Marketplace product card title focus ring
* Fix Marketplace title focus ring wrapping
diff --git a/plugins/woocommerce/changelog/fix-marketplace-product-card-title-focus-ring b/plugins/woocommerce/changelog/fix-marketplace-product-card-title-focus-ring
new file mode 100644
index 00000000000..2d768191e62
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-marketplace-product-card-title-focus-ring
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Prevent the Marketplace product card title focus ring from being clipped.
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.scss b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.scss
index e3b88d4c746..3bc3ec51c86 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.scss
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.scss
@@ -129,6 +129,8 @@
}
&__title {
+ --woocommerce-marketplace-product-card-title-focus-width: var(--wp-admin-border-width-focus, 2px);
+
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
@@ -137,10 +139,19 @@
font-style: normal;
font-weight: 600;
line-height: $large-gap;
- margin: -4px 0 0;
- padding: 0;
+ margin:
+ calc(-4px - var(--woocommerce-marketplace-product-card-title-focus-width))
+ calc(-1 * var(--woocommerce-marketplace-product-card-title-focus-width))
+ calc(-1 * var(--woocommerce-marketplace-product-card-title-focus-width));
+ padding: var(--woocommerce-marketplace-product-card-title-focus-width);
+ max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
+ width: fit-content;
+
+ &:has(.woocommerce-marketplace__product-card__link:focus-visible) {
+ box-shadow: 0 0 0 var(--woocommerce-marketplace-product-card-title-focus-width) var(--wp-admin-theme-color, #2271b1);
+ }
}
&__link {
@@ -156,7 +167,7 @@
}
&:focus-visible {
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color, #2271b1);
+ box-shadow: none;
}
/* Use the ::after trick to make the whole card clickable: */
@@ -444,4 +455,3 @@
}
}
}
-