From cea88cdb9741951890f18ae89041f64b37378623 Mon Sep 17 00:00:00 2001
From: Adithya Sreyaj <adithya.sreyaj@traceable.ai>
Date: Mon, 14 Mar 2022 12:34:37 +0530
Subject: [PATCH 1/4] feat(notification): add alert type attribute

---
 projects/components/src/notification/notification.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/components/src/notification/notification.component.ts b/projects/components/src/notification/notification.component.ts
index 70c267a64..cf231c3f1 100644
--- a/projects/components/src/notification/notification.component.ts
+++ b/projects/components/src/notification/notification.component.ts
@@ -10,7 +10,7 @@ import { IconSize } from '../icon/icon-size';
   styleUrls: ['./notification.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="notification-container">
+    <div class="notification-container" role="alert" aria-live="polite" [attr.data-alert-type]="this.data.mode">
       <ht-icon
         [ngClass]="this.data.mode"
         class="status-icon"

From 6a8767992c0a8d0f4f1308f5c0d74618b11cbbc3 Mon Sep 17 00:00:00 2001
From: Adithya Sreyaj <adithya.sreyaj@traceable.ai>
Date: Mon, 14 Mar 2022 13:14:07 +0530
Subject: [PATCH 2/4] feat(load-async): add alert type attribute

---
 .../src/load-async/wrapper/load-async-wrapper.component.ts     | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/projects/components/src/load-async/wrapper/load-async-wrapper.component.ts b/projects/components/src/load-async/wrapper/load-async-wrapper.component.ts
index 13c3b268c..ebf814e1a 100644
--- a/projects/components/src/load-async/wrapper/load-async-wrapper.component.ts
+++ b/projects/components/src/load-async/wrapper/load-async-wrapper.component.ts
@@ -21,6 +21,9 @@ export const ASYNC_WRAPPER_PARAMETERS$ = new InjectionToken<Observable<LoadAsync
       </ng-container>
       <ng-container *ngSwitchDefault>
         <ht-message-display
+          aria-live="polite"
+          role="alert"
+          [attr.data-alert-type]="state.type === '${LoadAsyncStateType.GenericError}' ? 'failure' : 'no-data'"
           [icon]="this.icon"
           [title]="this.title"
           [description]="this.description"

From 64b43ea6019d67b2be092bbaac0dd0161e06e36d Mon Sep 17 00:00:00 2001
From: Adithya Sreyaj <adithya.sreyaj@traceable.ai>
Date: Mon, 14 Mar 2022 13:15:52 +0530
Subject: [PATCH 3/4] feat(not-found): add alert type

---
 projects/components/src/not-found/not-found.component.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/projects/components/src/not-found/not-found.component.ts b/projects/components/src/not-found/not-found.component.ts
index 4929b389b..76570342a 100644
--- a/projects/components/src/not-found/not-found.component.ts
+++ b/projects/components/src/not-found/not-found.component.ts
@@ -9,7 +9,7 @@ import { ButtonRole, ButtonStyle } from '../button/button';
   styleUrls: ['./not-found.component.scss'],
   template: `
     <div class="not-found-container fill-container">
-      <div class="not-found-content">
+      <div class="not-found-content" role="alert" aria-live="assertive" [attr.data-alert-type]="'failure'">
         <img class="not-found-image" src="${ImagesAssetPath.ErrorPage}" loading="lazy" alt="not found page" />
         <div class="not-found-message-wrapper">
           <div class="not-found-text-wrapper">
@@ -30,6 +30,7 @@ import { ButtonRole, ButtonStyle } from '../button/button';
 })
 export class NotFoundComponent {
   public constructor(private readonly navService: NavigationService) {}
+
   public goHome(): void {
     this.navService.navigateToHome();
   }

From 240a18d5c2e7bfffda08b2a2a7e3952ee50bb857 Mon Sep 17 00:00:00 2001
From: Adithya Sreyaj <adithya.sreyaj@traceable.ai>
Date: Mon, 14 Mar 2022 16:26:45 +0530
Subject: [PATCH 4/4] refactor(error-selectors): update to use enums instead of
 strings

---
 .../load-async/wrapper/load-async-wrapper.component.ts    | 7 ++++++-
 projects/components/src/not-found/not-found.component.ts  | 8 +++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/projects/components/src/load-async/wrapper/load-async-wrapper.component.ts b/projects/components/src/load-async/wrapper/load-async-wrapper.component.ts
index ebf814e1a..8dcf620a8 100644
--- a/projects/components/src/load-async/wrapper/load-async-wrapper.component.ts
+++ b/projects/components/src/load-async/wrapper/load-async-wrapper.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Inject, InjectionToken, TemplateRef
 import { IconType } from '@hypertrace/assets-library';
 import { Observable } from 'rxjs';
 import { switchMap, tap } from 'rxjs/operators';
+import { NotificationMode } from '../../notification/notification.component';
 import { LoadAsyncStateType } from '../load-async-state.type';
 import { AsyncState, LoadAsyncConfig, LoadAsyncContext, LoaderType } from '../load-async.service';
 
@@ -23,7 +24,11 @@ export const ASYNC_WRAPPER_PARAMETERS$ = new InjectionToken<Observable<LoadAsync
         <ht-message-display
           aria-live="polite"
           role="alert"
-          [attr.data-alert-type]="state.type === '${LoadAsyncStateType.GenericError}' ? 'failure' : 'no-data'"
+          [attr.data-alert-type]="
+            state.type === '${LoadAsyncStateType.GenericError}'
+              ? '${NotificationMode.Failure}'
+              : '${NotificationMode.Info}'
+          "
           [icon]="this.icon"
           [title]="this.title"
           [description]="this.description"
diff --git a/projects/components/src/not-found/not-found.component.ts b/projects/components/src/not-found/not-found.component.ts
index 76570342a..65f4115cc 100644
--- a/projects/components/src/not-found/not-found.component.ts
+++ b/projects/components/src/not-found/not-found.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ImagesAssetPath } from '@hypertrace/assets-library';
 import { NavigationService } from '@hypertrace/common';
 import { ButtonRole, ButtonStyle } from '../button/button';
+import { NotificationMode } from '../notification/notification.component';
 
 @Component({
   selector: 'ht-not-found',
@@ -9,7 +10,12 @@ import { ButtonRole, ButtonStyle } from '../button/button';
   styleUrls: ['./not-found.component.scss'],
   template: `
     <div class="not-found-container fill-container">
-      <div class="not-found-content" role="alert" aria-live="assertive" [attr.data-alert-type]="'failure'">
+      <div
+        class="not-found-content"
+        role="alert"
+        aria-live="assertive"
+        [attr.data-alert-type]="'${NotificationMode.Failure}'"
+      >
         <img class="not-found-image" src="${ImagesAssetPath.ErrorPage}" loading="lazy" alt="not found page" />
         <div class="not-found-message-wrapper">
           <div class="not-found-text-wrapper">