jQuery UI datepicker accessability fail

Question

Я использую виджет даты jQuery UI datepicker (см. API docs), но наш контролер соответствия доступности жалуется на изображение кнопки, которое он вставляет. В частности, это означает, что атрибут «buttonText» используется как «alt» и «title» на изображении кнопки.

Вход:

<input type='text' name='from' id='from' value=''> 

<script type='text/javascript'> 
$(document).ready(function() { 
    $('#from').datepicker({ 
     buttonImageOnly: true, 
     buttonImage:  '/img/calendar_icon_20x20.png', 
     buttonText:  'select date from calendar' 
     ... 
}); 
</script> 

И сгенерированный объект кнопка выглядит следующим образом:

<img class="ui-datepicker-trigger" src="/img/calendar_icon_20x20.png" 
    alt="select date from calendar" 
    title="select date from calendar"> 

Есть ли какой-нибудь способ сделать альт и названия не должны быть одинаковыми?

Answer 1

Глядя на код в вопросе, не существует прямой способ сделать это:

inst.trigger = $(this._get(inst, "buttonImageOnly") ? 
       $("<img/>").addClass(this._triggerClass) 
          .attr({ src: buttonImage, alt: buttonText, title: buttonText }) : 
       $("<button type='button'</button>") 
          .addClass(this._triggerClass) 
          .html(!buttonImage ? buttonText : $("<img/>") 
          .attr({ src: buttonImage, alt: buttonText, title: buttonText }))); 

Как ButtonText атрибут непосредственно применяется как к альт и титул свойств.

Варианты:

1. Каким-то образом изменить альт или название свойства после факта с JavaScript
2. сделать локальный вариант Jquery-интерфейса с дополнительным buttonTitle собственности (возможно правильный выбор, если изменения будут приниматься вверх по течению)
3. Сделайте местный вариант, который скорректирует заголовок (что мое ленивое я сделал)