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 index fa0491d0bbb..1ffe4ef45f6 100644 --- 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 }" > diff --git a/projects/storefrontlib/cms-components/product/product-list/product-facet-navigation/facet/facet.component.spec.ts b/projects/storefrontlib/cms-components/product/product-list/product-facet-navigation/facet/facet.component.spec.ts index 21e00f89878..3303d15470e 100644 --- a/projects/storefrontlib/cms-components/product/product-list/product-facet-navigation/facet/facet.component.spec.ts +++ b/projects/storefrontlib/cms-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/projects/storefrontlib/cms-components/product/product-list/product-facet-navigation/facet/facet.component.ts b/projects/storefrontlib/cms-components/product/product-list/product-facet-navigation/facet/facet.component.ts index a731eabba7f..27c8c75bddf 100644 --- a/projects/storefrontlib/cms-components/product/product-list/product-facet-navigation/facet/facet.component.ts +++ b/projects/storefrontlib/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; }