bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-15 15:53:27 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Bryan Cunningham
2025-12-01 11:59:20 -05:00
committed by GitHub
parent 4a2858132d
commit 963a9156fb
7 changed files with 38 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
libs/components/src/a11y/a11y-title.directive.ts
View File

@@ -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 {}