fix: disable tabbing for quick order search results list (#19742)

SAP · Dec 16, 2024 · 20bf785 · 20bf785
1 parent db2941f
commit 20bf785
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
diff --git a/feature-libs/cart/quick-order/components/quick-order/form/quick-order-form.component.html b/feature-libs/cart/quick-order/components/quick-order/form/quick-order-form.component.html
@@ -71,6 +71,7 @@
         class="quick-order-results-product-container"
       >
         <button
+          *cxFeature="'!a11yQuickOrderSearchListKeyboardNavigation'"
           (blur)="onBlur($event)"
           (mousedown)="add(product, $event)"
           (keydown.arrowdown)="focusNextChild($event)"
@@ -103,6 +104,42 @@
           </span>
           <span class="price">{{ product.price?.formattedValue }}</span>
         </button>
+        <button
+          *cxFeature="'a11yQuickOrderSearchListKeyboardNavigation'"
+          (blur)="onBlur($event)"
+          (mousedown)="add(product, $event)"
+          (keydown.arrowdown)="focusNextChild($event)"
+          (keydown.arrowup)="focusPreviousChild($event)"
+          (keydown.enter)="add(product, $event)"
+          (keydown.escape)="clear($event)"
+          (keydown.tab)="close()"
+          (keydown.shift.tab)="close()"
+          [class.has-media]="
+            config?.quickOrder?.searchForm?.displayProductImages
+          "
+          class="quick-order-results-product"
+          role="option"
+        >
+          <cx-media
+            *ngIf="config?.quickOrder?.searchForm?.displayProductImages"
+            [alt]="product.name"
+            [container]="product.images?.PRIMARY"
+            class="media"
+            format="thumbnail"
+            role="presentation"
+          ></cx-media>
+          <div class="name" [innerHTML]="product.name"></div>
+          <span class="id">
+            {{
+              'quickOrderForm.id'
+                | cxTranslate
+                  : {
+                      id: product.code,
+                    }
+            }}
+          </span>
+          <span class="price">{{ product.price?.formattedValue }}</span>
+        </button>
       </li>
     </ul>
 

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
@@ -286,6 +286,11 @@ export interface FeatureTogglesInterface {
    */
   a11yMobileFocusOnFirstNavigationItem?: boolean;
 
+  /**
+   * `QuickOrderFormComponent` - disable navigation with Tab/Shift+Tab for search results list
+   */
+  a11yQuickOrderSearchListKeyboardNavigation?: boolean;
+
   /**
    * Corrects heading order inside 'OrderSummaryComponent' template.
    */
@@ -943,6 +948,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yListOversizedFocus: true,
   a11yStoreFinderOverflow: true,
   a11yMobileFocusOnFirstNavigationItem: false,
+  a11yQuickOrderSearchListKeyboardNavigation: false,
   a11yCartSummaryHeadingOrder: true,
   a11ySearchBoxMobileFocus: true,
   a11yFacetKeyboardNavigation: true,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -331,6 +331,7 @@ if (environment.cpq) {
         a11yListOversizedFocus: true,
         a11yStoreFinderOverflow: true,
         a11yMobileFocusOnFirstNavigationItem: true,
+        a11yQuickOrderSearchListKeyboardNavigation: false,
         a11yCartSummaryHeadingOrder: true,
         a11ySearchBoxMobileFocus: true,
         a11yFacetKeyboardNavigation: true,