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.11.0