add title attrs

libs/components/src/callout/callout.component.html

@@ -18,14 +18,19 @@
     @if (title) {
       <header
         id="{{ titleId }}"
-        [appA11yTitle]="title"
         class="tw-text-base tw-font-semibold"
         [ngClass]="_truncate ? 'tw-truncate' : ''"
+        [appA11yTitle]="_truncate ? title : ''"
       >
         {{ title }}
       </header>
     }
-    <div bitTypography="body2" [ngClass]="_truncate ? 'tw-truncate' : ''">
+    <div
+      #content
+      bitTypography="body2"
+      [ngClass]="_truncate ? 'tw-truncate' : ''"
+      [appA11yTitle]="_truncate ? contentText : ''"
+    >
       <ng-content></ng-content>
     </div>
   </div>

libs/components/src/callout/callout.component.ts

@@ -1,7 +1,8 @@
-import { Component, computed, input } from "@angular/core";
+import { AfterViewInit, Component, computed, ElementRef, input, ViewChild } from "@angular/core";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
+import { A11yTitleDirective } from "../a11y";
 import { SharedModule } from "../shared";
 import { TypographyModule } from "../typography";
 
@@ -31,12 +32,12 @@ let nextId = 0;
 @Component({
   selector: "bit-callout",
   templateUrl: "callout.component.html",
-  imports: [SharedModule, TypographyModule],
+  imports: [A11yTitleDirective, SharedModule, TypographyModule],
 })
-export class CalloutComponent {
+export class CalloutComponent implements AfterViewInit {
   readonly type = input<CalloutTypes>("info");
   readonly icon = input<string>();
-  readonly title = input<string | null>();
+  readonly title = input<string>();
   readonly truncate = input(false);
   readonly useAlertRole = input(false);
   readonly iconComputed = computed(() =>
@@ -44,10 +45,6 @@ export class CalloutComponent {
   );
   readonly titleComputed = computed(() => {
     const title = this.title();
-    if (title === null) {
-      return undefined;
-    }
-
     const type = this.type();
     if (title == null && defaultI18n[type] != null) {
       return this.i18nService.t(defaultI18n[type]);
@@ -58,8 +55,16 @@ export class CalloutComponent {
 
   protected readonly titleId = `bit-callout-title-${nextId++}`;
 
+  @ViewChild("content", { static: false })
+  private contentRef!: ElementRef<HTMLElement>;
+  contentText = "";
+
   constructor(private i18nService: I18nService) {}
 
+  ngAfterViewInit() {
+    this.contentText = this.contentRef?.nativeElement?.textContent?.trim() ?? "";
+  }
+
   protected readonly calloutClass = computed(() => {
     switch (this.type()) {
       case "danger":