From 11d1b5383dd6e4795ea0873be8eab7b33c092ff6 Mon Sep 17 00:00:00 2001
From: Jane Sandberg <sandbej@linnbenton.edu>
Date: Tue, 9 Oct 2018 07:37:56 -0700
Subject: [PATCH] LP1796903: Make date picker calendar button more accessible

To test:

1) After applying this commit, navigate to a place in the Web client
that includes a date picker (such as the checkin screen).
2) Hover over the calendar button with your mouse and confirm that a
tooltip appears.
3) Verify that the button element has an aria-label attribute.
4) Verify that the button element has an aria-pressed attribute that
is false when the date picker is closed; true when it is open.
5) Use a screen reader (like NVDA or ChromeVox).  Verify that when you
tab over to the date picker, the user is informed of the aria-label
and aria-pressed values

Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
---
 Open-ILS/src/templates/staff/share/t_datetime.tt2 | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/Open-ILS/src/templates/staff/share/t_datetime.tt2 b/Open-ILS/src/templates/staff/share/t_datetime.tt2
index 1f505db319..dbeb7193b5 100644
--- a/Open-ILS/src/templates/staff/share/t_datetime.tt2
+++ b/Open-ILS/src/templates/staff/share/t_datetime.tt2
@@ -18,8 +18,9 @@
         close-text="{{closeText}}"/>
       <span class="input-group-btn">
         <button type="button" class="btn btn-default"
-          ng-click="datePickerIsOpen=!datePickerIsOpen">
-          <i class="glyphicon glyphicon-calendar"></i>
+          ng-click="datePickerIsOpen=!datePickerIsOpen"
+          aria-label="Select a date" aria-pressed="{{datePickerIsOpen || false}}">
+          <span class="glyphicon glyphicon-calendar" title="Select a date"></span>
         </button>
       </span>
     </div>
-- 
2.43.2