From fe6c2fbf80ac5a35554786969987947f5935b82b Mon Sep 17 00:00:00 2001
From: cd-bitwarden <106776772+cd-bitwarden@users.noreply.github.com>
Date: Sat, 19 Aug 2023 09:39:10 -0400
Subject: [PATCH] [CL-111] remove h3 from bit-callout (#5853)

* aside added and h3 turned into header

Co-authored-by: willmartian <contact@willmartian.com>
---
 libs/components/src/callout/callout.component.html | 10 ++++++----
 libs/components/src/callout/callout.component.ts   |  4 ++++
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/libs/components/src/callout/callout.component.html b/libs/components/src/callout/callout.component.html
index 3d66642fa5..57da850d8b 100644
--- a/libs/components/src/callout/callout.component.html
+++ b/libs/components/src/callout/callout.component.html
@@ -1,14 +1,16 @@
-<div
+<aside
   class="tw-mb-4 tw-box-border tw-rounded tw-border tw-border-l-8 tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-px-5 tw-py-3 tw-leading-5 tw-text-main"
   [ngClass]="calloutClass"
+  [attr.aria-labelledby]="titleId"
 >
-  <h3
+  <header
+    id="{{ titleId }}"
     class="tw-mb-2 tw-mt-0 tw-text-base tw-font-bold tw-uppercase"
     [ngClass]="headerClass"
     *ngIf="title"
   >
     <i class="bwi {{ icon }}" *ngIf="icon" aria-hidden="true"></i>
     {{ title }}
-  </h3>
+  </header>
   <ng-content></ng-content>
-</div>
+</aside>
diff --git a/libs/components/src/callout/callout.component.ts b/libs/components/src/callout/callout.component.ts
index b62f830d44..7ce79071bf 100644
--- a/libs/components/src/callout/callout.component.ts
+++ b/libs/components/src/callout/callout.component.ts
@@ -16,6 +16,9 @@ const defaultI18n: Partial<Record<CalloutTypes, string>> = {
   danger: "error",
 };
 
+// Increments for each instance of this component
+let nextId = 0;
+
 @Component({
   selector: "bit-callout",
   templateUrl: "callout.component.html",
@@ -25,6 +28,7 @@ export class CalloutComponent implements OnInit {
   @Input() icon: string;
   @Input() title: string;
   @Input() useAlertRole = false;
+  protected titleId = `bit-callout-title-${nextId++}`;
 
   constructor(private i18nService: I18nService) {}