Как добавить ярлыки HTML-формы, совместимые с JAWS, в выпадающие меню месяца и дня в jQuery UI 1.10.4 datepicker

Question

Мы используем датпикер jQuery 1.10.4 с раскрывающимися списками месяца и года. К сожалению, эти выпадающие списки не имеют прикрепленных HTML-меток, которые нам нужны для требований к экранированию. Мы пытаемся найти обходное решение, которое делает , а не, непосредственно связать редактирование кода jQuery (что займет около 2 минут), чтобы мы не забыли об этом в следующий раз, когда обновим нашу версию jQuery. Отсутствие ярлыков - проблема доступности (a11y), которая важна для нашего сайта.

Поле HTML выглядит следующим образом:

<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"> 

Установка для DatePicker выглядит следующим образом:

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); 
}); 

Я могу увидеть ярлыки прямо сейчас, и они уродливы, но я я не очень беспокоюсь об этом, так как я говорю о JAWS, признающем их. Он читает их при первом открытии datepicker, но затем при последующем открытии он только считывает метку для поля dateOfBirth, а не для выпадающих меню. Кроме того, я вижу метки, которые я добавил в инструментах разработчика, JAWS просто не читает их.

Если вы не знакомы с JAWS, это может помочь мне узнать, как присоединить событие к datepicker, которое срабатывает прямо перед его визуализацией. Мне интересно, узнает ли кто-нибудь, знакомый с пользовательским интерфейсом jQuery. Я больше работаю над внутренним разработчиком, и внутренности jQuery мне незнакомы.

Answer 1

jQuery нуждается в event delegation, чтобы прикрепить элементы для JAWS, чтобы настойчиво их распознавать. Таким образом, это не имеет значения, если вы добавите больше материала позже или заберете его, он знает, что каждый раз будет выглядеть свежим.