fix: (CXSPA-9038) add label to store finder search input (#19692)

Closes: https://jira.tools.sap/browse/CXSPA-9038
SAP · Dec 5, 2024 · eeb6c7f · eeb6c7f
1 parent ce1a0f6
commit eeb6c7f
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 18 deletions.
diff --git a/feature-libs/storefinder/assets/translations/en/storeFinder.json b/feature-libs/storefinder/assets/translations/en/storeFinder.json
@@ -19,6 +19,7 @@
     "fromStoresFound": "from {{ count }} store found",
     "fromStoresFound_other": "from {{ count }} stores found",
     "findStore": "Find store",
+    "findStoreBy": "Find store by",
     "useMyLocation": "Use my location",
     "viewAllStores": "View all stores",
     "contactUs": "Contact us",

diff --git a/feature-libs/storefinder/components/store-finder-search/store-finder-search.component.html b/feature-libs/storefinder/components/store-finder-search/store-finder-search.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="row">
+  <div class="row" *cxFeature="'!a11yStoreFinderLabel'">
     <div class="col-md-12 col-lg-6">
       <div class="form-group search-wrapper">
         <input
@@ -27,25 +27,71 @@
         ></cx-icon>
       </div>
     </div>
+    <ng-template [ngTemplateOutlet]="searchActionButtons"></ng-template>
+  </div>
+
+  <div class="row align-items-end" *cxFeature="'a11yStoreFinderLabel'">
     <div class="col-md-12 col-lg-6">
-      <div class="row cx-search-links mb-3">
-        <div class="col-6">
-          <button
-            (click)="viewStoresWithMyLoc()"
-            class="btn btn-primary btn-block"
-          >
-            {{ 'storeFinder.useMyLocation' | cxTranslate }}
-          </button>
-        </div>
-        <div class="col-6">
-          <button
-            [routerLink]="['/store-finder/view-all']"
-            class="btn btn-primary btn-block"
-          >
-            {{ 'storeFinder.viewAllStores' | cxTranslate }}
-          </button>
-        </div>
+      <div class="form-group">
+        <label for="store-finder-search-input">
+          <span class="text-left label-content">
+            {{ 'storeFinder.findStoreBy' | cxTranslate }}
+          </span>
+          <div class="search-wrapper">
+            <input
+              #queryInput
+              id="store-finder-search-input"
+              [formControl]="searchBox"
+              (keyup)="onKey($event)"
+              type="text"
+              class="form-control"
+              placeholder="{{ 'storeFinder.searchBox' | cxTranslate }}"
+            />
+            <cx-icon
+              [attr.tabindex]="queryInput.value?.length ? 0 : -1"
+              [type]="iconTypes.SEARCH"
+              role="button"
+              [attr.aria-label]="
+                'storeFinder.searchNearestStores' | cxTranslate
+              "
+              [attr.title]="'storeFinder.searchNearestStores' | cxTranslate"
+              class="search"
+              (keyup)="onKey($event)"
+              [routerLink]="['/store-finder/find']"
+              [queryParams]="{ query: queryInput.value }"
+              [ngClass]="{
+                'disabled-action': !(
+                  queryInput.value && queryInput.value.length
+                ),
+              }"
+            ></cx-icon>
+          </div>
+        </label>
       </div>
     </div>
+    <ng-template [ngTemplateOutlet]="searchActionButtons"></ng-template>
   </div>
 </div>
+
+<ng-template #searchActionButtons>
+  <div class="col-md-12 col-lg-6">
+    <div class="row cx-search-links mb-3">
+      <div class="col-6">
+        <button
+          (click)="viewStoresWithMyLoc()"
+          class="btn btn-primary btn-block"
+        >
+          {{ 'storeFinder.useMyLocation' | cxTranslate }}
+        </button>
+      </div>
+      <div class="col-6">
+        <button
+          [routerLink]="['/store-finder/view-all']"
+          class="btn btn-primary btn-block"
+        >
+          {{ 'storeFinder.viewAllStores' | cxTranslate }}
+        </button>
+      </div>
+    </div>
+  </div>
+</ng-template>
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
@@ -537,6 +537,11 @@ export interface FeatureTogglesInterface {
    */
   a11yStoreFinderAlerts?: boolean;
 
+  /**
+   * Adds label to 'StoreFinderSearchComponent' store search input field.
+   */
+  a11yStoreFinderLabel?: boolean;
+
   /**
    * Stops the icon inside 'FormErrorsComponent' from being read out by screen readers.
    */
@@ -924,6 +929,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yFacetsDialogFocusHandling: true,
   headerLayoutForSmallerViewports: false,
   a11yStoreFinderAlerts: false,
+  a11yStoreFinderLabel: false,
   a11yFormErrorMuteIcon: false,
   a11yCxMessageFocus: false,
   a11yLinkBtnsToTertiaryBtns: false,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -368,6 +368,7 @@ if (environment.cpq) {
         a11yFacetsDialogFocusHandling: true,
         headerLayoutForSmallerViewports: true,
         a11yStoreFinderAlerts: true,
+        a11yStoreFinderLabel: true,
         a11yFormErrorMuteIcon: true,
         a11yCxMessageFocus: true,
         occCartNameAndDescriptionInHttpRequestBody: true,