From 531f362f93b6e58659810796624a50342c677a25 Mon Sep 17 00:00:00 2001
From: kurilova <sonnycactus@gmail.com>
Date: Fri, 21 Jun 2024 12:29:28 +0000
Subject: [PATCH] Announce risk form open; focus first element in container

---
 .../risk-assessment.component.spec.ts         | 29 ++++++++++++++++++-
 .../risk-assessment.component.ts              | 10 +++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts
index 4dda189b7..272d3d34d 100644
--- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts
+++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts
@@ -34,6 +34,7 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { DeleteFormComponent } from '../../components/delete-form/delete-form.component';
 import { FocusManagerService } from '../../services/focus-manager.service';
 import { RiskAssessmentStore } from './risk-assessment.store';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 
 describe('RiskAssessmentComponent', () => {
   let component: RiskAssessmentComponent;
@@ -41,13 +42,17 @@ describe('RiskAssessmentComponent', () => {
   let mockService: SpyObj<TestRunService>;
   let mockFocusManagerService: SpyObj<FocusManagerService>;
   let mockRiskAssessmentStore: SpyObj<RiskAssessmentStore>;
+
+  const mockLiveAnnouncer: SpyObj<LiveAnnouncer> = jasmine.createSpyObj([
+    'announce',
+  ]);
   let compiled: HTMLElement;
 
   beforeEach(async () => {
     mockService = jasmine.createSpyObj(['fetchProfiles', 'deleteProfile']);
     mockService.deleteProfile.and.returnValue(of(true));
 
-    mockFocusManagerService = jasmine.createSpyObj([
+    mockFocusManagerService = jasmine.createSpyObj('mockFocusManagerService', [
       'focusFirstElementInContainer',
     ]);
 
@@ -68,6 +73,7 @@ describe('RiskAssessmentComponent', () => {
         { provide: TestRunService, useValue: mockService },
         { provide: FocusManagerService, useValue: mockFocusManagerService },
         { provide: RiskAssessmentStore, useValue: mockRiskAssessmentStore },
+        { provide: LiveAnnouncer, useValue: mockLiveAnnouncer },
       ],
     }).compileComponents();
 
@@ -174,6 +180,27 @@ describe('RiskAssessmentComponent', () => {
         openSpy.calls.reset();
       }));
     });
+
+    describe('#openForm', () => {
+      it('should open the form', () => {
+        component.openForm();
+        expect(component.isOpenProfileForm).toBeTrue();
+      });
+
+      it('should announce', () => {
+        component.openForm();
+        expect(mockLiveAnnouncer.announce).toHaveBeenCalledWith(
+          'Risk assessment questionnaire'
+        );
+      });
+
+      it('should focus first element in container', async () => {
+        await component.openForm();
+        expect(
+          mockFocusManagerService.focusFirstElementInContainer
+        ).toHaveBeenCalled();
+      });
+    });
   });
 });
 
diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts
index 69c6aa4f9..c6f7b8925 100644
--- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts
+++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts
@@ -23,6 +23,8 @@ import { RiskAssessmentStore } from './risk-assessment.store';
 import { DeleteFormComponent } from '../../components/delete-form/delete-form.component';
 import { Subject, takeUntil } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
+import { FocusManagerService } from '../../services/focus-manager.service';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 
 @Component({
   selector: 'app-risk-assessment',
@@ -37,7 +39,9 @@ export class RiskAssessmentComponent implements OnInit, OnDestroy {
   private destroy$: Subject<boolean> = new Subject<boolean>();
   constructor(
     private store: RiskAssessmentStore,
-    public dialog: MatDialog
+    public dialog: MatDialog,
+    private focusManagerService: FocusManagerService,
+    private liveAnnouncer: LiveAnnouncer
   ) {}
 
   ngOnInit() {
@@ -49,8 +53,10 @@ export class RiskAssessmentComponent implements OnInit, OnDestroy {
     this.destroy$.unsubscribe();
   }
 
-  openForm(): void {
+  async openForm() {
     this.isOpenProfileForm = true;
+    await this.liveAnnouncer.announce('Risk assessment questionnaire');
+    this.focusManagerService.focusFirstElementInContainer();
   }
 
   deleteProfile(profileName: string, index: number): void {