From 44e3320a672a2b73f9931f26f5b8cb5d87973510 Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bcunningham@bitwarden.com>
Date: Tue, 2 Dec 2025 14:35:02 -0500
Subject: [PATCH] add back the aria-label when using the a11y title directive
 (#17776)

* add back the aria-label when using the a11y title directive

* add comment about why aria-label is being added back

* fix storybook a11y tests

* pass undefined to util function
---
 .storybook/preview.tsx                        |  2 +-
 .../src/a11y/a11y-title.directive.ts          | 22 +++++++++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 5a75a21dcd..266cf79d8b 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -28,7 +28,7 @@ const preview: Preview = {
   ],
   parameters: {
     a11y: {
-      element: "#storybook-root",
+      context: "#storybook-root",
     },
     controls: {
       matchers: {
diff --git a/libs/components/src/a11y/a11y-title.directive.ts b/libs/components/src/a11y/a11y-title.directive.ts
index fa038172cb..5864874b73 100644
--- a/libs/components/src/a11y/a11y-title.directive.ts
+++ b/libs/components/src/a11y/a11y-title.directive.ts
@@ -1,7 +1,9 @@
-import { Directive } from "@angular/core";
+import { Directive, effect, ElementRef, inject } from "@angular/core";
 
 import { TooltipDirective } from "../tooltip/tooltip.directive";
 
+import { setA11yTitleAndAriaLabel } from "./set-a11y-title-and-aria-label";
+
 /**
  * @deprecated This function is deprecated in favor of `bitTooltip`.
  * Please use `bitTooltip` instead.
@@ -18,4 +20,20 @@ import { TooltipDirective } from "../tooltip/tooltip.directive";
     },
   ],
 })
-export class A11yTitleDirective {}
+export class A11yTitleDirective {
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+  private readonly tooltipDirective = inject(TooltipDirective);
+
+  constructor() {
+    const originalAriaLabel = this.elementRef.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(),
+      });
+    });
+  }
+}