Feat | add error selectors (#1480)

* feat(notification): add alert type attribute

* feat(load-async): add alert type attribute

* feat(not-found): add alert type

* refactor(error-selectors): update to use enums instead of strings

Author: adisreyaj

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';
 
@@ -21,6 +22,13 @@ 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}'
+              ? '${NotificationMode.Failure}'
+              : '${NotificationMode.Info}'
+          "
           [icon]="this.icon"
           [title]="this.title"
           [description]="this.description"

projects/components/src/not-found/not-found.component.ts

@@ -2,14 +2,20 @@ 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',
   changeDetection: ChangeDetectionStrategy.OnPush,
   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]="'${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">
@@ -30,6 +36,7 @@ import { ButtonRole, ButtonStyle } from '../button/button';
 })
 export class NotFoundComponent {
   public constructor(private readonly navService: NavigationService) {}
+
   public goHome(): void {
     this.navService.navigateToHome();
   }

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"