Commit 878245e1 authored by Liam's avatar Liam Committed by Robert Lyon

Bug #1744191 - datepicker accessibility

-Changed keyboard shortcuts
-Added aria label to input block
-Changed help text
-Added application roles

Also updated datepicker so that picker time works in 24hr format

behatnotneeded

Change-Id: I73015ec689cd0947d4498b8bad014df79b7d4384
parent 388734cd
......@@ -60,6 +60,8 @@
16: "shift",
control: 17,
17: "control",
alt: 18,
18: "alt",
space: 32,
32: "space",
t: 84,
......@@ -176,9 +178,9 @@
}).append(a("<span>").addClass(d.icons.close)))), a("<table>").addClass("table-condensed").append(a("<tbody>").append(a("<tr>").append(b)))
},
G = function() {
var b = a("<div>").addClass("bootstrap-datetimepicker-widget dropdown-menu").attr("data-helptext", "Press the arrow keys to navigate by day, Ctrl+Left and Ctrl+Right to navigate by month, Ctrl+Up and Ctrl+Down to navigate by year, T to select the current date and time, H to switch to the time selector, Delete to clear the field, Escape to close"),
var b = a("<div>").addClass("bootstrap-datetimepicker-widget dropdown-menu").attr("aria-label", "Press the arrow keys to navigate by day, PageUp and PageDown to navigate by month, Alt+PageUp and Alt+PageDown to navigate by year, T to select the current date and time, H to switch to the time selector, Delete to clear the field, Escape to close").attr('role', 'dialog'),
c = a("<div>").addClass("datepicker").append(C()),
e = a("<div>").addClass("timepicker").attr("data-helptext", "Use the Up and Down keys pick the time, Ctrl+Up and Ctrl+Down to select the hour, Ctrl+Space to switch between AM and PM, H to switch to the date picker, Delete to clear the field, Escape to close").append(E()),
e = a("<div>").addClass("timepicker").attr("aria-label", "Use the Up and Down keys pick the time, Alt+PageUp and Alt+PageDown to select the hour, Ctrl+Space to switch between AM and PM, H to switch to the date picker, Delete to clear the field, Escape to close").append(E()),
f = a("<ul>").addClass("list-unstyled"),
g = a("<li>").addClass("picker-switch" + (d.collapse ? " accordion-toggle" : "")).append(F());
return d.inline && b.removeClass("dropdown-menu"), h && b.addClass("usetwentyfour"), z("s") && !h && b.addClass("wider"), d.sideBySide && B() && A() ? (b.addClass("timepicker-sbs"), "top" === d.toolbarPlacement && b.append(g), b.append(a("<div>").addClass("row").append(c.addClass("col-md-6")).append(e.addClass("col-md-6"))), "bottom" === d.toolbarPlacement && b.append(g), b) : ("top" === d.toolbarPlacement && f.append(g), B() && f.append(a("<li>").addClass(d.collapse && A() ? "collapse in" : "").append(c)), "default" === d.toolbarPlacement && f.append(g), A() && f.append(a("<li>").addClass(d.collapse && B() ? "collapse" : "").append(e)), "bottom" === d.toolbarPlacement && f.append(g), b.append(f))
......@@ -308,7 +310,7 @@
type: "dp.classify",
date: b,
classNames: k
}), c.append('<td data-action="selectDay" data-day="' + b.format("L") + '" aria-label="' + b.format("LLLL") + '"' + (b.isSame(y(), "d") ? " aria-current='date'" : "") + 'class="' + k.join(" ") + '">' + b.date() + "</td>"), b.add(1, "d");
}), c.append('<td data-action="selectDay" data-day="' + b.format("L") + '" aria-label="' + b.format("LLLL") + '"' + (b.isSame(y(), "d") ? " aria-current='date' role='button'" : "" ) + 'class="' + k.join(" ") + '">' + b.date() + "</td>"), b.add(1, "d");
h.find("tbody").empty().append(j), T(), U(), V()
}
},
......@@ -908,16 +910,16 @@
var b = this.date() || this.getMoment();
a.find(".datepicker").is(":visible") ? this.date(b.clone().add(7, "d")) : this.date(b.clone().subtract(this.stepping(), "m"))
},
"control up": function(a) {
"alt pageDown": function(a) {
if (a) {
var b = this.date() || this.getMoment();
a.find(".datepicker").is(":visible") ? this.date(b.clone().subtract(1, "y")) : this.date(b.clone().add(1, "h"))
a.find(".datepicker").is(":visible") ? this.date(b.clone().subtract(1, "y")) : this.date(b.clone().subtract(1, "h"))
}
},
"control down": function(a) {
"alt pageUp": function(a) {
if (a) {
var b = this.date() || this.getMoment();
a.find(".datepicker").is(":visible") ? this.date(b.clone().add(1, "y")) : this.date(b.clone().subtract(1, "h"))
a.find(".datepicker").is(":visible") ? this.date(b.clone().add(1, "y")) : this.date(b.clone().add(1, "h"))
}
},
left: function(a) {
......@@ -932,13 +934,13 @@
a.find(".datepicker").is(":visible") && this.date(b.clone().add(1, "d"))
}
},
"control left": function(a) {
"pageDown": function(a) {
if (a) {
var b = this.date() || this.getMoment();
a.find(".datepicker").is(":visible") && this.date(b.clone().subtract(1, "M"))
}
},
"control right": function(a) {
"pageUp": function(a) {
if (a) {
var b = this.date() || this.getMoment();
a.find(".datepicker").is(":visible") && this.date(b.clone().add(1, "M"))
......
......@@ -59,7 +59,9 @@ function pieform_element_calendar(Pieform $form, $element) {
// Build the HTML
$result = '<span class="hasDatepickerwrapper"><input type="text"'
. $form->element_attributes($element)
. ' value="' . $value . '"></span>';
. ' value="' . $value . '"
aria-label="Edit the field using the following format YYYY / MM / DD, HH colon MM, a m or p m"
></span>';
$result .= '
<script type="application/javascript">
var input_' . $id . ' = jQuery("input#' . $id . '");
......@@ -205,15 +207,16 @@ function pieform_element_calendar_convert_timeformat($format) {
// they get passed through printf.
$format = str_replace('%%', '%', $format);
// Replacements as per http://momentjs.com/docs/#/displaying/format/
$replacements = array(
'%k' => "H", // Hour (24-hour, no leading 0)
'%H' => 'hh', // Hour (24-hour, 2 digits)
'%H' => 'HH', // Hour (24-hour, 2 digits)
'%l' => "h", // Hour (12-hour, no leading 0)
'%I' => 'hh', // Hour (12-hour, 2 digits)
'%M' => 'mm', // Minute (2 digits)
'%S' => 'a', // Second (2 digits)
'%P' => 't', // am or pm for AM/PM
'%p' => 'T', // AM or PM for AM/PM
'%S' => 'ss', // Second (2 digits)
'%P' => 'a', // am or pm for AM/PM
'%p' => 'A', // AM or PM for AM/PM
);
return str_replace(
array_keys($replacements),
......
......@@ -89,12 +89,12 @@
</td>
<td class="text-center js-date short" data-name='from'>
<div class="date-picker js-date-picker js-hide-empty {% if (o.presets.empty) { %}hidden{% } %}">
<div class="hasDatepickerwrapperacl"><input type="text" name="accesslist[{%=o.id%}][startdate]" class="form-control pull-left" data-setmin="true" setdatatarget="to" value="{%=o.presets.startdate%}" aria-label="Date from (Edit the field using the following format, year / month / day, hours colon minutes, a m or p m.)" {% if (o.presets.locked) { %}disabled{% } %}></div>
<div class="hasDatepickerwrapperacl"><input type="text" name="accesslist[{%=o.id%}][startdate]" class="form-control pull-left" data-setmin="true" setdatatarget="to" value="{%=o.presets.startdate%}" aria-label="Date from (Edit the field using the following format, YYYY / MM / DD, hours colon minutes, a m or p m.)" {% if (o.presets.locked) { %}disabled{% } %}></div>
</div>
</td>
<td class="text-center js-date short" data-name='to'>
<div class="date-picker js-date-picker js-hide-empty {% if (o.presets.empty) { %}hidden{% } %}">
<div class="hasDatepickerwrapperacl"><input type="text" name="accesslist[{%=o.id%}][stopdate]" class="form-control pull-left " data-setmax="true" setdatatarget="from" value="{%=o.presets.stopdate%}" aria-label="Date to (Edit the field using the following format, year / month / day, hours colon minutes, a m or p m.)" value="{%=o.presets.stopdate%}" {% if (o.presets.locked) { %}disabled{% } %}></div>
<div class="hasDatepickerwrapperacl"><input type="text" name="accesslist[{%=o.id%}][stopdate]" class="form-control pull-left " data-setmax="true" setdatatarget="from" value="{%=o.presets.stopdate%}" aria-label="Date to (Edit the field using the following format, YYYY / MM / DD, hours colon minutes, a m or p m.)" value="{%=o.presets.stopdate%}" {% if (o.presets.locked) { %}disabled{% } %}></div>
</div>
</td>
{% if (o.viewtype !== "profile") { %}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment