diff --git a/feature-libs/asm/customer-360/components/asm-customer-360/asm-customer-360.component.spec.ts b/feature-libs/asm/customer-360/components/asm-customer-360/asm-customer-360.component.spec.ts index 4a3462e1a19..6984dc64fe1 100644 --- a/feature-libs/asm/customer-360/components/asm-customer-360/asm-customer-360.component.spec.ts +++ b/feature-libs/asm/customer-360/components/asm-customer-360/asm-customer-360.component.spec.ts @@ -19,6 +19,7 @@ import { import { DirectionMode, DirectionService, + FocusDirective, LaunchDialogService, } from '@spartacus/storefront'; import { BehaviorSubject, Observable, of, throwError } from 'rxjs'; @@ -177,6 +178,7 @@ describe('AsmCustomer360Component', () => { AsmCustomer360Component, MockAsmCustomer360SectionComponent, ArgsPipe, + FocusDirective, ], providers: [ CxDatePipe, @@ -327,15 +329,16 @@ describe('AsmCustomer360Component', () => { mockAsmConfig.asmCustomer360?.tabs?.length ); }); - it('should activate the first tab when dialog opens', () => { - expect(document.activeElement).toBe( - component.tabHeaderItems.toArray()[0].nativeElement - ); + it('should activate the close button', () => { + expect(document.activeElement?.className).toBe('close'); }); it('should switch tab selection', () => { const firstTab = component.tabHeaderItems.toArray()[0].nativeElement; const secondTab = component.tabHeaderItems.toArray()[1].nativeElement; + + component.selectTab(0); + let event = { code: 'ArrowRight', stopPropagation: () => {}, diff --git a/feature-libs/asm/customer-360/components/asm-customer-360/asm-customer-360.component.ts b/feature-libs/asm/customer-360/components/asm-customer-360/asm-customer-360.component.ts index 3a8c657bd3f..3f9342d2847 100644 --- a/feature-libs/asm/customer-360/components/asm-customer-360/asm-customer-360.component.ts +++ b/feature-libs/asm/customer-360/components/asm-customer-360/asm-customer-360.component.ts @@ -5,7 +5,6 @@ */ import { - AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, @@ -51,9 +50,7 @@ import { AsmCustomer360Config } from '../config/asm-customer-360-config'; selector: 'cx-asm-customer-360', templateUrl: './asm-customer-360.component.html', }) -export class AsmCustomer360Component - implements OnDestroy, OnInit, AfterViewInit -{ +export class AsmCustomer360Component implements OnDestroy, OnInit { @HostBinding('attr.role') role = 'dialog'; @HostBinding('attr.aria-modal') modal = true; @HostBinding('attr.aria-labelledby') labelledby = 'asm-customer-360-title'; @@ -71,7 +68,7 @@ export class AsmCustomer360Component focusConfig: FocusConfig = { trap: true, block: true, - autofocus: '.cx-tab-header.active', + autofocus: '.close', focusOnEscape: true, }; @@ -143,10 +140,6 @@ export class AsmCustomer360Component this.setTabData(); } - ngAfterViewInit(): void { - this.updateTabIndex(this.activeTab); - } - ngOnDestroy(): void { this.subscription.unsubscribe(); }