From a6d1f81505f9db3e52f0a1951b514a9d0768f5e6 Mon Sep 17 00:00:00 2001
From: Piotr Bartkowiak <bartkowiakpiotr0@gmail.com>
Date: Wed, 14 Aug 2024 12:29:31 +0200
Subject: [PATCH 1/4] Zoom dialog close on escape

---
 .../product-image-zoom-dialog.component.html  | 30 +++++++++++++++++++
 .../feature-toggles/config/feature-toggles.ts |  6 ++++
 .../spartacus/spartacus-features.module.ts    |  1 +
 3 files changed, 37 insertions(+)

diff --git a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.html b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.html
index 7ce53251df3..c08e5e85302 100644
--- a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.html
+++ b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.html
@@ -1,4 +1,34 @@
 <div
+  *cxFeature="'a11yZoomDialogCloseOnEsc'"
+  class="cx-image-zoom-dialog"
+  role="dialog"
+  (esc)="close('Escape clicked')"
+  [cxFocus]="focusConfig"
+  [attr.aria-label]="'productImageZoomDialog.zoomedInImage' | cxTranslate"
+>
+  <div class="cx-dialog-content">
+    <div class="cx-dialog-header">
+      <button
+        type="button"
+        class="close"
+        title="{{ 'productImageZoomDialog.close' | cxTranslate }}"
+        [attr.aria-label]="'productImageZoomDialog.close' | cxTranslate"
+        (click)="close('cross click')"
+      >
+        <span aria-hidden="true">
+          <cx-icon [type]="iconType.CLOSE"></cx-icon>
+        </span>
+      </button>
+    </div>
+    <div class="cx-dialog-body">
+      <cx-product-image-zoom-view
+        [galleryIndex]="galleryIndex"
+      ></cx-product-image-zoom-view>
+    </div>
+  </div>
+</div>
+<div
+  *cxFeature="'!a11yZoomDialogCloseOnEsc'"
   class="cx-image-zoom-dialog"
   role="dialog"
   [cxFocus]="focusConfig"
diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
index 57fd5368640..2a2cd8eb6af 100644
--- a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
+++ b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -449,6 +449,11 @@ export interface FeatureTogglesInterface {
    */
   a11yNgSelectMobileReadout?: boolean;
 
+  /**
+   * When enabled, the 'ProductImageZoomDialogComponent' will be closed when the user presses the 'Esc' key.
+   */
+  a11yZoomDialogCloseOnEsc?: boolean;
+
   /**
    * In OCC cart requests, it puts parameters of a cart name and cart description
    * into a request body, instead of query params.
@@ -532,6 +537,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yDeliveryModeRadiogroup: false,
   a11yAddedToCartActiveDialog: false,
   a11yNgSelectMobileReadout: false,
+  a11yZoomDialogCloseOnEsc: false,
   occCartNameAndDescriptionInHttpRequestBody: false,
   cmsBottomHeaderSlotUsingFlexStyles: false,
 };
diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
index fd5a982089e..e2741371dfe 100644
--- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
+++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -346,6 +346,7 @@ if (environment.cpq) {
         a11yDeliveryModeRadiogroup: true,
         a11yAddedToCartActiveDialog: true,
         a11yNgSelectMobileReadout: true,
+        a11yZoomDialogCloseOnEsc: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,
       };
       return appFeatureToggles;

From 7aaeeefd5b00977c325daf7621e79422762c90dc Mon Sep 17 00:00:00 2001
From: Piotr Bartkowiak <bartkowiakpiotr0@gmail.com>
Date: Mon, 19 Aug 2024 10:46:24 +0200
Subject: [PATCH 2/4] Trigger Build


From 19e39298db43898ecf9704cd2cee8dabf805bfbb Mon Sep 17 00:00:00 2001
From: Piotr Bartkowiak <bartkowiakpiotr0@gmail.com>
Date: Mon, 19 Aug 2024 11:28:51 +0200
Subject: [PATCH 3/4] missing declaration

---
 .../product-image-zoom-dialog.component.spec.ts                 | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.spec.ts b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.spec.ts
index 2c4f74fa23c..d108227872f 100644
--- a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.spec.ts
+++ b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.spec.ts
@@ -6,6 +6,7 @@ import {
   KeyboardFocusTestingModule,
   LaunchDialogService,
 } from '@spartacus/storefront';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { ProductImageZoomDialogComponent } from './product-image-zoom-dialog.component';
 
 class MockLaunchDialogService {
@@ -46,6 +47,7 @@ describe('ProductImageZoomDialogComponent', () => {
         ProductImageZoomDialogComponent,
         MockCxIconComponent,
         MockProductImageZoomViewComponent,
+        MockFeatureDirective,
       ],
     }).compileComponents();
 

From 9b60637a937417156e2b55b47251a31fc74f2c36 Mon Sep 17 00:00:00 2001
From: Piotr Bartkowiak <bartkowiakpiotr0@gmail.com>
Date: Fri, 23 Aug 2024 09:40:35 +0200
Subject: [PATCH 4/4] Removed feature flag

---
 .../product-image-zoom-dialog.component.html  | 29 -------------------
 ...roduct-image-zoom-dialog.component.spec.ts |  2 --
 .../feature-toggles/config/feature-toggles.ts |  6 ----
 .../spartacus/spartacus-features.module.ts    |  1 -
 4 files changed, 38 deletions(-)

diff --git a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.html b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.html
index c08e5e85302..c4c48458293 100644
--- a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.html
+++ b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.html
@@ -1,5 +1,4 @@
 <div
-  *cxFeature="'a11yZoomDialogCloseOnEsc'"
   class="cx-image-zoom-dialog"
   role="dialog"
   (esc)="close('Escape clicked')"
@@ -27,31 +26,3 @@
     </div>
   </div>
 </div>
-<div
-  *cxFeature="'!a11yZoomDialogCloseOnEsc'"
-  class="cx-image-zoom-dialog"
-  role="dialog"
-  [cxFocus]="focusConfig"
-  [attr.aria-label]="'productImageZoomDialog.zoomedInImage' | cxTranslate"
->
-  <div class="cx-dialog-content">
-    <div class="cx-dialog-header">
-      <button
-        type="button"
-        class="close"
-        title="{{ 'productImageZoomDialog.close' | cxTranslate }}"
-        [attr.aria-label]="'productImageZoomDialog.close' | cxTranslate"
-        (click)="close('cross click')"
-      >
-        <span aria-hidden="true">
-          <cx-icon [type]="iconType.CLOSE"></cx-icon>
-        </span>
-      </button>
-    </div>
-    <div class="cx-dialog-body">
-      <cx-product-image-zoom-view
-        [galleryIndex]="galleryIndex"
-      ></cx-product-image-zoom-view>
-    </div>
-  </div>
-</div>
diff --git a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.spec.ts b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.spec.ts
index d108227872f..2c4f74fa23c 100644
--- a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.spec.ts
+++ b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.spec.ts
@@ -6,7 +6,6 @@ import {
   KeyboardFocusTestingModule,
   LaunchDialogService,
 } from '@spartacus/storefront';
-import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { ProductImageZoomDialogComponent } from './product-image-zoom-dialog.component';
 
 class MockLaunchDialogService {
@@ -47,7 +46,6 @@ describe('ProductImageZoomDialogComponent', () => {
         ProductImageZoomDialogComponent,
         MockCxIconComponent,
         MockProductImageZoomViewComponent,
-        MockFeatureDirective,
       ],
     }).compileComponents();
 
diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
index 2a2cd8eb6af..57fd5368640 100644
--- a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
+++ b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -449,11 +449,6 @@ export interface FeatureTogglesInterface {
    */
   a11yNgSelectMobileReadout?: boolean;
 
-  /**
-   * When enabled, the 'ProductImageZoomDialogComponent' will be closed when the user presses the 'Esc' key.
-   */
-  a11yZoomDialogCloseOnEsc?: boolean;
-
   /**
    * In OCC cart requests, it puts parameters of a cart name and cart description
    * into a request body, instead of query params.
@@ -537,7 +532,6 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yDeliveryModeRadiogroup: false,
   a11yAddedToCartActiveDialog: false,
   a11yNgSelectMobileReadout: false,
-  a11yZoomDialogCloseOnEsc: false,
   occCartNameAndDescriptionInHttpRequestBody: false,
   cmsBottomHeaderSlotUsingFlexStyles: false,
 };
diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
index e2741371dfe..fd5a982089e 100644
--- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
+++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -346,7 +346,6 @@ if (environment.cpq) {
         a11yDeliveryModeRadiogroup: true,
         a11yAddedToCartActiveDialog: true,
         a11yNgSelectMobileReadout: true,
-        a11yZoomDialogCloseOnEsc: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,
       };
       return appFeatureToggles;