[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

@@ -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>

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) {}