From: Stephanie Leary <stephanie.leary@equinoxoli.org>
Date: Thu, 25 May 2023 19:35:01 +0000 (+0000)
Subject: LP1818086 Accessible text for grid flair icons (Angular)
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=4bf76c9bd185a8e03df220b2c48251c20ff6ea1e;p=working%2FEvergreen.git

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 55c7fefc88..a544d1da57 100644
--- 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 a3d0a6b138..c5b512348e 100644
--- 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()"