library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix: Adapt datpicker.js for a11y

Browse Source
This commit is contained in:
Mikolaj Wolicki 2019-12-14 11:34:29 +01:00 committed by Felix Nagel
parent 7c6a9f0128
commit b864cd103a
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/widgets/datepicker.js
View File

@ -99,7 +99,9 @@ function Datepicker() {
firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ... 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 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 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 this._defaults = { // Global defaults for all the date picker instances
showOn: "focus", // "focus" for popup on focus, showOn: "focus", // "focus" for popup on focus,
@ -1910,7 +1912,8 @@ $.extend( Datepicker.prototype, {
( printDate.getTime() === today.getTime() ? " ui-state-highlight" : "" ) + ( printDate.getTime() === today.getTime() ? " ui-state-highlight" : "" ) +
( printDate.getTime() === currentDate.getTime() ? " ui-state-active" : "" ) + // highlight selected day ( printDate.getTime() === currentDate.getTime() ? " ui-state-active" : "" ) + // highlight selected day
( otherMonth ? " ui-priority-secondary" : "" ) + // distinguish dates from other months ( 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.setDate( printDate.getDate() + 1 );
printDate = this._daylightSavingAdjust( printDate ); printDate = this._daylightSavingAdjust( printDate );
} }
@ -1940,6 +1943,8 @@ $.extend( Datepicker.prototype, {
changeMonth = this._get( inst, "changeMonth" ), changeMonth = this._get( inst, "changeMonth" ),
changeYear = this._get( inst, "changeYear" ), changeYear = this._get( inst, "changeYear" ),
showMonthAfterYear = this._get( inst, "showMonthAfterYear" ), showMonthAfterYear = this._get( inst, "showMonthAfterYear" ),
selectMonthLabel = this._get( inst, "selectMonthLabel" ),
selectYearLabel = this._get( inst, "selectYearLabel" ),
html = "<div class='ui-datepicker-title'>", html = "<div class='ui-datepicker-title'>",
monthHtml = ""; monthHtml = "";
@ -1949,7 +1954,7 @@ $.extend( Datepicker.prototype, {
} else { } else {
inMinYear = ( minDate && minDate.getFullYear() === drawYear ); inMinYear = ( minDate && minDate.getFullYear() === drawYear );
inMaxYear = ( maxDate && maxDate.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++ ) { for ( month = 0; month < 12; month++ ) {
if ( ( !inMinYear || month >= minDate.getMonth() ) && ( !inMaxYear || month <= maxDate.getMonth() ) ) { if ( ( !inMinYear || month >= minDate.getMonth() ) && ( !inMaxYear || month <= maxDate.getMonth() ) ) {
monthHtml += "<option value='" + month + "'" + monthHtml += "<option value='" + month + "'" +
@ -1984,7 +1989,7 @@ $.extend( Datepicker.prototype, {
endYear = Math.max( year, determineYear( years[ 1 ] || "" ) ); endYear = Math.max( year, determineYear( years[ 1 ] || "" ) );
year = ( minDate ? Math.max( year, minDate.getFullYear() ) : year ); year = ( minDate ? Math.max( year, minDate.getFullYear() ) : year );
endYear = ( maxDate ? Math.min( endYear, maxDate.getFullYear() ) : endYear ); 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++ ) { for ( ; year <= endYear; year++ ) {
inst.yearshtml += "<option value='" + year + "'" + inst.yearshtml += "<option value='" + year + "'" +
( year === drawYear ? " selected='selected'" : "" ) + ( year === drawYear ? " selected='selected'" : "" ) +