From 4bf76c9bd185a8e03df220b2c48251c20ff6ea1e Mon Sep 17 00:00:00 2001
From: Stephanie Leary <stephanie.leary@equinoxoli.org>
Date: Thu, 25 May 2023 19:35:01 +0000
Subject: [PATCH] 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>
---
 Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html   | 6 +++---
 Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

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()"
-- 
2.11.0