fix: (CXSPA-8813) B2C button My Store not properly styled

feature-libs/pickup-in-store/components/container/my-preferred-store/my-preferred-store.component.spec.ts

@@ -5,6 +5,7 @@ import {
   CmsConfig,
   CmsService,
   ConfigModule,
+  FeaturesConfigModule,
   I18nTestingModule,
   Page,
   RoutingService,
@@ -21,6 +22,7 @@ import { EMPTY, Observable } from 'rxjs';
 import { MockPickupLocationsSearchService } from '../../../core/facade/pickup-locations-search.service.spec';
 import { MockPreferredStoreService } from '../../../core/services/preferred-store.service.spec';
 import { MyPreferredStoreComponent } from './my-preferred-store.component';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 
 class MockRoutingService implements Partial<RoutingService> {
   go = () => Promise.resolve(true);
@@ -83,7 +85,14 @@ describe('MyPreferredStoreComponent', () => {
         { provide: StoreFinderFacade, useClass: MockStoreFinderService },
         { provide: CmsService, useClass: MockCmsService },
       ],
-    }).compileComponents();
+    })
+      .overrideModule(FeaturesConfigModule, {
+        set: {
+          declarations: [MockFeatureDirective],
+          exports: [MockFeatureDirective],
+        },
+      })
+      .compileComponents();
     routingService = TestBed.inject(RoutingService);
   });
 

feature-libs/pickup-in-store/components/container/my-preferred-store/my-preferred-store.component.ts

@@ -69,6 +69,7 @@ export class MyPreferredStoreComponent implements OnInit {
     );
 
     useFeatureStyles('a11yViewHoursButtonIconContrast');
+    useFeatureStyles('a11yReplaceCartActionButtonsWithLinks');
   }
 
   ngOnInit(): void {

feature-libs/pickup-in-store/styles/_my-preferred-store.scss

@@ -76,6 +76,16 @@
           width: 100%;
         }
       }
+      @include forFeature('a11yReplaceCartActionButtonsWithLinks') {
+        .cx-card-actions {
+          all: unset;
+          .link.cx-action-link {
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
+      }
     }
   }
   @include cx-highContrastTheme {

projects/core/src/features-config/feature-toggles/config/feature-toggles.ts

@@ -642,6 +642,11 @@ export interface FeatureTogglesInterface {
    */
   a11yViewHoursButtonIconContrast?: boolean;
 
+  /**
+   * `Cart component` replace action buttons with links
+   */
+  a11yReplaceCartActionButtonsWithLinks?: boolean;
+
   /**
    * `Checkout` add a landmarks to content representing steps
    */
@@ -833,6 +838,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yCloseProductImageBtnFocus: true,
   a11yNotificationPreferenceFieldset: false,
   a11yImproveContrast: false,
+  a11yReplaceCartActionButtonsWithLinks: false,
   a11yEmptyWishlistHeading: true,
   a11yScreenReaderBloatFix: false,
   a11yUseButtonsForBtnLinks: true,

projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts

@@ -350,6 +350,7 @@ if (environment.cpq) {
         a11yCloseProductImageBtnFocus: true,
         a11yNotificationPreferenceFieldset: true,
         a11yImproveContrast: true,
+        a11yReplaceCartActionButtonsWithLinks: true,
         a11yEmptyWishlistHeading: true,
         a11yScreenReaderBloatFix: true,
         a11yUseButtonsForBtnLinks: true,

projects/storefrontlib/shared/components/card/card.component.html

@@ -134,43 +134,80 @@
       <div *ngFor="let action of content.actions">
         <div>
           <ng-container *ngIf="isCardAction(action)" [ngSwitch]="action.event">
-            <button
-              type="button"
-              *ngSwitchCase="'delete'"
-              class="link cx-action-link"
-              (click)="delete()"
-            >
-              {{ action.name }}
-            </button>
-            <button
-              type="button"
-              *ngSwitchCase="'default'"
-              class="link cx-action-link"
-              (click)="setDefault()"
-            >
-              {{ action.name }}
-            </button>
-            <button
-              type="button"
-              *ngSwitchCase="'send'"
-              class="link cx-action-link"
-              (click)="send()"
-              [attr.aria-describedby]="
-                index >= 0 && content.header && !editMode
-                  ? 'content-header-' + index
-                  : null
-              "
-            >
-              {{ action.name }}
-            </button>
-            <button
-              type="button"
-              *ngSwitchCase="'edit'"
-              class="link cx-action-link"
-              (click)="edit()"
-            >
-              {{ action.name }}
-            </button>
+            <ng-container *cxFeature="'a11yReplaceCartActionButtonsWithLinks'">
+              <a
+                *ngSwitchCase="'delete'"
+                class="link cx-action-link"
+                (click)="delete()"
+              >
+                {{ action.name }}
+              </a>
+              <a
+                *ngSwitchCase="'default'"
+                class="link cx-action-link"
+                (click)="setDefault()"
+              >
+                {{ action.name }}
+              </a>
+              <a
+                *ngSwitchCase="'send'"
+                class="link cx-action-link"
+                (click)="send()"
+                [attr.aria-describedby]="
+                  index >= 0 && content.header && !editMode
+                    ? 'content-header-' + index
+                    : null
+                "
+              >
+                {{ action.name }}
+              </a>
+              <a
+                *ngSwitchCase="'edit'"
+                class="link cx-action-link"
+                (click)="edit()"
+              >
+                {{ action.name }}
+              </a>
+            </ng-container>
+            <ng-container *cxFeature="'!a11yReplaceCartActionButtonsWithLinks'">
+              <button
+                type="button"
+                *ngSwitchCase="'delete'"
+                class="link cx-action-link"
+                (click)="delete()"
+              >
+                {{ action.name }}
+              </button>
+              <button
+                type="button"
+                *ngSwitchCase="'default'"
+                class="link cx-action-link"
+                (click)="setDefault()"
+              >
+                {{ action.name }}
+              </button>
+              <button
+                type="button"
+                *ngSwitchCase="'send'"
+                class="link cx-action-link"
+                (click)="send()"
+                [attr.aria-describedby]="
+                  index >= 0 && content.header && !editMode
+                    ? 'content-header-' + index
+                    : null
+                "
+              >
+                {{ action.name }}
+              </button>
+              <button
+                type="button"
+                *ngSwitchCase="'edit'"
+                class="link cx-action-link"
+                (click)="edit()"
+              >
+                {{ action.name }}
+              </button>
+            </ng-container>
           </ng-container>
           <a
             *ngIf="isCardLinkAction(action)"

projects/storefrontstyles/scss/components/misc/card/_card.scss

@@ -72,6 +72,11 @@
     justify-content: flex-end;
     padding: 1.25rem 0 0 0;
   }
+  @include forFeature('a11yReplaceCartActionButtonsWithLinks') {
+    .cx-card-actions {
+      gap: 16px;
+    }
+  }
 
   .cx-card-link {
     margin-inline-start: 1rem;