fix: Make missing actions column header visible in saved cart list (#…

…18426) Co-authored-by: Paweł Kwit <[email protected]> Co-authored-by: Piotr Bartkowiak <[email protected]> Co-authored-by: PioBar <[email protected]>
SAP · Mar 27, 2024 · db40fa9 · db40fa9
1 parent bc7f0ce
commit db40fa9
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/feature-libs/cart/saved-cart/components/list/saved-cart-list.component.html b/feature-libs/cart/saved-cart/components/list/saved-cart-list.component.html
@@ -111,7 +111,9 @@ <h2>
               >
             </td>
             <td class="cx-saved-cart-list-make-cart-active">
-              <div class="cx-table-label-mobile cx-saved-cart-list-label"></div>
+              <div class="cx-table-label-mobile cx-saved-cart-list-label">
+                {{ 'savedCartList.actions' | cxTranslate }}
+              </div>
               <button
                 #element
                 class="btn btn-tertiary cx-saved-cart-make-active"

diff --git a/feature-libs/cart/saved-cart/components/list/saved-cart-list.component.ts b/feature-libs/cart/saved-cart/components/list/saved-cart-list.component.ts
@@ -18,8 +18,8 @@ import {
   SavedCartFacade,
   SavedCartFormType,
 } from '@spartacus/cart/saved-cart/root';
-import { RoutingService } from '@spartacus/core';
-import { LaunchDialogService, LAUNCH_CALLER } from '@spartacus/storefront';
+import { RoutingService, useFeatureStyles } from '@spartacus/core';
+import { LAUNCH_CALLER, LaunchDialogService } from '@spartacus/storefront';
 import { Observable, Subscription } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 
@@ -52,7 +52,9 @@ export class SavedCartListComponent implements OnInit, OnDestroy {
     protected savedCartService: SavedCartFacade,
     protected vcr: ViewContainerRef,
     protected launchDialogService: LaunchDialogService
-  ) {}
+  ) {
+    useFeatureStyles('a11ySavedCartsZoom');
+  }
 
   ngOnInit(): void {
     this.isLoading$ = this.savedCartService.getSavedCartListProcessLoading();

diff --git a/feature-libs/cart/saved-cart/styles/_saved-cart-list.scss b/feature-libs/cart/saved-cart/styles/_saved-cart-list.scss
@@ -129,6 +129,11 @@ cx-saved-cart-list {
     .cx-saved-cart-list-label {
       color: var(--cx-color-secondary);
 
+      // TODO: (CXSPA-5955) Remove feature flag next major
+      @include forFeature('a11ySavedCartsZoom') {
+        text-align: start;
+      }
+
       @include media-breakpoint-down(md) {
         font-size: var(--cx-font-size, 0.875rem);
         font-weight: var(--cx-font-weight-bold);
@@ -157,4 +162,14 @@ cx-saved-cart-list {
       min-height: auto;
     }
   }
+
+  // TODO: (CXSPA-5955) Remove feature flag next major
+  @include forFeature('a11ySavedCartsZoom') {
+    @include media-breakpoint-down(md) {
+      .cx-saved-cart-make-active {
+        min-height: unset;
+        padding: 0;
+      }
+    }
+  }
 }
diff --git a/projects/storefrontapp/src/app/app.module.ts b/projects/storefrontapp/src/app/app.module.ts
@@ -97,6 +97,7 @@ if (!environment.production) {
         a11yNavigationUiKeyboardControls: true,
         a11yOrderConfirmationHeadingOrder: true,
         a11yStarRating: true,
+        a11ySavedCartsZoom: true,
         a11ySortingOptionsTruncation: true,
         a11yExpandedFocusIndicator: true,
         a11yCheckoutDeliveryFocus: true,