From b3041660a72b153757b433e597ff576f6cdc63ef Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Tue, 10 Dec 2024 08:54:24 +0100
Subject: [PATCH] OZG-7047 add tooltip to focusabel element
---
.../src/lib/tooltip/tooltip.directive.spec.ts | 32 +++++++++----------
.../src/lib/tooltip/tooltip.directive.ts | 7 ++--
2 files changed, 19 insertions(+), 20 deletions(-)
diff --git a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts
index 0ada2b5b0f..9e99fa4d25 100644
--- a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts
+++ b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts
@@ -85,6 +85,8 @@ describe('TooltipDirective', () => {
beforeEach(() => {
directive.viewContainerRef.createComponent = jest.fn().mockReturnValue({ location: { nativeElement: {} } });
directive.setAriaLabeledBy = jest.fn();
+ directive.getFocusableElement = jest.fn().mockReturnValue({ appendChild: jest.fn() });
+ directive.interactivityChecker.isFocusable = jest.fn();
});
it('should create tooltip component', () => {
@@ -93,10 +95,22 @@ describe('TooltipDirective', () => {
expect(directive.viewContainerRef.createComponent).toHaveBeenCalled();
});
- it('should insert tooltip component to parent', () => {
+ it('should check if parent element focusable', () => {
+ directive.createTooltip();
+
+ expect(directive.interactivityChecker.isFocusable).toHaveBeenCalled();
+ });
+
+ it('should get focusable element if parent not focusable', () => {
+ directive.createTooltip();
+
+ expect(directive.getFocusableElement).toHaveBeenCalled();
+ });
+
+ it('should insert tooltip component to focusable', () => {
directive.createTooltip();
- expect(directive.elementRef.nativeElement.appendChild).toHaveBeenCalled();
+ expect(directive.focusableElement.appendChild).toHaveBeenCalled();
});
it('should set aria-labeledby attribute to parent', () => {
@@ -184,21 +198,7 @@ describe('TooltipDirective', () => {
describe('setAriaLabeledBy', () => {
beforeEach(() => {
- directive.getFocusableElement = jest.fn();
directive.renderer.setAttribute = jest.fn();
- directive.interactivityChecker.isFocusable = jest.fn();
- });
-
- it('should check if parent element focusable', () => {
- directive.setAriaLabeledBy();
-
- expect(directive.interactivityChecker.isFocusable).toHaveBeenCalled();
- });
-
- it('should get focusable element if parent not focusable', () => {
- directive.setAriaLabeledBy();
-
- expect(directive.getFocusableElement).toHaveBeenCalled();
});
it('should set aria-labeledby attribute', () => {
diff --git a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts
index d94abe415a..13a03551dd 100644
--- a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts
+++ b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts
@@ -94,7 +94,9 @@ export class TooltipDirective implements AfterViewInit, OnDestroy {
const nativeElement: HTMLElement = this.elementRef.nativeElement;
this.componentRef = this.viewContainerRef.createComponent(TooltipComponent);
- nativeElement.appendChild(this.componentRef.location.nativeElement);
+ this.focusableElement =
+ this.interactivityChecker.isFocusable(nativeElement) ? nativeElement : this.getFocusableElement(nativeElement);
+ this.focusableElement.appendChild(this.componentRef.location.nativeElement);
this.setAriaLabeledBy();
}
@@ -112,10 +114,7 @@ export class TooltipDirective implements AfterViewInit, OnDestroy {
}
setAriaLabeledBy(): void {
- const nativeElement: HTMLElement = this.elementRef.nativeElement;
this.tooltipId = uniqueId('tooltip');
- this.focusableElement =
- this.interactivityChecker.isFocusable(nativeElement) ? nativeElement : this.getFocusableElement(nativeElement);
this.renderer.setAttribute(this.focusableElement, 'aria-labeledby', this.tooltipId);
}
--
GitLab