[CL-910] Use tooltip in title directive (#17084)

* use tooltip in a11y directive

* remove commented code

* add deprecation warning to appA11yTitle directive

* use label for tooltip in carousel nav

* wait for timeout before assertion

* remove unnecessary title directive use

* fix private variable lint errors

* increase tooltip show delay

* fix spec delay and export as constant

* use delay constant

---------

Co-authored-by: Vicki League <vleague@bitwarden.com>
(cherry picked from commit 963a9156fb)

libs/components/src/a11y/a11y-title.directive.ts

@@ -1,23 +1,21 @@
-import { Directive, effect, ElementRef, input } from "@angular/core";
+import { Directive } from "@angular/core";
 
-import { setA11yTitleAndAriaLabel } from "./set-a11y-title-and-aria-label";
+import { TooltipDirective } from "../tooltip/tooltip.directive";
 
+/**
+ * @deprecated This function is deprecated in favor of `bitTooltip`.
+ * Please use `bitTooltip` instead.
+ *
+ * Directive that provides accessible tooltips by internally using TooltipDirective.
+ * This maintains the appA11yTitle API while leveraging the enhanced tooltip functionality.
+ */
 @Directive({
   selector: "[appA11yTitle]",
+  hostDirectives: [
+    {
+      directive: TooltipDirective,
+      inputs: ["bitTooltip: appA11yTitle", "tooltipPosition"],
+    },
+  ],
 })
-export class A11yTitleDirective {
-  readonly title = input.required<string>({ alias: "appA11yTitle" });
-
-  constructor(private el: ElementRef) {
-    const originalTitle = this.el.nativeElement.getAttribute("title");
-    const originalAriaLabel = this.el.nativeElement.getAttribute("aria-label");
-
-    effect(() => {
-      setA11yTitleAndAriaLabel({
-        element: this.el.nativeElement,
-        title: originalTitle ?? this.title(),
-        label: originalAriaLabel ?? this.title(),
-      });
-    });
-  }
-}
+export class A11yTitleDirective {}