From b4f4970347313931ded27e42b553be9b9f616c4a Mon Sep 17 00:00:00 2001
From: zeyber <rotherham.c@gmail.com>
Date: Thu, 9 Apr 2026 10:52:25 +0200
Subject: [PATCH 1/8] fix: Fix keyboard tabbing order in product image zoom
 view

---
 .../product-image-zoom-view.component.html    | 56 ++++++++++---------
 .../styles/_product-image-zoom-view.scss      | 42 +++++++-------
 2 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
index 0a3d48193f8..eeedfdcb5a2 100644
--- a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
+++ b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
@@ -33,33 +33,6 @@
         >
         </cx-media>
       </div>
-      <button
-        #zoomButton
-        *ngIf="imageLoaded | async"
-        [attr.aria-label]="
-          isZoomed
-            ? ('common.zoomOut' | cxTranslate)
-            : ('common.zoomIn' | cxTranslate)
-        "
-        title="{{
-          isZoomed
-            ? ('common.zoomOut' | cxTranslate)
-            : ('common.zoomIn' | cxTranslate)
-        }}"
-        class="btn btn-link cx-zoom-btn"
-        (click)="zoom()"
-      >
-        <cx-icon
-          [type]="iconType.SEARCH_PLUS"
-          *ngIf="!isZoomed"
-          class="cx-zoom-indicator"
-        ></cx-icon>
-        <cx-icon
-          [type]="iconType.SEARCH_MINUS"
-          *ngIf="isZoomed"
-          class="cx-zoom-indicator"
-        ></cx-icon>
-      </button>
     </div>
     <ng-container *cxFeature="'!a11yKeyboardAccessibleZoom'">
       <cx-media
@@ -92,6 +65,35 @@
       </button>
     </div>
   </div>
+  <div class="cx-zoom-btn-container">
+    <button
+      #zoomButton
+      *ngIf="imageLoaded | async"
+      [attr.aria-label]="
+        isZoomed
+          ? ('common.zoomOut' | cxTranslate)
+          : ('common.zoomIn' | cxTranslate)
+      "
+      title="{{
+        isZoomed
+          ? ('common.zoomOut' | cxTranslate)
+          : ('common.zoomIn' | cxTranslate)
+      }}"
+      class="btn btn-link cx-zoom-btn"
+      (click)="zoom()"
+    >
+      <cx-icon
+        [type]="iconType.SEARCH_PLUS"
+        *ngIf="!isZoomed"
+        class="cx-zoom-indicator"
+      ></cx-icon>
+      <cx-icon
+        [type]="iconType.SEARCH_MINUS"
+        *ngIf="isZoomed"
+        class="cx-zoom-indicator"
+      ></cx-icon>
+    </button>
+  </div>
 </ng-container>
 
 <cx-product-image-zoom-thumbnails
diff --git a/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss b/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
index 88d69d042c8..49da07bdb89 100644
--- a/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
+++ b/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
@@ -119,41 +119,39 @@ cx-product-image-zoom-view {
       @include media-breakpoint-up(lg) {
         height: fit-content;
       }
+    }
 
