fix(notification): add aria label and description (#3145)

Signed-off-by: Akshat Patel <[email protected]>
Co-authored-by: Akshat Patel <[email protected]>

Author: r1shabhsharma

src/notification/actionable-notification.component.ts

@@ -31,7 +31,12 @@ import { BaseNotification } from "./base-notification.component";
 			</svg>
 			<div class="cds--actionable-notification__text-wrapper">
 				<div class="cds--actionable-notification__content">
-					<div *ngIf="!notificationObj.template" cdsActionableTitle [innerHTML]="notificationObj.title"></div>
+					<div
+						cdsActionableTitle
+						*ngIf="!notificationObj.template"
+						[id]="notificationID"
+						[innerHTML]="notificationObj.title">
+					</div>
 					<div *ngIf="!notificationObj.template" cdsActionableSubtitle>
 						<span [innerHTML]="notificationObj.message"></span>
 						<ng-container *ngFor="let link of notificationObj.links">
@@ -82,7 +87,8 @@ export class ActionableNotification extends BaseNotification {
 		this._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);
 	}
 
-	@HostBinding("attr.id") notificationID = `notification-${ActionableNotification.notificationCount++}`;
+	notificationID = `actionable-notification-${ActionableNotification.notificationCount++}`;
+	@HostBinding("attr.aria-labelledBy") notificationLabel = this.notificationID;
 	@HostBinding("class.cds--actionable-notification") notificationClass = true;
 	@HostBinding("class.cds--actionable-notification--toast") get toastVariant() { return this.notificationObj.variant === "toast"; }
 	@HostBinding("class.cds--actionable-notification--error") get isError() { return this.notificationObj.type === "error"; }

src/notification/notification.component.ts

@@ -26,7 +26,12 @@ import { BaseNotification } from "./base-notification.component";
 				class="cds--inline-notification__icon">
 			</svg>
 			<div class="cds--inline-notification__text-wrapper">
-				<div *ngIf="!notificationObj.template" cdsNotificationTitle [innerHTML]="notificationObj.title"></div>
+				<div
+					cdsNotificationTitle
+					*ngIf="!notificationObj.template"
+					[innerHTML]="notificationObj.title"
+					[id]="notificationID">
+				</div>
 				<div *ngIf="!notificationObj.template" cdsNotificationSubtitle>
 					<span [innerHTML]="notificationObj.message"></span>
 				</div>
@@ -62,7 +67,8 @@ export class Notification extends BaseNotification {
 		this._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);
 	}
 
-	@HostBinding("attr.id") notificationID = `notification-${Notification.notificationCount++}`;
+	notificationID = `notification-${Notification.notificationCount++}`;
+	@HostBinding("attr.aria-labelledBy") notificationLabel = this.notificationID;
 	@HostBinding("class.cds--inline-notification") notificationClass = true;
 	@HostBinding("class.cds--inline-notification--error") get isError() { return this.notificationObj.type === "error"; }
 	@HostBinding("class.cds--inline-notification--info") get isInfo() { return this.notificationObj.type === "info"; }