LP1818086 Accessible text for AngJS status icons

Adds screenreader-only text and title attributes (for tooltips) to the
glyphicons used in the patron bills status column.

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

diff --git a/Open-ILS/src/templates/staff/base_js.tt2 b/Open-ILS/src/templates/staff/base_js.tt2
index f0df81e..0558f05 100644 (file)
--- a/Open-ILS/src/templates/staff/base_js.tt2
+++ b/Open-ILS/src/templates/staff/base_js.tt2
@@ -159,6 +159,9 @@ UpUp.start({
     s.PAGE_TITLE_DYNAMIC_AND_CONTEXT = "[% l('[_1] - [_2]', '{{dynamic}}', '{{context}}') %]";
     s.CONFIRM_LONG_RUNNING_ACTION_MSG = "[% l('This action might take a while to complete. Continue?') %]";
     s.CONFIRM_LONG_RUNNING_ACTION_ALL_ROWS_TITLE = "[% l('Are you sure you want to load ALL items?') %]";
+    s.STOP_FINES_LOST = "[% l('Lost Materials') %]";
+    s.STOP_FINES_LONGOVERDUE = "[% l('Long Overdue') %]";
+    s.CIRC_OVERDUE = "[% l('Overdue') %]";
     s.YES = "[% l('Yes') %]";
     s.NO = "[% l('No') %]";
   }]);

diff --git a/Open-ILS/web/js/ui/default/staff/circ/patron/bills.js b/Open-ILS/web/js/ui/default/staff/circ/patron/bills.js
index 5c4bf55..c45fe53 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/circ/patron/bills.js
+++ b/Open-ILS/web/js/ui/default/staff/circ/patron/bills.js
@@ -251,16 +251,20 @@ function($scope , $q , $routeParams , egCore , egConfirmDialog , $location,
         isEnabled: true,
         template: function(item) {
             var icon = '';
+            var text = '';
             if (item['circulation.due_date'] && !item['circulation.checkin_time']) {
                 if (item['circulation.stop_fines'] == "LOST") {
                     icon = 'glyphicon-question-sign';
+                    text = egCore.strings.STOP_FINES_LOST;
                 } else if (item['circulation.stop_fines'] == "LONGOVERDUE") {
                     icon = 'glyphicon-exclamation-sign';
+                    text = egCore.strings.STOP_FINES_LONGOVERDUE;
                 } else {
                     icon = 'glyphicon-time';
+                    text = egCore.strings.CIRC_OVERDUE;
                 }
             }
-            return "<i class='glyphicon " + icon + "'></i>"
+            return "<i class='glyphicon " + icon + "' title='" + text + "' aria-hidden='true'></i><span class='sr-only'>" + text + "</span>";
         }
     }