396579770: (fix) set focus to correct interactive elements after delete discard profile

modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts

@@ -297,7 +297,7 @@ export class ProfileFormComponent implements OnInit, AfterViewInit {
   }
 
   onDiscardClick() {
-    this.discard.emit(this.selectedProfile!);
+    this.discard.emit();
   }
 
   onDeleteClick(): void {

modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html

@@ -47,7 +47,7 @@
       (deleteCopy)="deleteCopy($event, vm.profiles)"
       (delete)="deleteProfile($event)"
       (copyProfile)="copyProfile($event, vm.profiles)"
-      (discard)="discard($event)"></app-profile-form>
+      (discard)="discard()"></app-profile-form>
   </ng-template>
 
   <ng-template #empty>

modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts

@@ -407,55 +407,32 @@ describe('RiskAssessmentComponent', () => {
           'openCloseDialog'
         ).and.returnValue(of(true));
 
-        component.discard(null);
+        component.discard();
 
         expect(openCloseDialogSpy).toHaveBeenCalled();
 
         openCloseDialogSpy.calls.reset();
       });
 
-      describe('with no selected profile', () => {
+      describe('after dialog closed with discard selected', () => {
         beforeEach(() => {
           spyOn(
             <ProfileFormComponent>component.form(),
             'openCloseDialog'
           ).and.returnValue(of(true));
-          component.discard(null);
+          component.discard();
         });
 
-        it('should call setFocusOnCreateButton', () => {
+        it('should update selected profile', () => {
           expect(
-            mockRiskAssessmentStore.setFocusOnCreateButton
-          ).toHaveBeenCalled();
+            mockRiskAssessmentStore.updateSelectedProfile
+          ).toHaveBeenCalledWith(null);
         });
 
         it('should close the form', () => {
           expect(component.isOpenProfileForm).toBeFalse();
         });
       });
-
-      describe('with selected profile', () => {
-        beforeEach(fakeAsync(() => {
-          spyOn(
-            <ProfileFormComponent>component.form(),
-            'openCloseDialog'
-          ).and.returnValue(of(true));
-          component.discard(PROFILE_MOCK);
-          tick(100);
-        }));
-
-        it('should call setFocusOnCreateButton', fakeAsync(() => {
-          expect(
-            mockRiskAssessmentStore.setFocusOnSelectedProfile
-          ).toHaveBeenCalled();
-        }));
-
-        it('should update selected profile', () => {
-          expect(
-            mockRiskAssessmentStore.updateSelectedProfile
-          ).toHaveBeenCalledWith(null);
-        });
-      });
     });
   });
 });

modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts

@@ -22,6 +22,7 @@ import {
   inject,
   viewChild,
   ChangeDetectorRef,
+  ElementRef,
 } from '@angular/core';
 import { RiskAssessmentStore } from './risk-assessment.store';
 import { SimpleDialogComponent } from '../../components/simple-dialog/simple-dialog.component';
@@ -93,6 +94,7 @@ export class RiskAssessmentComponent
   private store = inject(RiskAssessmentStore);
   private liveAnnouncer = inject(LiveAnnouncer);
   cd = inject(ChangeDetectorRef);
+  private elementRef = inject(ElementRef);
   private destroy$: Subject<boolean> = new Subject<boolean>();
   dialog = inject(MatDialog);
   element = inject(ViewContainerRef);
@@ -171,7 +173,9 @@ export class RiskAssessmentComponent
             name: profileName,
             onDelete: (idx = 0) => {
               this.closeFormAfterDelete(profileName, profile);
-              this.setFocus(idx);
+              timer(100).subscribe(() => {
+                this.setFocus(idx);
+              });
             },
           });
         } else {
@@ -203,36 +207,49 @@ export class RiskAssessmentComponent
     }
   }
 
-  discard(selectedProfile: Profile | null) {
+  discard() {
     this.liveAnnouncer.clear();
-    this.openCloseDialog(selectedProfile);
+    this.openCloseDialog();
   }
 
   copyProfile(profile: Profile, profiles: Profile[]) {
     this.copyProfileAndOpenForm(profile, profiles);
   }
 
-  private openCloseDialog(selectedProfile: Profile | null) {
+  private openCloseDialog() {
     this.form()
       ?.openCloseDialog()
       .pipe(takeUntil(this.destroy$))
       .subscribe(close => {
         if (close) {
-          if (selectedProfile) {
-            timer(100).subscribe(() => {
-              this.store.setFocusOnSelectedProfile();
-            });
-          } else {
-            this.store.setFocusOnCreateButton();
-          }
           this.isCopyProfile = false;
           this.isOpenProfileForm = false;
           this.store.updateSelectedProfile(null);
           this.cd.markForCheck();
+          timer(100).subscribe(() => {
+            this.focusSelectedButton();
+          });
         }
       });
   }
 
+  private focusSelectedButton() {
+    const selectedButton = this.elementRef.nativeElement.querySelector(
+      'app-profile-item.selected .profile-item-container'
+    );
+    if (selectedButton) {
+      selectedButton.focus();
+    } else {
+      this.focusAddButton();
+    }
+  }
+
+  private focusAddButton(): void {
+    const addButton =
+      this.elementRef.nativeElement.querySelector('.add-entity-button');
+    addButton?.focus();
+  }
+
   deleteCopy(copyOfProfile: Profile, profiles: Profile[]) {
     this.isCopyProfile = false;
     this.store.removeProfile(copyOfProfile.name, profiles);
@@ -338,14 +355,15 @@ export class RiskAssessmentComponent
   }
 
   private setFocus(index: number): void {
-    const nextItem = window.document.querySelector(
-      `.profile-item-${index + 1}`
-    ) as HTMLElement;
-    const firstItem = window.document.querySelector(
-      `.profile-item-0`
-    ) as HTMLElement;
-
-    this.store.setFocus({ nextItem, firstItem });
+    const nextItem = this.elementRef.nativeElement.querySelectorAll(
+      'app-profile-item .profile-item-info'
+    )[index];
+
+    if (nextItem) {
+      nextItem.focus();
+    } else {
+      this.focusAddButton();
+    }
   }
 
   private openSaveDialog(