L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-80197 forms: Added attributes to the calendar link

Browse Source 
The datepicker is not keyboard accessible when in a modal.

As we are using yui datepicker and the change is not simple, I added aria-hidden and tabindex properties to avoid screenreaders.
This commit is contained in:
Pedro Jordao
2024-02-19 21:11:52 -03:00
parent e4bbd79059
commit ab85e38732
4 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-debug.js
Vendored
+8 -2
View File
@@ -260,6 +260,14 @@ CALENDAR.prototype = {
this.toggle_calendar_image();
}
}, this);
// Get the calendarimage element by its ID and check if any of its parents have the modal-dialog class to
// know if the link is inside a modal, if so, set the aria-hidden and tabindex properties to the indicated values.
var calendarimageelement = document.getElementById(this.calendarimage.get('id'));
if (calendarimageelement.closest('.modal-dialog')) {
this.calendarimage.set('aria-hidden', true);
this.calendarimage.set('tabIndex', '-1');
}
},
focus_event: function(e) {
M.form.dateselector.cancel_any_timeout();
@@ -363,11 +371,9 @@ CALENDAR.prototype = {
// If the enable checkbox is not checked, disable the calendar image and prevent focus.
if (!this.enablecheckbox.get('checked')) {
this.calendarimage.addClass('disabled');
this.calendarimage.setAttribute('tabindex', -1);
this.release_calendar();
} else {
this.calendarimage.removeClass('disabled');
this.calendarimage.setAttribute('tabindex', 0);
}
}
};
lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector.js
Vendored
+8 -2
View File
@@ -260,6 +260,14 @@ CALENDAR.prototype = {
this.toggle_calendar_image();
}
}, this);
// Get the calendarimage element by its ID and check if any of its parents have the modal-dialog class to
// know if the link is inside a modal, if so, set the aria-hidden and tabindex properties to the indicated values.
var calendarimageelement = document.getElementById(this.calendarimage.get('id'));
if (calendarimageelement.closest('.modal-dialog')) {
this.calendarimage.set('aria-hidden', true);
this.calendarimage.set('tabIndex', '-1');
}
},
focus_event: function(e) {
M.form.dateselector.cancel_any_timeout();
@@ -363,11 +371,9 @@ CALENDAR.prototype = {
// If the enable checkbox is not checked, disable the calendar image and prevent focus.
if (!this.enablecheckbox.get('checked')) {
this.calendarimage.addClass('disabled');
this.calendarimage.setAttribute('tabindex', -1);
this.release_calendar();
} else {
this.calendarimage.removeClass('disabled');
this.calendarimage.setAttribute('tabindex', 0);
}
}
};
lib/form/yui/src/dateselector/js/calendar.js
Vendored
+8 -2
View File
@@ -52,6 +52,14 @@ CALENDAR.prototype = {
this.toggle_calendar_image();
}
}, this);
// Get the calendarimage element by its ID and check if any of its parents have the modal-dialog class to
// know if the link is inside a modal, if so, set the aria-hidden and tabindex properties to the indicated values.
var calendarimageelement = document.getElementById(this.calendarimage.get('id'));
if (calendarimageelement.closest('.modal-dialog')) {
this.calendarimage.set('aria-hidden', true);
this.calendarimage.set('tabIndex', '-1');
}
},
focus_event: function(e) {
M.form.dateselector.cancel_any_timeout();
@@ -155,11 +163,9 @@ CALENDAR.prototype = {
// If the enable checkbox is not checked, disable the calendar image and prevent focus.
if (!this.enablecheckbox.get('checked')) {
this.calendarimage.addClass('disabled');
this.calendarimage.setAttribute('tabindex', -1);
this.release_calendar();
} else {
this.calendarimage.removeClass('disabled');
this.calendarimage.setAttribute('tabindex', 0);
}
}
};