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

@@ -28,7 +28,7 @@ const preview: Preview = {
   ],
   parameters: {
     a11y: {
-      element: "#storybook-root",
+      context: "#storybook-root",
     },
     controls: {
       matchers: {

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(),
+      });
+    });
+  }
+}