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

MDL-80195 forms: Keep dropdown menu open when tabbing into datepicker

Browse Source 
When accessing a datepicker that is within a dropdown menu using the tab
key, the navigation sequence was changed since the datepicker code is
not rendered within the dropdown menu element, thus the dropdown was
closed as it was understood that we were not more inside it.
Furthermore, when exiting the datepicker by pressing tab, as the
dropdown was closed, the navigation jumped to the first element on the
page, which is the link to Skip to main content.

To resolve this, a validation was added that keeps the dropdown menu
open if the datepicker is open and accessed via the tab key.
This commit is contained in:
Pedro Jordao
2024-04-11 11:03:38 +02:00
committed by Sara Arjona
parent 076f6e9464
commit 95c957791e
4 changed files with 35 additions and 2 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
+11
View File
@@ -316,6 +316,17 @@ CALENDAR.prototype = {
// When the user tab out the calendar, close it.
Y.one(document.body).on('keyup', function(e) {
// If the calendar is open and we try to access it by pressing tab, we check if it is inside a Bootstrap dropdown-menu,
// if so, we keep the dropdown open while navigation takes place in the calendar.
if (M.form.dateselector.currentowner && e.keyCode === 9) {
e.stopPropagation();
var calendarimageelement = document.getElementById(M.form.dateselector.currentowner.calendarimage.get('id'));
if (M.form.dateselector.calendar.get('focused') && calendarimageelement.closest('.dropdown-menu') &&
!calendarimageelement.closest('.dropdown-menu').classList.contains("show")) {
calendarimageelement.closest('.dropdown-menu').classList.add('show');
}
}
// hide the calendar if we press a key and the calendar is not focussed, or if we press ESC in the calendar.
if ((M.form.dateselector.currentowner === this && !M.form.dateselector.calendar.get('focused')) ||
((e.keyCode === 27) && M.form.dateselector.calendar.get('focused'))) {
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
+11
View File
@@ -316,6 +316,17 @@ CALENDAR.prototype = {
// When the user tab out the calendar, close it.
Y.one(document.body).on('keyup', function(e) {
// If the calendar is open and we try to access it by pressing tab, we check if it is inside a Bootstrap dropdown-menu,
// if so, we keep the dropdown open while navigation takes place in the calendar.
if (M.form.dateselector.currentowner && e.keyCode === 9) {
e.stopPropagation();
var calendarimageelement = document.getElementById(M.form.dateselector.currentowner.calendarimage.get('id'));
if (M.form.dateselector.calendar.get('focused') && calendarimageelement.closest('.dropdown-menu') &&
!calendarimageelement.closest('.dropdown-menu').classList.contains("show")) {
calendarimageelement.closest('.dropdown-menu').classList.add('show');
}
}
// hide the calendar if we press a key and the calendar is not focussed, or if we press ESC in the calendar.
if ((M.form.dateselector.currentowner === this && !M.form.dateselector.calendar.get('focused')) ||
((e.keyCode === 27) && M.form.dateselector.calendar.get('focused'))) {
lib/form/yui/src/dateselector/js/calendar.js
Vendored
+11
View File
@@ -108,6 +108,17 @@ CALENDAR.prototype = {
// When the user tab out the calendar, close it.
Y.one(document.body).on('keyup', function(e) {
// If the calendar is open and we try to access it by pressing tab, we check if it is inside a Bootstrap dropdown-menu,
// if so, we keep the dropdown open while navigation takes place in the calendar.
if (M.form.dateselector.currentowner && e.keyCode === 9) {
e.stopPropagation();
var calendarimageelement = document.getElementById(M.form.dateselector.currentowner.calendarimage.get('id'));
if (M.form.dateselector.calendar.get('focused') && calendarimageelement.closest('.dropdown-menu') &&
!calendarimageelement.closest('.dropdown-menu').classList.contains("show")) {
calendarimageelement.closest('.dropdown-menu').classList.add('show');
}
}
// hide the calendar if we press a key and the calendar is not focussed, or if we press ESC in the calendar.
if ((M.form.dateselector.currentowner === this && !M.form.dateselector.calendar.get('focused')) ||
((e.keyCode === 27) && M.form.dateselector.calendar.get('focused'))) {