LP1818086 Accessible text for grid flair icons (Angular)

Adds visually-hidden text alongside grid flair icons so that the title,
if given, will be announced in place of the icon keyword. Keywords are
hidden in ARIA regardless of whether the title was specified.

For the flair column, the ngbTooltip has been replaced with a standard
title attribute, for consistency with other icons throughout the
interface.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
index 55c7fef..a544d1d 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
@@ -34,11 +34,11 @@
             obviating the need for multiple calls of the same function -->
       <ng-container *ngIf="context.rowFlairCallback(row); let flair">
         <ng-container *ngIf="flair.icon">
-          <!-- tooltip is disabled when no title is set -->
-          <span class="material-icons"
-            ngbTooltip="{{flair.title || ''}}" triggers="mouseenter:mouseleave">
+          <span class="material-icons" aria-hidden="true"
+            title="{{flair.title}}" i18n-title>
             {{flair.icon}}
           </span>
+          <span *ngIf="flair.title" class="visually-hidden" i18n>{{flair.title}}</span>
         </ng-container>
       </ng-container>
     </div>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
index a3d0a6b..c5b5123 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
@@ -15,7 +15,8 @@
   <div *ngIf="context.rowFlairIsEnabled"
     role="columnheader"
     class="eg-grid-cell eg-grid-header-cell eg-grid-flair-cell">
-    <span class="material-icons">notifications</span>
+    <span class="material-icons" aria-hidden="true" title="Notifications" i18n-title>notifications</span>
+    <span class="visually-hidden" i18n>Notifications</span>
   </div>
   <div role="columnheader"
     *ngFor="let col of context.columnSet.displayColumns()"