fix: VO does not read the top section of the asm 360 dialog

SAP · Oct 26, 2023 · 3c5efc0 · 3c5efc0
1 parent 3838d4c
commit 3c5efc0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
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
@@ -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
@@ -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();
   }