fix: (CXSPA-939) - Buttons should be triggered by space and enter (#1…

…8740)

feature-libs/storefinder/components/store-finder-stores-count/store-finder-stores-count.component.html

@@ -22,6 +22,7 @@
           class="btn-link"
           role="button"
           [attr.aria-label]="country.name + '(' + country.count + ')'"
+          (keydown.space)="navigateToLocation(country.isoCode, $event)"
         >
           <h2 class="cx-title" aria-hidden="true">
             <span

feature-libs/storefinder/components/store-finder-stores-count/store-finder-stores-count.component.spec.ts

@@ -1,34 +1,51 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { I18nTestingModule } from '@spartacus/core';
+import { I18nTestingModule, RoutingService } from '@spartacus/core';
 import { StoreFinderService } from '@spartacus/storefinder/core';
 import { SpinnerModule } from '@spartacus/storefront';
-import { EMPTY } from 'rxjs';
+import { of } from 'rxjs';
 import { StoreFinderStoresCountComponent } from './store-finder-stores-count.component';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
 import createSpy = jasmine.createSpy;
 
+const mockLocation = {
+  isoCode: 'US',
+  name: 'United States',
+  count: 50,
+};
 class MockStoreFinderService implements Partial<StoreFinderService> {
   viewAllStores = createSpy('viewAllStores');
   getViewAllStoresEntities = createSpy(
     'getViewAllStoresEntities'
-  ).and.returnValue(EMPTY);
+  ).and.returnValue(of([mockLocation]));
   getViewAllStoresLoading = createSpy('getViewAllStoresLoading');
 }
 
+class MockRoutingService implements Partial<RoutingService> {
+  go = () => Promise.resolve(true);
+}
+
 describe('StoreFinderStoresCountComponent', () => {
   let component: StoreFinderStoresCountComponent;
   let fixture: ComponentFixture<StoreFinderStoresCountComponent>;
+  let el: DebugElement;
+  let routingService: RoutingService;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        imports: [SpinnerModule, RouterTestingModule, I18nTestingModule],
+        imports: [SpinnerModule, I18nTestingModule, RouterTestingModule],
         declarations: [StoreFinderStoresCountComponent],
         providers: [
           {
             provide: StoreFinderService,
             useClass: MockStoreFinderService,
           },
+          {
+            provide: RoutingService,
+            useClass: MockRoutingService,
+          },
         ],
       }).compileComponents();
     })
@@ -37,10 +54,41 @@ describe('StoreFinderStoresCountComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(StoreFinderStoresCountComponent);
     component = fixture.componentInstance;
+    el = fixture.debugElement;
+    routingService = TestBed.inject(RoutingService);
     fixture.detectChanges();
+
+    spyOn(routingService, 'go').and.callThrough();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should navigate to country when navigateToLocation is called', () => {
+    component.navigateToLocation('US');
+    expect(routingService.go).toHaveBeenCalledWith([
+      '/store-finder/country',
+      'US',
+    ]);
+  });
+
+  it('should handle space key to navigate to country from keyboard', () => {
+    spyOn(component, 'navigateToLocation').and.callThrough();
+    const countryBtn = el.query(
+      By.css('.btn-link[aria-label="United States(50)"]')
+    );
+    expect(countryBtn).toBeTruthy();
+    const event = new KeyboardEvent('keydown', {
+      key: ' ',
+    });
+    spyOn(event, 'preventDefault');
+    countryBtn.nativeElement.dispatchEvent(event);
+    expect(component.navigateToLocation).toHaveBeenCalledWith('US', event);
+    expect(routingService.go).toHaveBeenCalledWith([
+      '/store-finder/country',
+      'US',
+    ]);
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
 });

feature-libs/storefinder/components/store-finder-stores-count/store-finder-stores-count.component.ts

@@ -4,15 +4,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Optional, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { StoreFinderService } from '@spartacus/storefinder/core';
+import { RoutingService } from '@spartacus/core';
 
 @Component({
   selector: 'cx-store-finder-stores-count',
   templateUrl: './store-finder-stores-count.component.html',
 })
 export class StoreFinderStoresCountComponent implements OnInit {
+  // TODO: CXSPA-6884 Make service required in next major.
+  @Optional() protected routingService? = inject(RoutingService, {
+    optional: true,
+  });
   locations$: Observable<any>;
   isLoading$: Observable<boolean>;
 
@@ -23,4 +28,11 @@ export class StoreFinderStoresCountComponent implements OnInit {
     this.locations$ = this.storeFinderService.getViewAllStoresEntities();
     this.isLoading$ = this.storeFinderService.getViewAllStoresLoading();
   }
+
+  navigateToLocation(isoCode: string, event?: Event): void {
+    if (this.routingService) {
+      event?.preventDefault();
+      this.routingService.go(['/store-finder/country', isoCode]);
+    }
+  }
 }

projects/storefrontlib/cms-components/navigation/search-box/search-box.component.html

@@ -25,8 +25,7 @@
     <button
       [attr.aria-label]="'common.reset' | cxTranslate"
       [title]="'common.reset' | cxTranslate"
-      (mousedown)="clear(searchInput)"
-      (keydown.enter)="clear(searchInput)"
+      (click)="clear(searchInput)"
       class="reset"
     >
       <cx-icon [type]="iconTypes.RESET"></cx-icon>