a11y/SHIBUI-354: Added screen reader accessibility to info icon toolt…

…ips;
TIER · Oct 11, 2018 · 541919b · 541919b
1 parent 2b21fe9
commit 541919b
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 7 deletions.
diff --git a/backend/src/main/resources/i18n/messages_en.properties b/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

diff --git a/ui/src/app/shared/component/info-icon.component.html b/ui/src/app/shared/component/info-icon.component.html
@@ -4,15 +4,12 @@
 <button class="btn btn-nostyle info-icon"
     #toggle="ngbPopover"
     [attr.aria-label]="'tooltip.instruction' | translate"
-    [attr.aria-expanded]="toggle.isOpen()"
     [ngbPopover]="tooltipContent"
     (keydown.space)="toggle.open()"
-    (keyup.space)="toggle.close()"
     [triggers]="triggers"
     [placement]="placement"
-    aria-haspopup="true"
     [attr.aria-flowto]="id"
-    role="button">
+    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>
diff --git a/ui/src/app/shared/component/info-icon.component.ts b/ui/src/app/shared/component/info-icon.component.ts
@@ -12,7 +12,7 @@ export class InfoIconComponent {
 
     id: string = String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now().toString();
 
-    triggers = 'mouseenter:mouseleave';
+    triggers = 'mouseenter:mouseleave focus:blur';
     container = 'body';
     placement = ['top'];