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

add back the aria-label when using the a11y title directive (#17776)

Browse Source 
* 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
This commit is contained in:
Bryan Cunningham
2025-12-02 14:35:02 -05:00
committed by GitHub
parent 30f615767c
commit 44e3320a67
2 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.storybook/preview.tsx
View File

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

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

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