We are using the jQuery 1.10.4 datepicker with a month and year dropdowns. Unfortunately, these dropdowns do not have HTML labels attached, which we need for screenreader requirements. We have been trying to find a workaround that does not involve editing the jQuery code directly (which would take about 2 minutes) so that we don't forget about it next time we upgrade our jQuery version. The lack of labels is an accessibility (a11y) issue, which is essential to our site.
The HTML field looks like this:
<label for="dateOfBirth">Birth Date (mm/dd/yyyy) </label>
<input type="text" id="dateOfBirth" name="dateOfBirth" value="" class="datePick form-control form-text required hasDatepicker">
The setup for the datepicker looks like this:
function setupCalendarMonthYearLabels() {
if ($("select.ui-datepicker-month").attr('id') != 'ui-datepicker-month-select') {
$("select.ui-datepicker-month").attr('id', 'ui-datepicker-month-select');
}
if ($("select.ui-datepicker-month").attr('id') != 'ui-datepicker-month-select') {
$("select.ui-datepicker-month").attr('id', 'ui-datepicker-month-select');
}
if ($("#ui-datepicker-month-select-label").length==0) {
$("<label for='ui-datepicker-month-select' id='ui-datepicker-month-select-label'>Select month</label>").insertBefore("select.ui-datepicker-month");
}
if ($("#ui-datepicker-year-select-label").length==0) {
$("<label for='ui-datepicker-year-select' id='ui-datepicker-year-select-label'>Select year</label>").insertBefore("select.ui-datepicker-year");
}
}
$(function() {
$( ".datePick" ).datepicker({changeMonth: true, changeYear: true,yearRange : '-80:+10'});
$( ".datePick" ).focus(setupCalendarMonthYearLabels);
$( ".datePick" ).click(setupCalendarMonthYearLabels);
$( "body" ).on("focusin click change", "#ui-datepicker-div select", setupCalendarMonthYearLabels);
});
I can see the labels right now, and they are ugly, but I'm not so much concerned about that as I am about JAWS recognizing them. It reads them the when I first open the datepicker, but then on subsequent opens, it only reads the label for the dateOfBirth field, not for the dropdowns. Additionally, I can see the labels I added in the developer tools, JAWS just isn't reading them.
If you are unfamiliar with JAWS, it might help me to know how to attach an event to datepicker that gets fired right before it gets rendered. I am wondering if someone familiar with the jQuery UI would know. I am more of a back-end developer and jQuery internals are unfamiliar to me.