bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-11 22:03:36 +00:00
Code Issues Releases Wiki Activity

Revert using tooltip in appA11yTitle directive (#17787)

Browse Source 
* 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
This commit is contained in:
Bryan Cunningham
2025-12-02 16:03:06 -05:00
committed by GitHub
parent 365af52e33
commit dc953b3945
3 changed files with 10 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
View File

@@ -2,7 +2,7 @@
*ngIf="state === SetupExtensionState.Loading" *ngIf="state === SetupExtensionState.Loading"
class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted" class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted"
aria-hidden="true" aria-hidden="true"
[title]="'loading' | i18n" [appA11yTitle]="'loading' | i18n"
></i> ></i>
<section *ngIf="state === SetupExtensionState.NeedsExtension" class="tw-text-center tw-mt-4"> <section *ngIf="state === SetupExtensionState.NeedsExtension" class="tw-text-center tw-mt-4">

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

@@ -1,38 +1,22 @@
import { Directive, effect, ElementRef, inject } from "@angular/core"; import { Directive, effect, ElementRef, input } from "@angular/core";
import { TooltipDirective } from "../tooltip/tooltip.directive";
import { setA11yTitleAndAriaLabel } from "./set-a11y-title-and-aria-label"; 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({ @Directive({
selector: "[appA11yTitle]", selector: "[appA11yTitle]",
hostDirectives: [
{
directive: TooltipDirective,
inputs: ["bitTooltip: appA11yTitle", "tooltipPosition"],
},
],
}) })
export class A11yTitleDirective { export class A11yTitleDirective {
private readonly elementRef = inject(ElementRef<HTMLElement>); readonly title = input.required<string>({ alias: "appA11yTitle" });
private readonly tooltipDirective = inject(TooltipDirective);
constructor() { constructor(private el: ElementRef) {
const originalAriaLabel = this.elementRef.nativeElement.getAttribute("aria-label"); 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(() => { effect(() => {
setA11yTitleAndAriaLabel({ setA11yTitleAndAriaLabel({
element: this.elementRef.nativeElement, element: this.el.nativeElement,
title: undefined, title: originalTitle ?? this.title(),
label: originalAriaLabel ?? this.tooltipDirective.tooltipContent(), label: originalAriaLabel ?? this.title(),
}); });
}); });
} }

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

@@ -17,6 +17,7 @@ import { TooltipPositionIdentifier, tooltipPositions } from "./tooltip-positions
import { TooltipComponent, TOOLTIP_DATA } from "./tooltip.component"; import { TooltipComponent, TOOLTIP_DATA } from "./tooltip.component";
export const TOOLTIP_DELAY_MS = 800; export const TOOLTIP_DELAY_MS = 800;
/** /**
* Directive to add a tooltip to any element. The tooltip content is provided via the `bitTooltip` input. * 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". * The position of the tooltip can be set via the `tooltipPosition` input. Default position is "above-center".