Merge branch 'CL-896' into PM-26650

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

@@ -5,6 +5,7 @@
 >
   @let title = titleComputed();
   @let icon = iconComputed();
+  @let _truncate = truncate();
 
   @if (icon) {
     <i
@@ -13,17 +14,23 @@
       aria-hidden="true"
     ></i>
   }
-  <div class="tw-flex tw-flex-col tw-gap-0.5" [ngClass]="truncate ? 'tw-truncate' : ''">
+  <div class="tw-flex tw-flex-col tw-gap-0.5" [ngClass]="_truncate ? 'tw-truncate' : ''">
     @if (title) {
       <header
         id="{{ titleId }}"
         class="tw-text-base tw-font-semibold"
-        [ngClass]="truncate ? 'tw-truncate' : ''"
+        [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":

libs/components/src/callout/callout.stories.ts

@@ -123,6 +123,23 @@ export const WithTextButton: Story = {
   },
 };
 
+export const WithWrappingContent: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <bit-callout ${formatArgsForCodeSnippet<CalloutComponent>(args)}>
+        This is a really long callout that should wrap when it reaches the end of the container. This is a really long callout that should wrap when it reaches the end of the container.
+        This is a really long callout that should wrap when it reaches the end of the container. This is a really long callout that should wrap when it reaches the end of the container.
+        This is a really long callout that should wrap when it reaches the end of the container. This is a really long callout that should wrap when it reaches the end of the container.
+      </bit-callout>
+    `,
+  }),
+  args: {
+    type: "default",
+    icon: "bwi-globe",
+  },
+};
+
 export const Truncate: Story = {
   render: (args) => ({
     props: args,