Merged in a11y/SHIBUI-354 (pull request #214)

Added screen reader accessibility to info icon tooltips;

Approved-by: Ryan Mathis <rmathis@unicon.net>

backend/src/main/resources/i18n/messages_en.properties

@@ -400,7 +400,7 @@ tooltip.authentication-methods-to-use=Authentication Methods to Use
 tooltip.ignore-auth-method=Ignore any SP-Requested Authentication Method
 tooltip.omit-not-before-condition=Omit Not Before Condition
 tooltip.responder-id=ResponderId
-tooltip.instruction=Information icon - press spacebar to read additional information for this form field
+tooltip.instruction=Information icon
 tooltip.attribute-release-table=Attribute release table - select the attributes you want to release (default unchecked)
 tooltip.metadata-filter-name=Metadata Filter Name
 tooltip.metadata-filter-type=Metadata Filter Type

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

@@ -1,12 +1,14 @@
 <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">
+    [triggers]="triggers"
+    [placement]="placement"
+    [attr.aria-flowto]="id"
+    role="tooltip">
     <i class="fa fa-fw fa-info-circle text-primary fa-lg"></i>
     <span class="sr-only" translate="tooltip.instruction"></span>
-</button>
+</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 focus:blur';
+    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/shared.module.ts

@@ -6,7 +6,6 @@ import { AutoCompleteComponent } from './autocomplete/autocomplete.component';
 import { ValidationClassDirective } from './validation/validation-class.directive';
 import { InputDefaultsDirective } from './directive/input-defaults.directive';
 import { ValidFormIconComponent } from './component/valid-form-icon.component';
-import { InfoLabelDirective } from './directive/info-label.directive';
 import { PrettyXml } from './pipe/pretty-xml.pipe';
 import { ToggleSwitchComponent } from './switch/switch.component';
 import { ContenteditableDirective } from './contenteditable/contenteditable.directive';
@@ -31,7 +30,6 @@ import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
         ValidationClassDirective,
         InputDefaultsDirective,
         ValidFormIconComponent,
-        InfoLabelDirective,
         PrettyXml,
         ReplacePipe,
         CustomDatePipe,
@@ -48,7 +46,6 @@ import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
         InputDefaultsDirective,
         ValidFormIconComponent,
         ValidationClassDirective,
-        InfoLabelDirective,
         ContenteditableDirective,
         ReplacePipe,
         CustomDatePipe,