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>

diff --git a/Open-ILS/src/templates/staff/share/t_datetime.tt2 b/Open-ILS/src/templates/staff/share/t_datetime.tt2
index 1f505db..dbeb719 100644 (file)
--- 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>