OZG-7047 add tooltip to focusabel element

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', () => {

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);
   }