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 0ada2b5b0fa9611d30710bcb7884cd5b3fa59692..9e99fa4d2535fdcf5d039bccfb2fee7ca0612ce6 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 d94abe415abd835cff2f6a596d599a409d6e575e..13a03551dde8f09bd52eaa6d7a7133cabe3e25d5 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); }