From 7fa6c5aed2ed832fb98d393ec74fc9ddc9761560 Mon Sep 17 00:00:00 2001
From: Gabriel Manussakis <9420947+Manussakis@users.noreply.github.com>
Date: Mon, 11 Nov 2024 08:01:31 -0300
Subject: [PATCH] [Accessibility] Add focus indicator to image on product card
 (#52011)

* Add focus indicator to image on product card

* Add changelog file

* Fix product image focus outline on Storefront theme

* Fix product image focus outline for the T17 theme
---
 .../assets/js/atomic/blocks/product-elements/image/style.scss | 2 +-
 plugins/woocommerce/changelog/fix-51839                       | 4 ++++
 plugins/woocommerce/client/legacy/css/twenty-seventeen.scss   | 4 ++++
 3 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 plugins/woocommerce/changelog/fix-51839

diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/style.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/style.scss
index 7c08d449ee6..00c9e120bbb 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/style.scss
@@ -8,8 +8,8 @@
 		border-radius: inherit;
 		text-decoration: none;
 		border: 0;
-		outline: 0;
 		box-shadow: none;
+		display: block;
 	}
 
 	img {
diff --git a/plugins/woocommerce/changelog/fix-51839 b/plugins/woocommerce/changelog/fix-51839
new file mode 100644
index 00000000000..d15543045c4
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-51839
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Add focus indicator to image on product card
diff --git a/plugins/woocommerce/client/legacy/css/twenty-seventeen.scss b/plugins/woocommerce/client/legacy/css/twenty-seventeen.scss
index 10424b8a587..8587c4cd0e2 100644
--- a/plugins/woocommerce/client/legacy/css/twenty-seventeen.scss
+++ b/plugins/woocommerce/client/legacy/css/twenty-seventeen.scss
@@ -169,6 +169,10 @@ ul.products {
 	li.product {
 		list-style: none;
 
+		.woocommerce-loop-product__link {
+			display: block;
+		}
+
 		.price,
 		.star-rating {
 			display: block;