From dc953b3945b0fa383c714b35bb3254b37dfc9ccb Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bcunningham@bitwarden.com>
Date: Tue, 2 Dec 2025 16:03:06 -0500
Subject: [PATCH] Revert using tooltip in appA11yTitle directive (#17787)

* revert using tooltip in title directive

* add back tooltip delay from revert

* add back label to carousel buttons

* fix documentation that does not need reverted

* remove unnecessary label attr
---
 .../setup-extension.component.html            |  2 +-
 .../src/a11y/a11y-title.directive.ts          | 32 +++++--------------
 .../src/tooltip/tooltip.directive.ts          |  1 +
 3 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
index a4b2191562..1976321b4e 100644
--- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
+++ b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
@@ -2,7 +2,7 @@
   *ngIf="state === SetupExtensionState.Loading"
   class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted"
   aria-hidden="true"
-  [title]="'loading' | i18n"
+  [appA11yTitle]="'loading' | i18n"
 ></i>
 
 <section *ngIf="state === SetupExtensionState.NeedsExtension" class="tw-text-center tw-mt-4">
diff --git a/libs/components/src/a11y/a11y-title.directive.ts b/libs/components/src/a11y/a11y-title.directive.ts
index 5864874b73..75c2967805 100644
--- a/libs/components/src/a11y/a11y-title.directive.ts
+++ b/libs/components/src/a11y/a11y-title.directive.ts
@@ -1,38 +1,22 @@
-import { Directive, effect, ElementRef, inject } from "@angular/core";
-
-import { TooltipDirective } from "../tooltip/tooltip.directive";
+import { Directive, effect, ElementRef, input } from "@angular/core";
 
 import { setA11yTitleAndAriaLabel } from "./set-a11y-title-and-aria-label";
 
-/**
- * @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 {
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-  private readonly tooltipDirective = inject(TooltipDirective);
+  readonly title = input.required<string>({ alias: "appA11yTitle" });
 
-  constructor() {
-    const originalAriaLabel = this.elementRef.nativeElement.getAttribute("aria-label");
+  constructor(private el: ElementRef) {
+    const originalTitle = this.el.nativeElement.getAttribute("title");
+    const originalAriaLabel = this.el.nativeElement.getAttribute("aria-label");
 
-    // setting aria-label as a workaround for testing purposes. Should be removed once tests are updated to check element content.
     effect(() => {
       setA11yTitleAndAriaLabel({
-        element: this.elementRef.nativeElement,
-        title: undefined,
-        label: originalAriaLabel ?? this.tooltipDirective.tooltipContent(),
+        element: this.el.nativeElement,
+        title: originalTitle ?? this.title(),
+        label: originalAriaLabel ?? this.title(),
       });
     });
   }
diff --git a/libs/components/src/tooltip/tooltip.directive.ts b/libs/components/src/tooltip/tooltip.directive.ts
index 12be865243..cca52526c7 100644
--- a/libs/components/src/tooltip/tooltip.directive.ts
+++ b/libs/components/src/tooltip/tooltip.directive.ts
@@ -17,6 +17,7 @@ import { TooltipPositionIdentifier, tooltipPositions } from "./tooltip-positions
 import { TooltipComponent, TOOLTIP_DATA } from "./tooltip.component";
 
 export const TOOLTIP_DELAY_MS = 800;
+
 /**
  * Directive to add a tooltip to any element. The tooltip content is provided via the `bitTooltip` input.
  * The position of the tooltip can be set via the `tooltipPosition` input. Default position is "above-center".