-      .cx-zoom-btn {
-        margin: 0.5rem;
-        border-radius: 100%;
-        background-color: var(--cx-color-medium);
-        position: absolute;
-        padding: 0;
-        right: 0;
-        bottom: 0;
-
-        @include media-breakpoint-down(sm) {
-          display: none;
-        }
+    .cx-zoom-btn-container {
+      text-align: center;
+    }
 
-        &:focus {
-          box-shadow: none;
-        }
+    .cx-zoom-btn {
+      margin: 0.5rem;
+      border-radius: 100%;
+      padding: 0;
 
-        .cx-zoom-indicator {
-          color: var(--cx-color-background-dark);
-          font-size: 2rem;
-        }
+      @include media-breakpoint-down(sm) {
+        display: none;
+      }
+
+      &:focus {
+        box-shadow: none;
+      }
+
+      .cx-zoom-indicator {
+        font-size: 2rem;
       }
     }
   }
 
   @include cx-highContrastTheme-light {
-    .cx-image-container .cx-zoom-btn .cx-zoom-indicator {
+    .cx-image-container .cx-zoom-btn-container .cx-zoom-btn .cx-zoom-indicator {
       color: var(--cx-color-dark);
     }
   }
 
   @include cx-highContrastTheme-dark {
-    .cx-image-container .cx-zoom-btn {
-      background-color: var(--cx-color-dark);
+    .cx-image-container .cx-zoom-btn-container .cx-zoom-btn .cx-zoom-indicator {
       color: var(--cx-color-light);
       --cx-color-visual-focus: #1f3a93;
     }

From a555028549c504fcacde4015e7aa90831fdfa267 Mon Sep 17 00:00:00 2001
From: zeyber <rotherham.c@gmail.com>
Date: Thu, 9 Apr 2026 11:00:54 +0200
Subject: [PATCH 2/8] add feature flag

---
 .../product-image-zoom-view.component.html                      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
index eeedfdcb5a2..119acab5676 100644
--- a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
+++ b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
@@ -65,7 +65,7 @@
       </button>
     </div>
   </div>
-  <div class="cx-zoom-btn-container">
+  <div class="cx-zoom-btn-container" *cxFeature="'a11yKeyboardAccessibleZoom'">
     <button
       #zoomButton
       *ngIf="imageLoaded | async"

From 00e4131af1684e215de8360f51539b964e649816 Mon Sep 17 00:00:00 2001
From: zeyber <rotherham.c@gmail.com>
Date: Mon, 27 Apr 2026 11:46:40 +0200
Subject: [PATCH 3/8] move styles to bottom of class

---
 .../styles/_product-image-zoom-view.scss      | 65 +++++++++++++++----
 1 file changed, 54 insertions(+), 11 deletions(-)

diff --git a/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss b/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
index 49da07bdb89..b5332e5993f 100644
--- a/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
+++ b/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
@@ -119,10 +119,43 @@ cx-product-image-zoom-view {
       @include media-breakpoint-up(lg) {
         height: fit-content;
       }
+
+      .cx-zoom-btn {
+        margin: 0.5rem;
+        border-radius: 100%;
+        padding: 0;
+
+        @include media-breakpoint-down(sm) {
+          display: none;
+        }
+
+        &:focus {
+          box-shadow: none;
+        }
+
+        .cx-zoom-indicator {
+          font-size: 2rem;
+        }
+      }
+    }
+  }
+
+  @include cx-highContrastTheme-light {
+    .cx-image-container .cx-zoom-btn .cx-zoom-indicator {
+      color: var(--cx-color-dark);
     }
+  }
 
-    .cx-zoom-btn-container {
-      text-align: center;
+  @include cx-highContrastTheme-dark {
+    .cx-image-container .cx-zoom-btn {
+      color: var(--cx-color-light);
+      --cx-color-visual-focus: #1f3a93;
+    }
+  }
+
+  @include forFeature('a11yKeyboardAccessibleZoom') {
+    @include media-breakpoint-up(lg) {
+      height: fit-content;
     }
 
     .cx-zoom-btn {
@@ -142,18 +175,28 @@ cx-product-image-zoom-view {
         font-size: 2rem;
       }
     }
-  }
 
-  @include cx-highContrastTheme-light {
-    .cx-image-container .cx-zoom-btn-container .cx-zoom-btn .cx-zoom-indicator {
-      color: var(--cx-color-dark);
+    .cx-zoom-btn-container {
+      text-align: center;
     }
-  }
 
-  @include cx-highContrastTheme-dark {
-    .cx-image-container .cx-zoom-btn-container .cx-zoom-btn .cx-zoom-indicator {
-      color: var(--cx-color-light);
-      --cx-color-visual-focus: #1f3a93;
+    @include cx-highContrastTheme-light {
+      .cx-image-container
+        .cx-zoom-btn-container
+        .cx-zoom-btn
+        .cx-zoom-indicator {
+        color: var(--cx-color-dark);
+      }
+    }
+
+    @include cx-highContrastTheme-dark {
+      .cx-image-container
+        .cx-zoom-btn-container
+        .cx-zoom-btn
+        .cx-zoom-indicator {
+        color: var(--cx-color-light);
+        --cx-color-visual-focus: #1f3a93;
+      }
     }
   }
 }

From 81b6a836586e06d32a24f973489f34a23e331e39 Mon Sep 17 00:00:00 2001
From: zeyber <rotherham.c@gmail.com>
Date: Mon, 27 Apr 2026 11:49:50 +0200
Subject: [PATCH 4/8] revert style changes

---
 .../product/image-zoom/styles/_product-image-zoom-view.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss b/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
index b5332e5993f..31c5446094f 100644
--- a/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
+++ b/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
@@ -123,7 +123,11 @@ cx-product-image-zoom-view {
       .cx-zoom-btn {
         margin: 0.5rem;
         border-radius: 100%;
+        background-color: var(--cx-color-medium);
+        position: absolute;
         padding: 0;
+        right: 0;
+        bottom: 0;
 
         @include media-breakpoint-down(sm) {
           display: none;
@@ -134,6 +138,7 @@ cx-product-image-zoom-view {
         }
 
         .cx-zoom-indicator {
+          color: var(--cx-color-background-dark);
           font-size: 2rem;
         }
       }
@@ -148,6 +153,7 @@ cx-product-image-zoom-view {
 
   @include cx-highContrastTheme-dark {
     .cx-image-container .cx-zoom-btn {
+      background-color: var(--cx-color-dark);
       color: var(--cx-color-light);
       --cx-color-visual-focus: #1f3a93;
     }

From cfef6558f51b73cb07bdc0f7afffd4624c922145 Mon Sep 17 00:00:00 2001
From: zeyber <rotherham.c@gmail.com>
Date: Mon, 27 Apr 2026 12:29:38 +0200
Subject: [PATCH 5/8] fix focus

---
 .../product-image-zoom-view.component.html                    | 2 +-
 .../product-image-zoom-view.component.ts                      | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
index 119acab5676..22649982f50 100644
--- a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
+++ b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
@@ -68,7 +68,7 @@
   <div class="cx-zoom-btn-container" *cxFeature="'a11yKeyboardAccessibleZoom'">
     <button
       #zoomButton
-      *ngIf="imageLoaded | async"
+      [disabled]="!(imageLoaded | async)"
       [attr.aria-label]="
         isZoomed
           ? ('common.zoomOut' | cxTranslate)
diff --git a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.ts b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.ts
index 01f10bfc321..f96597f78f7 100644
--- a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.ts
+++ b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.ts
@@ -234,9 +234,11 @@ export class ProductImageZoomViewComponent implements OnInit, OnDestroy {
     if (this.featureConfigService.isEnabled('a11yKeyboardAccessibleZoom')) {
       this.imageLoaded.next(false);
       this.imageLoaded.pipe(filter(Boolean), take(1)).subscribe(() => {
+	// Removed/disabled state removes focus from this element
+	// so we need to restore it.
         setTimeout(() => {
           this.zoomButton.nativeElement.focus();
-        });
+        }, 1);
       });
     }
   }

From cfefee59699a2cab41c327a54eda18c02e1bd2ed Mon Sep 17 00:00:00 2001
From: zeyber <rotherham.c@gmail.com>
Date: Mon, 27 Apr 2026 12:33:59 +0200
Subject: [PATCH 6/8] prettier

---
 .../product-image-zoom-view.component.ts                      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.ts b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.ts
index f96597f78f7..b0c8584756f 100644
--- a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.ts
+++ b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.ts
@@ -234,8 +234,8 @@ export class ProductImageZoomViewComponent implements OnInit, OnDestroy {
     if (this.featureConfigService.isEnabled('a11yKeyboardAccessibleZoom')) {
       this.imageLoaded.next(false);
       this.imageLoaded.pipe(filter(Boolean), take(1)).subscribe(() => {
-	// Removed/disabled state removes focus from this element
-	// so we need to restore it.
+        // Removed/disabled state removes focus from this element
+        // so we need to restore it.
         setTimeout(() => {
           this.zoomButton.nativeElement.focus();
         }, 1);

From bacd92425d361a35f63c5955c2d3724dc289ba57 Mon Sep 17 00:00:00 2001
From: zeyber <rotherham.c@gmail.com>
Date: Mon, 27 Apr 2026 12:53:29 +0200
Subject: [PATCH 7/8] fix unit test

---
 .../product-image-zoom-view.component.spec.ts               | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.spec.ts b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.spec.ts
index bab8f7a1985..dd5213609b3 100644
--- a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.spec.ts
+++ b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.spec.ts
@@ -440,9 +440,11 @@ describe('ProductImageZoomViewComponent', () => {
 
       productImageZoomViewComponent.zoom();
       productImageZoomViewComponent['imageLoaded'].next(true);
-      tick();
 
-      expect(mockZoomButton.nativeElement.focus).toHaveBeenCalled();
+      setTimeout(() => {
+        expect(mockZoomButton.nativeElement.focus).toHaveBeenCalled();
+      }, 1);
+      tick(1);
     }));
   });
 });

From 7795698bed0899f054823421c40efb511f630708 Mon Sep 17 00:00:00 2001
From: zeyber <rotherham.c@gmail.com>
Date: Wed, 29 Apr 2026 06:51:59 +0200
Subject: [PATCH 8/8] remove .cx-image-container

---
 .../image-zoom/styles/_product-image-zoom-view.scss    | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss b/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
index 31c5446094f..a37b76e0a4f 100644
--- a/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
+++ b/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
@@ -187,19 +187,13 @@ cx-product-image-zoom-view {
     }
 
     @include cx-highContrastTheme-light {
-      .cx-image-container
-        .cx-zoom-btn-container
-        .cx-zoom-btn
-        .cx-zoom-indicator {
+      .cx-zoom-btn-container .cx-zoom-btn .cx-zoom-indicator {
         color: var(--cx-color-dark);
       }
     }
 
     @include cx-highContrastTheme-dark {
-      .cx-image-container
-        .cx-zoom-btn-container
-        .cx-zoom-btn
-        .cx-zoom-indicator {
+      .cx-zoom-btn-container .cx-zoom-btn .cx-zoom-indicator {
         color: var(--cx-color-light);
         --cx-color-visual-focus: #1f3a93;
       }