deprecate left/right arrow key usage

SAP · Oct 16, 2024 · bd2552f · bd2552f
1 parent 4318ab5
commit bd2552f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 31 deletions.
diff --git a/projects/storefrontlib/cms-components/content/tab/panel/tab-panel.component.html b/projects/storefrontlib/cms-components/content/tab/panel/tab-panel.component.html
@@ -4,7 +4,7 @@
   [attr.aria-labelledby]="tab.id ?? null"
   [attr.id]="tab.id ? 'section-' + tab.id : null"
   class="active"
-  [cxFocus]="{ focusOnEscape: true }"
+  [cxFocus]="{ focusOnEscape: !tab.disableBorderFocus }"
 >
   <ng-container [ngTemplateOutlet]="tab.content"></ng-container>
 </div>
diff --git a/...ms-components/product/product-list/product-facet-navigation/facet/facet.component.spec.ts b/...ms-components/product/product-list/product-facet-navigation/facet/facet.component.spec.ts
@@ -237,32 +237,8 @@ describe('FacetComponent', () => {
       );
     });
 
-    it('should open facet on ArrowRight', () => {
-      Object.defineProperty(component, 'isExpanded', {
-        writable: true,
-        value: false,
-      });
-
-      component.onArrowRight(mockArrowRightEvent);
-
-      expect(component.toggleGroup).toHaveBeenCalled();
-    });
-
-    it('should close facet on ArrowLeft and facetHeader regains focus', () => {
-      spyOn(component.facetHeader.nativeElement, 'focus');
-
-      component.onArrowLeft(mockArrowLeftEvent);
-
-      expect(component.toggleGroup).toHaveBeenCalled();
-      expect(component.facetHeader.nativeElement.focus).toHaveBeenCalled();
-    });
-
-    it('should focus the first option on ArrowDown if triggered on facetHeader, else focus on next option', () => {
+    it('should focus the next option', () => {
       const currentIndex = 0;
-
-      component.onArrowDown(mockArrowDownOnHeaderEvent, currentIndex);
-      expect(component.values.first.nativeElement.focus).toHaveBeenCalled();
-
       component.onArrowDown(mockArrowDownOnOptionEvent, currentIndex);
       expect(
         component.values.get(currentIndex + 1)?.nativeElement.focus

diff --git a/...lib/cms-components/product/product-list/product-facet-navigation/facet/facet.component.ts b/...lib/cms-components/product/product-list/product-facet-navigation/facet/facet.component.ts
@@ -81,6 +81,8 @@ export class FacetComponent implements AfterViewInit {
   }
 
   /**
+   * @deprecated: Header will no longer be used in favour of TabComponent headers.
+   *
    * Handles clicking the heading of the facet group, which means toggling
    * the visibility of the group (collapse / expand) and optionally focusing
    * the group.
@@ -136,6 +138,8 @@ export class FacetComponent implements AfterViewInit {
     const targetIndex = this.values.toArray().findIndex((el) => {
       return el.nativeElement === event.target;
     });
+    // TODO: Left and Right arrow keys are disabled when setting a11yTabComponent.
+    // We can remove these in the future.
     switch (event.key) {
       case 'ArrowLeft':
         this.onArrowLeft(event);
@@ -152,6 +156,9 @@ export class FacetComponent implements AfterViewInit {
     }
   }
 
+  /**
+   * @deprecated: Arrow key functions will be removed in favour of using the TabComponent.
+   */
   onArrowRight(event: Event): void {
     if (this.featureConfigService?.isEnabled('a11yTabComponent')) {
       return;
@@ -162,14 +169,12 @@ export class FacetComponent implements AfterViewInit {
     }
   }
 
+  /**
+   * @deprecated: Arrow key functions will be removed in favour of using the TabComponent.
+   */
   onArrowLeft(event: Event): void {
     // Navigate to tab buttons when tab component enabled
     if (this.featureConfigService?.isEnabled('a11yTabComponent')) {
-      event.preventDefault();
-      const parent: any =
-        this.values.get(0)?.nativeElement.parentElement?.parentElement
-          ?.parentElement?.parentElement?.previousElementSibling;
-      parent?.click();
       return;
     }