The focused risk profile is not communicated by screen reader after saving it on the list

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

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')}`;
+  }
 }

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();
+      });
   }
 }