Fix: Adapt datpicker.js for a11y

diff --git a/ui/widgets/datepicker.js b/ui/widgets/datepicker.js
index 4fd8843cfc759bba0f8845b73ed501a545a24e51..830dc5863a0037fefc7d6589b8e348ddce105d26 100644 (file)
--- 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'" : "" ) +