From f7d37b749b9319fc811c15e380e93acddde4cb65 Mon Sep 17 00:00:00 2001
From: PioBar <72926984+Pio-Bar@users.noreply.github.com>
Date: Fri, 9 Aug 2024 12:57:00 +0200
Subject: [PATCH] fix: (CXSPA-979) - Dialogs announcement JAWS fix (#19071)

---
 .../asm-bind-cart-dialog.component.html       |   1 +
 .../asm-save-cart-dialog.component.html       |   1 +
 .../asm-switch-customer-dialog.component.html |   1 +
 .../added-to-cart-dialog.component.html       | 143 +++++++++++++++++-
 .../clear-cart-dialog.component.html          |   3 +-
 .../import-entries-dialog.component.html      |   3 +-
 .../saved-cart-form-dialog.component.html     |   3 +-
 ...omer-ticketing-close-dialog.component.html |   3 +-
 ...mer-ticketing-reopen-dialog.component.html |   3 +-
 ...mer-ticketing-create-dialog.component.html |   3 +-
 .../reorder-dialog.component.html             |   3 +-
 ...t-order-cancellation-dialog.component.html |   3 +-
 ...ator-conflict-solver-dialog.component.html |   9 +-
 ...ator-overview-filter-dialog.component.html |   3 +-
 ...configurator-restart-dialog.component.html |   9 +-
 .../translations/en/productImageZoom.json     |   1 +
 .../product-image-zoom-dialog.component.html  |   7 +-
 .../quote-confirm-dialog.component.html       |   3 +-
 .../verification-token-dialog.component.html  |   1 +
 .../suggested-addresses-dialog.component.html |   3 +-
 .../dp-confirmation-dialog.component.html     |   3 +-
 .../feature-toggles/config/feature-toggles.ts |   7 +
 .../spartacus/spartacus-features.module.ts    |   1 +
 .../coupon-dialog.component.html              |   3 +-
 .../stock-notification-dialog.component.html  |   3 +-
 .../anonymous-consent-dialog.component.html   |   3 +-
 26 files changed, 205 insertions(+), 21 deletions(-)

diff --git a/feature-libs/asm/components/asm-bind-cart-dialog/asm-bind-cart-dialog.component.html b/feature-libs/asm/components/asm-bind-cart-dialog/asm-bind-cart-dialog.component.html
index b385fda9fce..212f1d58390 100644
--- a/feature-libs/asm/components/asm-bind-cart-dialog/asm-bind-cart-dialog.component.html
+++ b/feature-libs/asm/components/asm-bind-cart-dialog/asm-bind-cart-dialog.component.html
@@ -3,6 +3,7 @@
   role="dialog"
   [cxFocus]="focusConfig"
   (esc)="closeModal(BIND_CART_ACTION.CANCEL)"
+  aria-labelledby="asm-bind-cart-dialog-title"
 >
   <div class="cx-modal-content">
     <!-- Modal Header -->
diff --git a/feature-libs/asm/components/asm-save-cart-dialog/asm-save-cart-dialog.component.html b/feature-libs/asm/components/asm-save-cart-dialog/asm-save-cart-dialog.component.html
index 642d5cdf8c7..e41d4b3aa04 100644
--- a/feature-libs/asm/components/asm-save-cart-dialog/asm-save-cart-dialog.component.html
+++ b/feature-libs/asm/components/asm-save-cart-dialog/asm-save-cart-dialog.component.html
@@ -3,6 +3,7 @@
   role="dialog"
   [cxFocus]="focusConfig"
   (esc)="closeModal(BIND_CART_ACTION.CANCEL)"
+  aria-labelledby="asm-save-cart-dialog-title"
 >
   <div class="cx-modal-content">
     <!-- Modal Header -->
diff --git a/feature-libs/asm/components/asm-switch-customer-dialog/asm-switch-customer-dialog.component.html b/feature-libs/asm/components/asm-switch-customer-dialog/asm-switch-customer-dialog.component.html
index 37991cfe743..25a8a6e6765 100644
--- a/feature-libs/asm/components/asm-switch-customer-dialog/asm-switch-customer-dialog.component.html
+++ b/feature-libs/asm/components/asm-switch-customer-dialog/asm-switch-customer-dialog.component.html
@@ -3,6 +3,7 @@
   [cxFocus]="focusConfig"
   (esc)="closeModal(SWITCH_CUSTOMER_DIALOG_ACTION.CANCEL)"
   role="dialog"
+  aria-labelledby="asm-switch-customer-dialog-title"
 >
   <div class="cx-modal-content">
     <!-- Modal Header -->
diff --git a/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.html b/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.html
index 8aa29216a7d..bf0cdb27aec 100644
--- a/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.html
+++ b/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.html
@@ -1,14 +1,155 @@
 <div
+  *cxFeature="'a11yAddedToCartActiveDialog'"
   class="cx-modal-container"
   role="dialog"
   [cxFocus]="focusConfig"
   (esc)="dismissModal('Escape pressed')"
+  aria-labelledby="dialogTitle"
+>
+  <div class="cx-modal-content">
+    <!-- Modal Header -->
+    <div
+      aria-live="polite"
+      aria-atomic="true"
+      class="cx-dialog-header modal-header"
+    >
+      <div id="dialogTitle" class="cx-dialog-title modal-title">
+        {{
+          (loaded$ | async)
+            ? (addedEntryWasMerged$ | async)
+              ? ('addToCart.itemsIncrementedInYourCart' | cxTranslate)
+              : ('addToCart.itemsAddedToYourCart' | cxTranslate)
+            : ('addToCart.updatingCart' | cxTranslate)
+        }}
+      </div>
+      <button
+        type="button"
+        class="close"
+        attr.aria-label="{{ 'addToCart.closeModal' | cxTranslate }}"
+        (click)="dismissModal('Cross click')"
+      >
+        <span aria-hidden="true">
+          <cx-icon [type]="iconTypes.CLOSE"></cx-icon>
+        </span>
+      </button>
+    </div>
+
+    <!-- Modal Body -->
+    <ng-container *ngIf="loaded$ | async; else loading">
+      <div class="cx-dialog-body modal-body" *ngIf="entry$ | async as entry">
+        <div class="cx-dialog-row">
+          <div class="cx-dialog-item col-sm-12 col-md-6">
+            <cx-cart-item
+              [item]="entry"
+              [compact]="true"
+              [quantityControl]="getQuantityControl() | async"
+              [promotionLocation]="promotionLocation"
+            ></cx-cart-item>
+            <div class="cx-dialog-pickup-store" *ngIf="pickupStoreName">
+              {{ 'pickupOptionDialog.modalHeader' | cxTranslate }}:
+              <span class="cx-dialog-pickup-store-name">{{
+                pickupStoreName
+              }}</span>
+            </div>
+          </div>
+          <!-- Separator -->
+          <div
+            class="cx-dialog-separator col-sm-12 d-xs-block d-sm-block d-md-none"
+          ></div>
+          <!-- Total container -->
+          <div
+            class="cx-dialog-actions col-sm-12 col-md-6"
+            *ngIf="cart$ | async as cart"
+          >
+            <div class="cx-dialog-total">
+              <div>
+                {{
+                  'cartItems.cartTotal'
+                    | cxTranslate: { count: cart.deliveryItemsQuantity }
+                }}
+              </div>
+
+              <div>{{ cart.subTotal?.formattedValue }}</div>
+            </div>
+
+            <!-- Promotions -->
+            <div class="cx-dialog-promotions">
+              <cx-promotions
+                [promotions]="
+                  (cart.appliedOrderPromotions || []).concat(
+                    cart.potentialOrderPromotions || []
+                  )
+                "
+              ></cx-promotions>
+            </div>
+
+            <!-- Actions -->
+            <div class="cx-dialog-buttons">
+              <!-- TODO: (CXSPA-7252) - Remove feature flag next major release -->
+              <ng-container *cxFeature="'a11yUseButtonsForBtnLinks'">
+                <button
+                  [class.disabled]="form.dirty"
+                  (click)="onAction('viewCart')"
+                  class="btn btn-primary"
+                  autofocus
+                >
+                  {{ 'addToCart.viewCart' | cxTranslate }}
+                </button>
+                <button
+                  [class.disabled]="form.dirty"
+                  (click)="onAction('checkout')"
+                  class="btn btn-secondary"
+                >
+                  {{ 'addToCart.proceedToCheckout' | cxTranslate }}
+                </button>
+              </ng-container>
+              <ng-container *cxFeature="'!a11yUseButtonsForBtnLinks'">
+                <a
+                  [class.disabled]="form.dirty"
+                  [routerLink]="{ cxRoute: 'cart' } | cxUrl"
+                  (click)="dismissModal('View Cart click')"
+                  class="btn btn-primary"
+                  autofocus
+                  >{{ 'addToCart.viewCart' | cxTranslate }}</a
+                >
+                <a
+                  [class.disabled]="form.dirty"
+                  [routerLink]="{ cxRoute: 'checkout' } | cxUrl"
+                  (click)="dismissModal('Proceed To Checkout click')"
+                  class="btn btn-secondary"
+                  >{{ 'addToCart.proceedToCheckout' | cxTranslate }}</a
+                >
+              </ng-container>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ng-container>
+  </div>
+
+  <!-- Modal Body -->
+  <ng-template #loading>
+    <div class="cx-dialog-body modal-body">
+      <div class="cx-dialog-row">
+        <div class="col-sm-12"><cx-spinner></cx-spinner></div>
+      </div>
+    </div>
+  </ng-template>
+</div>
+
+<div
+  *cxFeature="'!a11yAddedToCartActiveDialog'"
+  class="cx-modal-container"
+  role="dialog"
+  [cxFocus]="focusConfig"
+  (esc)="dismissModal('Escape pressed')"
+  aria-labelledby="dialogTitle"
 >
   <div class="cx-modal-content">
     <!-- Modal Header -->
     <ng-container *ngIf="loaded$ | async; else loading">
       <div class="cx-dialog-header modal-header">
-        <div class="cx-dialog-title modal-title">
+        <div id="dialogTitle" class="cx-dialog-title modal-title">
           {{
             (addedEntryWasMerged$ | async)
               ? ('addToCart.itemsIncrementedInYourCart' | cxTranslate)
diff --git a/feature-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.html b/feature-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.html
index 7883389f1dc..2947291627c 100644
--- a/feature-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.html
+++ b/feature-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.html
@@ -3,6 +3,7 @@
   (esc)="close('Escape clicked')"
   class="cx-clear-cart-dialog"
   role="dialog"
+  aria-labelledby="dialogTitle"
 >
   <div class="cx-clear-cart-container">
     <ng-container *ngIf="!isClearing; else loading">
@@ -12,7 +13,7 @@
       ></div>
       <!-- Modal Header -->
       <div class="modal-header cx-clear-cart-header">
-        <div class="cx-clear-cart-title modal-title">
+        <div id="dialogTitle" class="cx-clear-cart-title modal-title">
           {{ 'clearCart.clearCart' | cxTranslate }}
         </div>
 
diff --git a/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.html b/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.html
index 14c0ee9d477..47ab36dc240 100644
--- a/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.html
+++ b/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.html
@@ -3,12 +3,13 @@
   (esc)="close('Escape clicked')"
   class="cx-import-entries-dialog"
   role="dialog"
+  aria-labelledby="dialogTitle"
 >
   <div class="cx-import-entries-container">
     <!-- Modal Header -->
     <div class="modal-header cx-import-entries-header">
       <ng-container>
-        <div class="cx-import-entries-title modal-title">
+        <div id="dialogTitle" class="cx-import-entries-title modal-title">
           {{ 'importEntriesDialog.importProducts' | cxTranslate }}
         </div>
       </ng-container>
diff --git a/feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html b/feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html
index d8b6e02fa9d..c422237aaa3 100644
--- a/feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html
+++ b/feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html
@@ -4,12 +4,13 @@
     (esc)="close('Escape clicked')"
     class="cx-saved-cart-form-dialog"
     role="dialog"
+    aria-labelledby="dialogTitle"
   >
     <form [formGroup]="form" class="cx-saved-cart-form-container">
       <!-- Modal Header -->
       <div class="modal-header cx-saved-cart-form-header">
         <ng-container [ngSwitch]="layoutOption">
-          <div class="cx-saved-cart-form-title modal-title">
+          <div id="dialogTitle" class="cx-saved-cart-form-title modal-title">
             <ng-container *ngSwitchCase="savedCartFormType.EDIT">
               {{ 'savedCartDialog.editSavedCart' | cxTranslate }}
             </ng-container>
diff --git a/feature-libs/customer-ticketing/components/details/customer-ticketing-close/customer-ticketing-close-dialog/customer-ticketing-close-dialog.component.html b/feature-libs/customer-ticketing/components/details/customer-ticketing-close/customer-ticketing-close-dialog/customer-ticketing-close-dialog.component.html
index 10b6a7106bb..f5e43cf5a3a 100644
--- a/feature-libs/customer-ticketing/components/details/customer-ticketing-close/customer-ticketing-close-dialog/customer-ticketing-close-dialog.component.html
+++ b/feature-libs/customer-ticketing/components/details/customer-ticketing-close/customer-ticketing-close-dialog/customer-ticketing-close-dialog.component.html
@@ -3,10 +3,11 @@
   (esc)="close('Escape clicked')"
   class="cx-customer-ticket-form-dialog"
   role="dialog"
+  aria-labelledby="dialogTitle"
 >
   <form [formGroup]="form" class="cx-customer-ticket-form-container">
     <div class="modal-header cx-customer-ticket-form-header">
-      <div class="cx-customer-ticket-form-title modal-title">
+      <div id="dialogTitle" class="cx-customer-ticket-form-title modal-title">
         {{ 'customerTicketingDetails.closeRequest' | cxTranslate }}
       </div>
       <button
diff --git a/feature-libs/customer-ticketing/components/details/customer-ticketing-reopen/customer-ticketing-reopen-dialog/customer-ticketing-reopen-dialog.component.html b/feature-libs/customer-ticketing/components/details/customer-ticketing-reopen/customer-ticketing-reopen-dialog/customer-ticketing-reopen-dialog.component.html
index 5d6b7e895e5..9207b6db8e7 100644
--- a/feature-libs/customer-ticketing/components/details/customer-ticketing-reopen/customer-ticketing-reopen-dialog/customer-ticketing-reopen-dialog.component.html
+++ b/feature-libs/customer-ticketing/components/details/customer-ticketing-reopen/customer-ticketing-reopen-dialog/customer-ticketing-reopen-dialog.component.html
@@ -3,10 +3,11 @@
   (esc)="close('Escape clicked')"
   class="cx-customer-ticket-form-dialog"
   role="dialog"
+  aria-labelledby="dialogTitle"
 >
   <form [formGroup]="form" class="cx-customer-ticket-form-container">
     <div class="modal-header cx-customer-ticket-form-header">
-      <div class="cx-customer-ticket-form-title modal-title">
+      <div id="dialogTitle" class="cx-customer-ticket-form-title modal-title">
         {{ 'customerTicketingDetails.reopenRequest' | cxTranslate }}
       </div>
       <button
diff --git a/feature-libs/customer-ticketing/components/list/customer-ticketing-create/customer-ticketing-create-dialog/customer-ticketing-create-dialog.component.html b/feature-libs/customer-ticketing/components/list/customer-ticketing-create/customer-ticketing-create-dialog/customer-ticketing-create-dialog.component.html
index 74ca82ac1c0..6e77cfb06c4 100644
--- a/feature-libs/customer-ticketing/components/list/customer-ticketing-create/customer-ticketing-create-dialog/customer-ticketing-create-dialog.component.html
+++ b/feature-libs/customer-ticketing/components/list/customer-ticketing-create/customer-ticketing-create-dialog/customer-ticketing-create-dialog.component.html
@@ -3,10 +3,11 @@
   (esc)="close('Escape clicked')"
   class="cx-customer-ticket-form-dialog"
   role="dialog"
+  aria-labelledby="dialogTitle"
 >
   <form [formGroup]="form" class="cx-customer-ticket-form-container">
     <div class="modal-header cx-customer-ticket-form-header">
-      <div class="cx-customer-ticket-form-title modal-title">
+      <div id="dialogTitle" class="cx-customer-ticket-form-title modal-title">
         {{ 'createCustomerTicket.addNewRequest' | cxTranslate }}
       </div>
       <button
diff --git a/feature-libs/order/components/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.html b/feature-libs/order/components/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.html
index e547117678d..e4470f45887 100644
--- a/feature-libs/order/components/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.html
+++ b/feature-libs/order/components/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.html
@@ -3,12 +3,13 @@
   (esc)="close('Escape clicked')"
   class="cx-modal-container"
   role="dialog"
+  aria-labelledby="dialogTitle"
   aria-modal="true"
 >
   <div class="cx-modal-content">
     <ng-container>
       <div class="cx-dialog-header modal-header">
-        <div class="cx-dialog-title modal-title">
+        <div id="dialogTitle" class="cx-dialog-title modal-title">
           {{ 'reorder.dialog.reorderProducts' | cxTranslate }}
         </div>
         <button
diff --git a/feature-libs/order/components/replenishment-order-cancellation-dialog/replenishment-order-cancellation-dialog.component.html b/feature-libs/order/components/replenishment-order-cancellation-dialog/replenishment-order-cancellation-dialog.component.html
index ccaed557924..527ba2bdca4 100644
--- a/feature-libs/order/components/replenishment-order-cancellation-dialog/replenishment-order-cancellation-dialog.component.html
+++ b/feature-libs/order/components/replenishment-order-cancellation-dialog/replenishment-order-cancellation-dialog.component.html
@@ -3,10 +3,11 @@
   (esc)="close('Escape clicked')"
   class="cx-cancel-replenishment-dialog-foreground"
   role="dialog"
+  aria-labelledby="dialogTitle"
 >
   <div class="cx-cancel-replenishment-dialog-content">
     <div class="cx-cancel-replenishment-dialog-header">
-      <h3>
+      <h3 id="dialogTitle">
         {{ 'orderDetails.cancelReplenishment.title' | cxTranslate }}
       </h3>
       <button
diff --git a/feature-libs/product-configurator/rulebased/components/conflict-solver-dialog/configurator-conflict-solver-dialog.component.html b/feature-libs/product-configurator/rulebased/components/conflict-solver-dialog/configurator-conflict-solver-dialog.component.html
index f8d6f51393f..c93fcc4ecf8 100644
--- a/feature-libs/product-configurator/rulebased/components/conflict-solver-dialog/configurator-conflict-solver-dialog.component.html
+++ b/feature-libs/product-configurator/rulebased/components/conflict-solver-dialog/configurator-conflict-solver-dialog.component.html
@@ -1,4 +1,9 @@
-<div class="cx-modal-container" role="dialog" aria-modal="true">
+<div
+  class="cx-modal-container"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="dialogTitle"
+>
   <!-- For screen reader purposes (not visual)-->
   <div
     class="cx-visually-hidden"
@@ -12,7 +17,7 @@
   <div class="cx-modal-content" [cxFocus]="focusConfig">
     <!-- Modal Header -->
     <div class="cx-dialog-header modal-header">
-      <div class="cx-dialog-title modal-title" tabindex="0">
+      <div id="dialogTitle" class="cx-dialog-title modal-title" tabindex="0">
         {{ 'configurator.header.resolveIssue' | cxTranslate }}
       </div>
       <button
diff --git a/feature-libs/product-configurator/rulebased/components/overview-filter-dialog/configurator-overview-filter-dialog.component.html b/feature-libs/product-configurator/rulebased/components/overview-filter-dialog/configurator-overview-filter-dialog.component.html
index 1b7043f9cba..5f7e426fb90 100644
--- a/feature-libs/product-configurator/rulebased/components/overview-filter-dialog/configurator-overview-filter-dialog.component.html
+++ b/feature-libs/product-configurator/rulebased/components/overview-filter-dialog/configurator-overview-filter-dialog.component.html
@@ -2,6 +2,7 @@
   class="cx-configurator-overview-filter-dialog cx-modal-container"
   role="dialog"
   (click)="closeFilterModal()"
+  aria-labelledby="dialogTitle"
 >
   <div
     class="cx-modal-content"
@@ -10,7 +11,7 @@
     (esc)="closeFilterModal()"
   >
     <div class="cx-dialog-header modal-header">
-      <div class="cx-dialog-title modal-title">
+      <div id="dialogTitle" class="cx-dialog-title modal-title">
         {{ 'configurator.overviewFilter.title' | cxTranslate }}
       </div>
       <button
diff --git a/feature-libs/product-configurator/rulebased/components/restart-dialog/configurator-restart-dialog.component.html b/feature-libs/product-configurator/rulebased/components/restart-dialog/configurator-restart-dialog.component.html
index 01298bdf38f..580c6b32d80 100644
--- a/feature-libs/product-configurator/rulebased/components/restart-dialog/configurator-restart-dialog.component.html
+++ b/feature-libs/product-configurator/rulebased/components/restart-dialog/configurator-restart-dialog.component.html
@@ -1,4 +1,9 @@
-<div class="cx-modal-container" role="dialog" aria-modal="true">
+<div
+  class="cx-modal-container"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="dialogTitle"
+>
   <ng-container *ngIf="dialogData$ | async as dialogData">
     <ng-container *ngIf="product$ | async as product">
       <div
@@ -7,7 +12,7 @@
         (esc)="backToPDP(product)"
       >
         <div class="cx-dialog-header modal-header">
-          <div class="cx-dialog-title modal-title">
+          <div id="dialogTitle" class="cx-dialog-title modal-title">
             {{ 'configurator.restartDialog.title' | cxTranslate }}
           </div>
           <button
diff --git a/feature-libs/product/image-zoom/assets/translations/en/productImageZoom.json b/feature-libs/product/image-zoom/assets/translations/en/productImageZoom.json
index 404142a9dd8..cdd608c97af 100644
--- a/feature-libs/product/image-zoom/assets/translations/en/productImageZoom.json
+++ b/feature-libs/product/image-zoom/assets/translations/en/productImageZoom.json
@@ -3,6 +3,7 @@
     "expand": "Expand image"
   },
   "productImageZoomDialog": {
+    "zoomedInImage": "Zoomed in image",
     "close": "Close"
   }
 }
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 1fb1261e942..7ce53251df3 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,9 @@
-<div class="cx-image-zoom-dialog" role="dialog" [cxFocus]="focusConfig">
+<div
+  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
diff --git a/feature-libs/quote/components/confirm-dialog/quote-confirm-dialog.component.html b/feature-libs/quote/components/confirm-dialog/quote-confirm-dialog.component.html
index 9be4d584b79..473c6df9f31 100644
--- a/feature-libs/quote/components/confirm-dialog/quote-confirm-dialog.component.html
+++ b/feature-libs/quote/components/confirm-dialog/quote-confirm-dialog.component.html
@@ -5,6 +5,7 @@
   (esc)="dismissModal('Escape clicked')"
   role="dialog"
   aria-modal="true"
+  aria-labelledby="dialogTitle"
 >
   <div
     class="cx-modal-content"
@@ -12,7 +13,7 @@
   >
     <!-- Modal Header -->
     <div class="cx-dialog-header modal-header">
-      <div class="cx-dialog-title modal-title">
+      <div id="dialogTitle" class="cx-dialog-title modal-title">
         {{
           confirmationContext.title
             | cxTranslate: { code: confirmationContext.quote.code }
diff --git a/feature-libs/user/account/components/verification-token-form/verification-token-dialog.component.html b/feature-libs/user/account/components/verification-token-form/verification-token-dialog.component.html
index b6e3643d55d..46cff816940 100644
--- a/feature-libs/user/account/components/verification-token-form/verification-token-dialog.component.html
+++ b/feature-libs/user/account/components/verification-token-form/verification-token-dialog.component.html
@@ -3,6 +3,7 @@
   role="dialog"
   [cxFocus]="focusConfig"
   (esc)="closeModal(VERIFICATION_TOKEN_DIALOG_ACTION.OK)"
+  aria-labelledby="verification-token-dialog-title"
 >
   <div class="cx-modal-content">
     <!-- Modal Header -->
diff --git a/feature-libs/user/profile/components/address-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.html b/feature-libs/user/profile/components/address-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.html
index cbb5649e199..03705268019 100644
--- a/feature-libs/user/profile/components/address-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.html
+++ b/feature-libs/user/profile/components/address-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.html
@@ -3,10 +3,11 @@
   role="dialog"
   [cxFocus]="focusConfig"
   (esc)="closeModal('Escape clicked')"
+  aria-labelledby="dialogTitle"
 >
   <div *ngIf="data$ | async as data" class="cx-suggested-addresses-container">
     <div class="cx-suggested-addresses-header cx-modal-header">
-      <div class="cx-suggested-addresses-title">
+      <div id="dialogTitle" class="cx-suggested-addresses-title">
         {{ 'addressSuggestion.verifyYourAddress' | cxTranslate }}
       </div>
       <button
diff --git a/integration-libs/digital-payments/src/checkout/cms-components/dp-payment-method/dp-confirmation-dialog/dp-confirmation-dialog.component.html b/integration-libs/digital-payments/src/checkout/cms-components/dp-payment-method/dp-confirmation-dialog/dp-confirmation-dialog.component.html
index 550fd5b0a09..e29eb5fd048 100644
--- a/integration-libs/digital-payments/src/checkout/cms-components/dp-payment-method/dp-confirmation-dialog/dp-confirmation-dialog.component.html
+++ b/integration-libs/digital-payments/src/checkout/cms-components/dp-payment-method/dp-confirmation-dialog/dp-confirmation-dialog.component.html
@@ -4,11 +4,12 @@
   (esc)="dismissDialog('Escape clicked')"
   role="dialog"
   aria-modal="true"
+  aria-labelledby="dialogTitle"
 >
   <div class="cx-modal-content">
     <!-- Modal Header -->
     <div class="cx-dialog-header modal-header">
-      <div class="cx-dialog-title modal-title">
+      <div id="dialogTitle" class="cx-dialog-title modal-title">
         {{ 'dpPaymentForm.confirmation.heading' | cxTranslate }}
       </div>
       <button
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 ef8d93788cc..384a0c3ec98 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
@@ -418,6 +418,12 @@ export interface FeatureTogglesInterface {
    */
   a11yLinkBtnsToTertiaryBtns?: boolean;
 
+  /**
+   * Mofifies the template of 'AddedToCartDialogComponent' to retain the focus after the cart is updated.
+   * Improves its screen reader readout.
+   */
+  a11yAddedToCartActiveDialog?: boolean;
+
   /**
    * Modifies the 'NgSelectA11yDirective' to improve the sorting dropdown screen reader experience on mobile devices.
    */
@@ -503,6 +509,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yCxMessageFocus: false,
   a11yLinkBtnsToTertiaryBtns: false,
   a11yDeliveryModeRadiogroup: false,
+  a11yAddedToCartActiveDialog: false,
   a11yNgSelectMobileReadout: 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 b57fee03ce9..8ece4d2d476 100644
--- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
+++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -343,6 +343,7 @@ if (environment.cpq) {
         occCartNameAndDescriptionInHttpRequestBody: true,
         a11yLinkBtnsToTertiaryBtns: true,
         a11yDeliveryModeRadiogroup: true,
+        a11yAddedToCartActiveDialog: true,
         a11yNgSelectMobileReadout: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,
       };
diff --git a/projects/storefrontlib/cms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.html b/projects/storefrontlib/cms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.html
index 75f27eb5116..1b0b2dc446b 100644
--- a/projects/storefrontlib/cms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.html
+++ b/projects/storefrontlib/cms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.html
@@ -3,12 +3,13 @@
   role="dialog"
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
+  aria-labelledby="dialogTitle"
 >
   <div class="cx-coupon-container">
     <!-- Modal Header -->
 
     <div class="cx-dialog-header modal-header">
-      <div class="cx-dialog-title modal-title">
+      <div id="dialogTitle" class="cx-dialog-title modal-title">
         {{ 'myCoupons.dialogTitle' | cxTranslate }}
       </div>
       <button
diff --git a/projects/storefrontlib/cms-components/product/stock-notification/stock-notification-dialog/stock-notification-dialog.component.html b/projects/storefrontlib/cms-components/product/stock-notification/stock-notification-dialog/stock-notification-dialog.component.html
index 85d0d16a581..94048872470 100644
--- a/projects/storefrontlib/cms-components/product/stock-notification/stock-notification-dialog/stock-notification-dialog.component.html
+++ b/projects/storefrontlib/cms-components/product/stock-notification/stock-notification-dialog/stock-notification-dialog.component.html
@@ -3,10 +3,11 @@
   role="dialog"
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
+  aria-labelledby="dialogTitle"
 >
   <div class="cx-stock-notification-container">
     <div class="cx-dialog-header cx-modal-header">
-      <div class="cx-dialog-title modal-title">
+      <div id="dialogTitle" class="cx-dialog-title modal-title">
         {{ 'stockNotification.subscriptionDialog.header' | cxTranslate }}
       </div>
       <button
diff --git a/projects/storefrontlib/shared/components/anonymous-consents-dialog/anonymous-consent-dialog.component.html b/projects/storefrontlib/shared/components/anonymous-consents-dialog/anonymous-consent-dialog.component.html
index c4a14a5d0a0..3ecbf67d8ea 100644
--- a/projects/storefrontlib/shared/components/anonymous-consents-dialog/anonymous-consent-dialog.component.html
+++ b/projects/storefrontlib/shared/components/anonymous-consents-dialog/anonymous-consent-dialog.component.html
@@ -3,6 +3,7 @@
   role="dialog"
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
+  aria-labelledby="dialogTitle"
 >
   <div class="cx-dialog-content">
     <div *ngIf="loading$ | async; else dialogBody">
@@ -14,7 +15,7 @@
         [attr.aria-label]="'common.loaded' | cxTranslate"
       ></div>
       <div class="cx-dialog-header">
-        <h3>
+        <h3 id="dialogTitle">
           {{ 'anonymousConsents.dialog.title' | cxTranslate }}
         </h3>
         <button