diff options
| -rw-r--r-- | ui/widgets/datepicker.js | 13 |
1 files changed, 9 insertions, 4 deletions
diff --git a/ui/widgets/datepicker.js b/ui/widgets/datepicker.js index 4fd8843cf..830dc5863 100644 --- a/ui/widgets/datepicker.js +++ b/ui/widgets/datepicker.js @@ -99,7 +99,9 @@ function Datepicker() { firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ... isRTL: false, // True if right-to-left language, false if left-to-right showMonthAfterYear: false, // True if the year select precedes month, false for month then year - yearSuffix: "" // Additional text to append to the year in the month headers + yearSuffix: "", // Additional text to append to the year in the month headers, + selectMonthLabel: "Select month", // Invisible label for month selector + selectYearLabel: "Select year" // Invisible label for year selector }; this._defaults = { // Global defaults for all the date picker instances showOn: "focus", // "focus" for popup on focus, @@ -1910,7 +1912,8 @@ $.extend( Datepicker.prototype, { ( printDate.getTime() === today.getTime() ? " ui-state-highlight" : "" ) + ( printDate.getTime() === currentDate.getTime() ? " ui-state-active" : "" ) + // highlight selected day ( otherMonth ? " ui-priority-secondary" : "" ) + // distinguish dates from other months - "' href='#'>" + printDate.getDate() + "</a>" ) ) + "</td>"; // display selectable date + "' href='#' aria-current='" + ( printDate.getTime() === currentDate.getTime() ? "true" : "false" ) + // mark date as selected for screen reader + "'>" + printDate.getDate() + "</a>" ) ) + "</td>"; // display selectable date printDate.setDate( printDate.getDate() + 1 ); printDate = this._daylightSavingAdjust( printDate ); } @@ -1940,6 +1943,8 @@ $.extend( Datepicker.prototype, { changeMonth = this._get( inst, "changeMonth" ), changeYear = this._get( inst, "changeYear" ), showMonthAfterYear = this._get( inst, "showMonthAfterYear" ), + selectMonthLabel = this._get( inst, "selectMonthLabel" ), + selectYearLabel = this._get( inst, "selectYearLabel" ), html = "<div class='ui-datepicker-title'>", monthHtml = ""; @@ -1949,7 +1954,7 @@ $.extend( Datepicker.prototype, { } else { inMinYear = ( minDate && minDate.getFullYear() === drawYear ); inMaxYear = ( maxDate && maxDate.getFullYear() === drawYear ); - monthHtml += "<select class='ui-datepicker-month' data-handler='selectMonth' data-event='change'>"; + monthHtml += "<select class='ui-datepicker-month' aria-label='" + selectMonthLabel + "' data-handler='selectMonth' data-event='change'>"; for ( month = 0; month < 12; month++ ) { if ( ( !inMinYear || month >= minDate.getMonth() ) && ( !inMaxYear || month <= maxDate.getMonth() ) ) { monthHtml += "<option value='" + month + "'" + @@ -1984,7 +1989,7 @@ $.extend( Datepicker.prototype, { endYear = Math.max( year, determineYear( years[ 1 ] || "" ) ); year = ( minDate ? Math.max( year, minDate.getFullYear() ) : year ); endYear = ( maxDate ? Math.min( endYear, maxDate.getFullYear() ) : endYear ); - inst.yearshtml += "<select class='ui-datepicker-year' data-handler='selectYear' data-event='change'>"; + inst.yearshtml += "<select class='ui-datepicker-year' aria-label='" + selectYearLabel + "' data-handler='selectYear' data-event='change'>"; for ( ; year <= endYear; year++ ) { inst.yearshtml += "<option value='" + year + "'" + ( year === drawYear ? " selected='selected'" : "" ) + |