Commit db8731ab7f for woocommerce

commit db8731ab7f422452a24327a8781c29b9e5f84160
Author: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date:   Tue Nov 4 13:36:51 2025 +0100

    Fix Product Collection carousel layout a11y (#61780)

    * Fix focus outline in Product Collection carousel layout

    * Change sensory characteristics message to functional one

    * Make sure Product Collection Carousel arrows are visible on +400% browser zoom

    * Add changelog

diff --git a/plugins/woocommerce/changelog/fix-product-collection-carousel-a11y b/plugins/woocommerce/changelog/fix-product-collection-carousel-a11y
new file mode 100644
index 0000000000..d9b96049cf
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-product-collection-carousel-a11y
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Product Collection: improve accessibility of carousel layout
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/style.scss
index 3577e8b02f..3a30d1a1f6 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/style.scss
@@ -4,11 +4,16 @@
 	}

 	&:has(.is-product-collection-layout-carousel) {
+		// Hide navigation buttons on mobile phones (small touch screens), but keep them
+		// visible on tablets and desktop (even when zoomed).
+		// Combines screen size check with device capability detection.
 		@include breakpoint("<600px") {
-			// This rule is overriding a `display: flex` from WordPress core, that's
-			// why it needs a higher specificity.
-			:where(.wc-block-next-previous-buttons.wc-block-next-previous-buttons) {
-				display: none;
+			@media (hover: none) and (pointer: coarse) {
+				// This rule is overriding a `display: flex` from WordPress core, that's
+				// why it needs a higher specificity.
+				:where(.wc-block-next-previous-buttons.wc-block-next-previous-buttons) {
+					display: none;
+				}
 			}
 		}
 	}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-template/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-template/style.scss
index 30d511f3af..9ea1bee7b6 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-template/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-template/style.scss
@@ -96,6 +96,8 @@ $min-product-width: 150px;
 	position: relative; // Create new stacking context
 	container-type: inline-size;
 	container-name: carousel;
+	// Padding to prevent focus outline from being clipped (WCAG 2.4.13).
+	padding: 4px;

 	.wc-block-product {
 		scroll-snap-align: center;
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductCollection/Renderer.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductCollection/Renderer.php
index 68543b05c1..6f6fcd60b8 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductCollection/Renderer.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductCollection/Renderer.php
@@ -133,8 +133,8 @@ class Renderer {
 				'hideNextPreviousButtons' => false,
 				'isDisabledPrevious'      => true,
 				'isDisabledNext'          => false,
-				'ariaLabelPrevious'       => __( 'Scroll products left', 'woocommerce' ),
-				'ariaLabelNext'           => __( 'Scroll products right', 'woocommerce' ),
+				'ariaLabelPrevious'       => __( 'Previous products', 'woocommerce' ),
+				'ariaLabelNext'           => __( 'Next products', 'woocommerce' ),
 			);

 			if ( $collection ) {