SHIBUI-354 Attempt to fix a11y of popovers

ui/src/app/shared/component/info-icon.component.html

@@ -1,12 +1,18 @@
 <ng-template #tooltipContent>
-    <span #content>{{ description }}</span>
+    <span #content [attr.aria-label]="description" [id]="id">{{ description }}</span>
 </ng-template>
 <button class="btn btn-nostyle info-icon"
     #toggle="ngbPopover"
     [attr.aria-label]="'tooltip.instruction' | translate"
     [attr.aria-expanded]="toggle.isOpen()"
     [ngbPopover]="tooltipContent"
-    aria-haspopup="true">
+    (keydown.space)="toggle.open()"
+    (keyup.space)="toggle.close()"
+    [triggers]="triggers"
+    [placement]="placement"
+    aria-haspopup="true"
+    [attr.aria-flowto]="id"
+    role="button">
     <i class="fa fa-fw fa-info-circle text-primary fa-lg"></i>
     <span class="sr-only" translate="tooltip.instruction"></span>
 </button>

ui/src/app/shared/component/info-icon.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, Renderer } from '@angular/core';
+import { NgbPopover, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
     selector: 'info-icon',
@@ -8,4 +9,18 @@ import { Component, Input, ChangeDetectionStrategy, ElementRef, ViewChild } from
 })
 export class InfoIconComponent {
     @Input() description: string;
+
+    id: string = String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now().toString();
+
+    triggers = 'mouseenter:mouseleave';
+    container = 'body';
+    placement = ['top'];
+
+    constructor(
+        private renderer: Renderer
+    ) { }
+    focus(element): void {
+        console.log(element.elementRef.nativeElement);
+        this.renderer.invokeElementMethod(element.elementRef.nativeElement, 'focus');
+    }
 }

ui/src/app/shared/directive/info-label.directive.ts

@@ -7,19 +7,10 @@ import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
     providers: [NgbPopover]
 })
 export class InfoLabelDirective {
-    @HostListener('keydown.space') onSpaceDown() {
-        this.config.open();
-    }
-    @HostListener('keyup.space') onSpaceUp() {
-        this.config.close();
-    }
     constructor(
         private config: NgbPopover,
         private element: ElementRef
     ) {
-        config.triggers = 'mouseenter:mouseleave';
-        config.placement = ['top', 'left'];
-        config.container = 'body';
-        element.nativeElement.setAttribute('tabindex', 0);
+
     }
 }