From ea7e89127e94efcc05982c79e69409744a7b0361 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Thu, 19 Sep 2024 13:08:44 +0000
Subject: [PATCH] Adds aria label; code refactoring

---
 .../profile-item/profile-item.component.html  |  1 +
 .../profile-item/profile-item.component.ts    | 11 ++++++---
 .../risk-assessment.component.ts              | 23 ++++++++++++-------
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.html b/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.html
index 31049cd93..0e9f3fa5e 100644
--- a/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.html
+++ b/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.html
@@ -28,6 +28,7 @@
         ? EXPIRED_TOOLTIP
         : profile.status
     }}"
+    [attr.aria-label]="getProfileItemLabel(profile)"
     (click)="profileClicked.emit(profile)"
     (keydown.enter)="enterProfileItem(profile)">
     <span
diff --git a/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.ts b/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.ts
index 514cbd46e..8ddf28b04 100644
--- a/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.ts
+++ b/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.ts
@@ -29,7 +29,7 @@ import {
 } from '../../../model/profile';
 import { MatIcon } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { TestRunService } from '../../../services/test-run.service';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
@@ -38,7 +38,7 @@ import { LiveAnnouncer } from '@angular/cdk/a11y';
   selector: 'app-profile-item',
   standalone: true,
   imports: [MatIcon, MatButtonModule, CommonModule, MatTooltipModule],
-  providers: [MatTooltip],
+  providers: [MatTooltip, DatePipe],
   templateUrl: './profile-item.component.html',
   styleUrl: './profile-item.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -63,7 +63,8 @@ export class ProfileItemComponent {
 
   constructor(
     private readonly testRunService: TestRunService,
-    private liveAnnouncer: LiveAnnouncer
+    private liveAnnouncer: LiveAnnouncer,
+    private datePipe: DatePipe
   ) {}
 
   public getRiskClass(riskResult: string): RiskResultClassName {
@@ -82,4 +83,8 @@ export class ProfileItemComponent {
       this.profileClicked.emit(profile);
     }
   }
+
+  getProfileItemLabel(profile: Profile) {
+    return `${profile.status} ${profile.risk} risk ${profile.name} ${this.datePipe.transform(profile.created, 'dd MMM yyyy')}`;
+  }
 }
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 020a656bb..2abec064e 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
@@ -120,8 +120,7 @@ export class RiskAssessmentComponent implements OnInit, OnDestroy {
 
   saveProfileClicked(profile: Profile, selectedProfile: Profile | null): void {
     if (!selectedProfile) {
-      this.saveProfile(profile);
-      this.store.setFocusOnCreateButton();
+      this.saveProfile(profile, this.store.setFocusOnCreateButton);
     } else {
       this.openSaveDialog(
         selectedProfile.name,
@@ -130,8 +129,7 @@ export class RiskAssessmentComponent implements OnInit, OnDestroy {
         .pipe(takeUntil(this.destroy$))
         .subscribe(saveProfile => {
           if (saveProfile) {
-            this.saveProfile(profile);
-            this.store.setFocusOnSelectedProfile();
+            this.saveProfile(profile, this.store.setFocusOnSelectedProfile);
           }
         });
     }
@@ -158,12 +156,14 @@ export class RiskAssessmentComponent implements OnInit, OnDestroy {
     }
   }
 
-  private saveProfile(profile: Profile) {
+  private saveProfile(profile: Profile, focusElement: () => void) {
     this.store.saveProfile({
       profile,
       onSave: (profile: Profile) => {
         if (profile.status === ProfileStatus.VALID) {
-          this.openSuccessDialog(profile);
+          this.openSuccessDialog(profile, focusElement);
+        } else {
+          focusElement();
         }
       },
     });
@@ -200,8 +200,8 @@ export class RiskAssessmentComponent implements OnInit, OnDestroy {
     return dialogRef?.afterClosed();
   }
 
-  private openSuccessDialog(profile: Profile): void {
-    this.dialog.open(SuccessDialogComponent, {
+  private openSuccessDialog(profile: Profile, focusElement: () => void): void {
+    const dialogRef = this.dialog.open(SuccessDialogComponent, {
       ariaLabel: 'Risk Assessment Profile Completed',
       data: {
         profile,
@@ -211,5 +211,12 @@ export class RiskAssessmentComponent implements OnInit, OnDestroy {
       disableClose: true,
       panelClass: 'simple-dialog',
     });
+
+    dialogRef
+      ?.afterClosed()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        focusElement();
+      });
   }
 }