MDL-80197 forms: Added attributes to the calendar link

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.

lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-debug.js

@@ -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.js

@@ -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

@@ -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);
         }
     }
 };