bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-20 02:03:39 +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

12
libs/components/src/tooltip/tooltip.directive.ts
View File

@@ -16,6 +16,7 @@ import {
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".
@@ -85,7 +86,7 @@ export class TooltipDirective implements OnInit {
this.isVisible.set(false);
};
private showTooltip = () => {
protected showTooltip = () => {
if (!this.overlayRef) {
this.overlayRef = this.overlay.create({
...this.defaultPopoverConfig,
@@ -94,14 +95,17 @@ export class TooltipDirective implements OnInit {
this.overlayRef.attach(this.tooltipPortal);
}
this.isVisible.set(true);
setTimeout(() => {
this.isVisible.set(true);
}, TOOLTIP_DELAY_MS);
};
private hideTooltip = () => {
protected hideTooltip = () => {
this.destroyTooltip();
};
private readonly resolvedDescribedByIds = computed(() => {
protected readonly resolvedDescribedByIds = computed(() => {
if (this.addTooltipToDescribedby()) {
if (this.currentDescribedByIds) {
return `${this.currentDescribedByIds || ""} ${this.tooltipId}`;

14
libs/components/src/tooltip/tooltip.spec.ts
View File

@@ -6,11 +6,11 @@ import {
} from "@angular/cdk/overlay";
import { ComponentPortal } from "@angular/cdk/portal";
import { Component } from "@angular/core";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { ComponentFixture, TestBed, fakeAsync, tick } from "@angular/core/testing";
import { By } from "@angular/platform-browser";
import { Observable, Subject } from "rxjs";
import { TooltipDirective } from "./tooltip.directive";
import { TooltipDirective, TOOLTIP_DELAY_MS } from "./tooltip.directive";
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@@ -90,23 +90,25 @@ describe("TooltipDirective (visibility only)", () => {
return hostDE.injector.get(TooltipDirective);
}
it("sets isVisible to true on mouseenter", () => {
it("sets isVisible to true on mouseenter", fakeAsync(() => {
const button: HTMLButtonElement = fixture.debugElement.query(By.css("button")).nativeElement;
const directive = getDirective();
const isVisible = (directive as unknown as { isVisible: () => boolean }).isVisible;
button.dispatchEvent(new Event("mouseenter"));
tick(TOOLTIP_DELAY_MS);
expect(isVisible()).toBe(true);
});
}));
it("sets isVisible to true on focus", () => {
it("sets isVisible to true on focus", fakeAsync(() => {
const button: HTMLButtonElement = fixture.debugElement.query(By.css("button")).nativeElement;
const directive = getDirective();
const isVisible = (directive as unknown as { isVisible: () => boolean }).isVisible;
button.dispatchEvent(new Event("focus"));
tick(TOOLTIP_DELAY_MS);
expect(isVisible()).toBe(true);
});
}));
});