Add accessibility role to notification div

client/src/app/app.component.html

@@ -53,12 +53,14 @@
 <p-toast position="bottom-right">
   <ng-template let-message pTemplate="message">
     <div class="notification-block">
-      <div class="message">
+      <div class="message" [attr.role]="getNotificationRole(message)">
         <h3>{{ message.summary }}</h3>
         <p>{{ message.detail }}</p>
       </div>
 
-      <my-global-icon [iconName]="getNotificationIcon(message)"></my-global-icon>
+      <button class="border-0 padding-0">
+        <my-global-icon [iconName]="getNotificationIcon(message)"></my-global-icon>
+      </button>
     </div>
   </ng-template>
 </p-toast>

client/src/app/app.component.ts

@@ -160,17 +160,33 @@ export class AppComponent implements OnInit, AfterViewInit {
     this.screenService.isBroadcastMessageDisplayed = false
   }
 
+  // ---------------------------------------------------------------------------
+
   getNotificationIcon (message: { severity: 'success' | 'error' | 'info' }): GlobalIconName {
     switch (message.severity) {
       case 'error':
         return 'cross'
+
       case 'success':
         return 'tick'
+
       case 'info':
         return 'help'
     }
   }
 
+  getNotificationRole (message: { severity: 'success' | 'error' | 'info' }) {
+    switch (message.severity) {
+      case 'error':
+        return 'alert'
+
+      default:
+        return 'status'
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+
   private initRouteEvents () {
     const eventsObs = this.router.events