fix: (CXSPA-979) - Dialogs announcement JAWS fix (#19071)

SAP · Aug 9, 2024 · f7d37b7 · f7d37b7
1 parent 35d5d5d
commit f7d37b7
Show file tree

Hide file tree

Showing 26 changed files with 205 additions and 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
@@ -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
@@ -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/...-libs/asm/components/asm-switch-customer-dialog/asm-switch-customer-dialog.component.html b/...-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
@@ -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/...e-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.html b/...e-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/...port/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.html b/...port/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/...s/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html b/...s/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/...ting-close/customer-ticketing-close-dialog/customer-ticketing-close-dialog.component.html b/...ting-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/...g-reopen/customer-ticketing-reopen-dialog/customer-ticketing-reopen-dialog.component.html b/...g-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/...g-create/customer-ticketing-create-dialog/customer-ticketing-create-dialog.component.html b/...g-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/...omponents/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.html b/...omponents/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/...nishment-order-cancellation-dialog/replenishment-order-cancellation-dialog.component.html b/...nishment-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/...ased/components/conflict-solver-dialog/configurator-conflict-solver-dialog.component.html b/...ased/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/...ased/components/overview-filter-dialog/configurator-overview-filter-dialog.component.html b/...ased/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/...nfigurator/rulebased/components/restart-dialog/configurator-restart-dialog.component.html b/...nfigurator/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
@@ -3,6 +3,7 @@
     "expand": "Expand image"
   },
   "productImageZoomDialog": {
+    "zoomedInImage": "Zoomed in image",
     "close": "Close"
   }
 }
diff --git a/...nts/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.html b/...nts/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
@@ -5,14 +5,15 @@
   (esc)="dismissModal('Escape clicked')"
   role="dialog"
   aria-modal="true"
+  aria-labelledby="dialogTitle"
 >
   <div
     class="cx-modal-content"
     *ngIf="confirmationContext$ | async as confirmationContext"
   >
     <!-- 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/.../user/account/components/verification-token-form/verification-token-dialog.component.html b/.../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 -->