From b17e1036ffd59c2689ec71f45ed83c87d724e9be Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Sat, 30 Aug 2025 11:05:14 +0800
Subject: [PATCH] MDL-86501 form: Fix date selector calendar button mark up

* Make the calendar icon decorative.
* Mark up the calendar button accordingly:
  - Render it as a `<button type="button">`
  - Add label using `aria-label`.
  - Use a more suitable label of "Date picker" rather than "Calendar"
  - Add a `title` attribute to show a tooltip for sighted users.
  - Disable/enable it accordingly by setting/removing the `disabled`
    attribute.
---
 lang/en/calendar.php                            |  1 +
 lib/form/dateselector.php                       | 17 ++++++++++++++---
 lib/form/datetimeselector.php                   | 17 ++++++++++++++---
 .../moodle-form-dateselector-debug.js           |  6 +++---
 .../moodle-form-dateselector-min.js             |  4 ++--
 .../moodle-form-dateselector.js                 |  6 +++---
 lib/form/yui/src/dateselector/js/calendar.js    |  6 +++---
 7 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/lang/en/calendar.php b/lang/en/calendar.php
index 0a7079e1c24..10ab33b1e21 100644
--- a/lang/en/calendar.php
+++ b/lang/en/calendar.php
@@ -53,6 +53,7 @@ $string['categoryevents'] = 'Category events';
 $string['courses'] = 'Courses';
 $string['customexport'] = 'Custom range ({$a->timestart} - {$a->timeend})';
 $string['daily'] = 'Daily';
+$string['datepicker'] = 'Date picker';
 $string['day'] = 'Day';
 $string['dayeventsmany'] = '{$a->num} events, {$a->day}';
 $string['dayeventsnone'] = 'No events, {$a}';
diff --git a/lib/form/dateselector.php b/lib/form/dateselector.php
index 8abfcf5c931..b45414b9346 100644
--- a/lib/form/dateselector.php
+++ b/lib/form/dateselector.php
@@ -138,9 +138,20 @@ class MoodleQuickForm_date_selector extends MoodleQuickForm_group {
         }
         // The YUI2 calendar only supports the gregorian calendar type so only display the calendar image if this is being used.
         if ($calendartype->get_name() === 'gregorian') {
-            $image = $OUTPUT->pix_icon('i/calendar', get_string('calendar', 'calendar'), 'moodle');
-            $this->_elements[] = $this->createFormElement('link', 'calendar',
-                    null, '#', $image);
+            $image = $OUTPUT->pix_icon('i/calendar', '');
+            $this->_elements[] = $this->createFormElement(
+                'button',
+                'calendar',
+                $image,
+                [
+                    'type' => 'button',
+                    'title' => get_string('datepicker', 'calendar'),
+                    'aria-label' => get_string('datepicker', 'calendar'),
+                ],
+                [
+                    'customclassoverride' => 'btn-link btn-sm icon-no-margin',
+                ],
+            );
         }
         foreach ($this->_elements as $element){
             if (method_exists($element, 'setHiddenLabel')){
diff --git a/lib/form/datetimeselector.php b/lib/form/datetimeselector.php
index 1e06f5fa6ad..c94f8d36692 100644
--- a/lib/form/datetimeselector.php
+++ b/lib/form/datetimeselector.php
@@ -157,9 +157,20 @@ class MoodleQuickForm_date_time_selector extends MoodleQuickForm_group {
         }
         // The YUI2 calendar only supports the gregorian calendar type so only display the calendar image if this is being used.
         if ($calendartype->get_name() === 'gregorian') {
-            $image = $OUTPUT->pix_icon('i/calendar', get_string('calendar', 'calendar'), 'moodle');
-            $this->_elements[] = $this->createFormElement('link', 'calendar',
-                    null, '#', $image);
+            $image = $OUTPUT->pix_icon('i/calendar', '');
+            $this->_elements[] = $this->createFormElement(
+                'button',
+                'calendar',
+                $image,
+                [
+                    'type' => 'button',
+                    'title' => get_string('datepicker', 'calendar'),
+                    'aria-label' => get_string('datepicker', 'calendar'),
+                ],
+                [
+                    'customclassoverride' => 'btn-link btn-sm icon-no-margin',
+                ],
+            );
         }
         foreach ($this->_elements as $element){
             if (method_exists($element, 'setHiddenLabel')){
diff --git a/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-debug.js b/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-debug.js
index ace194f94dc..c76a2835228 100644
--- a/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-debug.js
+++ b/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-debug.js
@@ -240,7 +240,7 @@ CALENDAR.prototype = {
         }, this);
 
         // Loop through the input fields.
-        var inputs = this.get('node').all('input, a');
+        var inputs = this.get('node').all('input, button');
         inputs.each(function(node) {
             // Check if the current node is a calendar image field.
             if (node.get('name').match(/\[calendar\]/)) {
@@ -381,10 +381,10 @@ CALENDAR.prototype = {
     toggle_calendar_image: function() {
         // 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('disabled');
             this.release_calendar();
         } else {
-            this.calendarimage.removeClass('disabled');
+            this.calendarimage.removeAttribute('disabled');
         }
     }
 };
diff --git a/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-min.js b/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-min.js
index 8c16c43bd61..9afe3fae831 100644
--- a/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-min.js
+++ b/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-min.js
@@ -1,2 +1,2 @@
-YUI.add("moodle-form-dateselector",function(n,e){var t,o;n.mix(n.Node.prototype,{firstOptionValue:function(){return"select"===this.get("nodeName").toLowerCase()&&this.one("option").get("value")},lastOptionValue:function(){return"select"===this.get("nodeName").toLowerCase()&&this.all("option").item(this.optionSize()-1).get("value")},optionSize:function(){return"select"===this.get("nodeName").toLowerCase()&&parseInt(this.all("option").size(),10)},selectedOptionValue:function(){return"select"===this.get("nodeName").toLowerCase()&&this.all("option").item(this.get("selectedIndex")).get("value")}}),M.form=M.form||{},M.form.dateselector={panel:null,calendar:null,currentowner:null,hidetimeout:null,repositiontimeout:null,init_date_selectors:function(e){null===this.panel&&this.initPanel(e),n.all(".fdate_time_selector").each(function(){e.node=this,new t(e)}),n.all(".fdate_selector").each(function(){e.node=this,new t(e)})},initPanel:function(e){this.panel=new n.Overlay({visible:!1,bodyContent:n.Node.create('<div id="dateselector-calendar-content"></div>'),id:"dateselector-calendar-panel",constrain:!0}),this.panel.render(document.body),this.panel.on("focus",function(){var e,t=0;n.all(" [role=dialog], [role=menubar], .moodle-has-zindex").each(function(e){e=this.findZIndex(e);t<e&&(t=e)},this),e=(t+1).toString(),n.one("#dateselector-calendar-panel").setStyle("zIndex",e)},this),this.panel.on("heightChange",this.fix_position,this),n.one("#dateselector-calendar-panel").on("click",function(e){e.halt()}),n.one(document.body).on("click",this.document_click,this),this.calendar=new o({contentBox:"#dateselector-calendar-content",width:"300px",showPrevMonth:!0,showNextMonth:!0,firstdayofweek:parseInt(e.firstdayofweek,10),WEEKDAYS_MEDIUM:[e.sun,e.mon,e.tue,e.wed,e.thu,e.fri,e.sat]})},findZIndex:function(e){e=e.getStyle("zIndex")||e.ancestor().getStyle("zIndex");return e?parseInt(e,10):0},cancel_any_timeout:function(){this.hidetimeout&&(clearTimeout(this.hidetimeout),this.hidetimeout=null),this.repositiontimeout&&(clearTimeout(this.repositiontimeout),this.repositiontimeout=null)},delayed_reposition:function(){this.repositiontimeout&&(clearTimeout(this.repositiontimeout),this.repositiontimeout=null),this.repositiontimeout=setTimeout(this.fix_position,500)},fix_position:function(){var e;this.currentowner&&(e=[n.WidgetPositionAlign.BL,n.WidgetPositionAlign.TL],window.right_to_left()&&(e=[n.WidgetPositionAlign.BR,n.WidgetPositionAlign.TR]),this.panel.set("align",{node:this.currentowner.get("node").one("select"),points:e}))},document_click:function(e){this.currentowner&&(this.currentowner.get("node").ancestor("div").contains(e.target)?setTimeout(function(){M.form.dateselector.cancel_any_timeout()},100):this.currentowner.release_calendar(e))}},o=function(){o.superclass.constructor.apply(this,arguments)},n.extend(o,n.Calendar,{initializer:function(e){this.set("strings.very_short_weekdays",e.WEEKDAYS_MEDIUM),this.set("strings.first_weekday",e.firstdayofweek)}},{NAME:"Calendar",ATTRS:{}}),M.form_moodlecalendar=M.form_moodlecalendar||{},M.form_moodlecalendar.initializer=function(e){return new o(e)},(t=function(){t.superclass.constructor.apply(this,arguments)}).prototype={panel:null,yearselect:null,monthselect:null,dayselect:null,calendarimage:null,enablecheckbox:null,closepopup:!0,initializer:function(){var e=this.get("node").all("select");e.each(function(e){e.get("name").match(/\[year\]/)?this.yearselect=e:e.get("name").match(/\[month\]/)?this.monthselect=e:e.get("name").match(/\[day\]/)&&(this.dayselect=e),e.after("change",this.handle_select_change,this)},this),this.get("node").all("input, a").each(function(e){e.get("name").match(/\[calendar\]/)?(e.on("click",this.focus_event,this),this.calendarimage=e):(e.on("click",this.toggle_calendar_image,this),this.enablecheckbox=e),this.calendarimage&&this.enablecheckbox&&this.toggle_calendar_image()},this),document.getElementById(this.calendarimage.get("id")).closest(".modal-dialog")&&(this.calendarimage.set("aria-hidden",!0),this.calendarimage.set("tabIndex","-1"))},focus_event:function(e){M.form.dateselector.cancel_any_timeout(),M.form.dateselector.currentowner===this?this.release_calendar():null!==this.enablecheckbox&&!this.enablecheckbox.get("checked")||this.claim_calendar(),e.preventDefault()},handle_select_change:function(){this.closepopup=!1,this.set_date_from_selects(),this.closepopup=!0},claim_calendar:function(){M.form.dateselector.cancel_any_timeout(),M.form.dateselector.currentowner!==this&&(M.form.dateselector.currentowner&&M.form.dateselector.currentowner.release_calendar(),M.form.dateselector.currentowner!==this&&(this.connect_handlers(),this.set_date_from_selects()),M.form.dateselector.currentowner=this,M.form.dateselector.calendar.set("minimumDate",new Date(this.yearselect.firstOptionValue(),0,1)),M.form.dateselector.calendar.set("maximumDate",new Date(this.yearselect.lastOptionValue(),11,31)),M.form.dateselector.panel.show(),M.form.dateselector.calendar.show(),M.form.dateselector.fix_position(),setTimeout(function(){M.form.dateselector.cancel_any_timeout()},100),M.form.dateselector.calendar.focus(),n.one(document.body).on("keyup",function(e){var t;M.form.dateselector.currentowner&&9===e.keyCode&&(e.stopPropagation(),t=document.getElementById(M.form.dateselector.currentowner.calendarimage.get("id")),M.form.dateselector.calendar.get("focused")&&t.closest(".dropdown-menu")&&!t.closest(".dropdown-menu").classList.contains("show")&&t.closest(".dropdown-menu").classList.add("show")),(M.form.dateselector.currentowner===this&&!M.form.dateselector.calendar.get("focused")||27===e.keyCode&&M.form.dateselector.calendar.get("focused"))&&(this.calendarimage.focus(),this.release_calendar())},this))},set_date_from_selects:function(){var e=parseInt(this.yearselect.get("value"),10),t=parseInt(this.monthselect.get("value"),10)-1,n=parseInt(this.dayselect.get("value"),10),e=new Date(e,t,n);M.form.dateselector.calendar.deselectDates(),M.form.dateselector.calendar.selectDates([e]),
-M.form.dateselector.calendar.set("date",e),M.form.dateselector.calendar.render(),e.getDate()!==n&&(this.dayselect.set("value",e.getDate()),this.monthselect.set("value",e.getMonth()+1))},set_selects_from_date:function(e){var e=e.newSelection[0],t=n.DataType.Date.format(e,{format:"%Y"}),t=t-this.yearselect.firstOptionValue();this.yearselect.set("selectedIndex",t),this.monthselect.set("selectedIndex",n.DataType.Date.format(e,{format:"%m"})-this.monthselect.firstOptionValue()),this.dayselect.set("selectedIndex",n.DataType.Date.format(e,{format:"%d"})-this.dayselect.firstOptionValue()),M.form.dateselector.currentowner&&this.closepopup&&this.release_calendar()},connect_handlers:function(){M.form.dateselector.calendar.on("selectionChange",this.set_selects_from_date,this,!0)},release_calendar:function(e){var t=M.form.dateselector.currentowner===this;M.form.dateselector.panel.hide(),M.form.dateselector.calendar.detach("selectionChange",this.set_selects_from_date),M.form.dateselector.calendar.hide(),M.form.dateselector.currentowner=null,!t||null!=e&&"click"===e.type||this.calendarimage.focus()},toggle_calendar_image:function(){this.enablecheckbox.get("checked")?this.calendarimage.removeClass("disabled"):(this.calendarimage.addClass("disabled"),this.release_calendar())}},n.extend(t,n.Base,t.prototype,{NAME:"Date Selector",ATTRS:{firstdayofweek:{validator:n.Lang.isString},node:{setter:function(e){return n.one(e)}}}})},"@VERSION@",{requires:["base","node","overlay","calendar"]});
\ No newline at end of file
+YUI.add("moodle-form-dateselector",function(n,e){var t,o;n.mix(n.Node.prototype,{firstOptionValue:function(){return"select"===this.get("nodeName").toLowerCase()&&this.one("option").get("value")},lastOptionValue:function(){return"select"===this.get("nodeName").toLowerCase()&&this.all("option").item(this.optionSize()-1).get("value")},optionSize:function(){return"select"===this.get("nodeName").toLowerCase()&&parseInt(this.all("option").size(),10)},selectedOptionValue:function(){return"select"===this.get("nodeName").toLowerCase()&&this.all("option").item(this.get("selectedIndex")).get("value")}}),M.form=M.form||{},M.form.dateselector={panel:null,calendar:null,currentowner:null,hidetimeout:null,repositiontimeout:null,init_date_selectors:function(e){null===this.panel&&this.initPanel(e),n.all(".fdate_time_selector").each(function(){e.node=this,new t(e)}),n.all(".fdate_selector").each(function(){e.node=this,new t(e)})},initPanel:function(e){this.panel=new n.Overlay({visible:!1,bodyContent:n.Node.create('<div id="dateselector-calendar-content"></div>'),id:"dateselector-calendar-panel",constrain:!0}),this.panel.render(document.body),this.panel.on("focus",function(){var e,t=0;n.all(" [role=dialog], [role=menubar], .moodle-has-zindex").each(function(e){e=this.findZIndex(e);t<e&&(t=e)},this),e=(t+1).toString(),n.one("#dateselector-calendar-panel").setStyle("zIndex",e)},this),this.panel.on("heightChange",this.fix_position,this),n.one("#dateselector-calendar-panel").on("click",function(e){e.halt()}),n.one(document.body).on("click",this.document_click,this),this.calendar=new o({contentBox:"#dateselector-calendar-content",width:"300px",showPrevMonth:!0,showNextMonth:!0,firstdayofweek:parseInt(e.firstdayofweek,10),WEEKDAYS_MEDIUM:[e.sun,e.mon,e.tue,e.wed,e.thu,e.fri,e.sat]})},findZIndex:function(e){e=e.getStyle("zIndex")||e.ancestor().getStyle("zIndex");return e?parseInt(e,10):0},cancel_any_timeout:function(){this.hidetimeout&&(clearTimeout(this.hidetimeout),this.hidetimeout=null),this.repositiontimeout&&(clearTimeout(this.repositiontimeout),this.repositiontimeout=null)},delayed_reposition:function(){this.repositiontimeout&&(clearTimeout(this.repositiontimeout),this.repositiontimeout=null),this.repositiontimeout=setTimeout(this.fix_position,500)},fix_position:function(){var e;this.currentowner&&(e=[n.WidgetPositionAlign.BL,n.WidgetPositionAlign.TL],window.right_to_left()&&(e=[n.WidgetPositionAlign.BR,n.WidgetPositionAlign.TR]),this.panel.set("align",{node:this.currentowner.get("node").one("select"),points:e}))},document_click:function(e){this.currentowner&&(this.currentowner.get("node").ancestor("div").contains(e.target)?setTimeout(function(){M.form.dateselector.cancel_any_timeout()},100):this.currentowner.release_calendar(e))}},o=function(){o.superclass.constructor.apply(this,arguments)},n.extend(o,n.Calendar,{initializer:function(e){this.set("strings.very_short_weekdays",e.WEEKDAYS_MEDIUM),this.set("strings.first_weekday",e.firstdayofweek)}},{NAME:"Calendar",ATTRS:{}}),M.form_moodlecalendar=M.form_moodlecalendar||{},M.form_moodlecalendar.initializer=function(e){return new o(e)},(t=function(){t.superclass.constructor.apply(this,arguments)}).prototype={panel:null,yearselect:null,monthselect:null,dayselect:null,calendarimage:null,enablecheckbox:null,closepopup:!0,initializer:function(){var e=this.get("node").all("select");e.each(function(e){e.get("name").match(/\[year\]/)?this.yearselect=e:e.get("name").match(/\[month\]/)?this.monthselect=e:e.get("name").match(/\[day\]/)&&(this.dayselect=e),e.after("change",this.handle_select_change,this)},this),this.get("node").all("input, button").each(function(e){e.get("name").match(/\[calendar\]/)?(e.on("click",this.focus_event,this),this.calendarimage=e):(e.on("click",this.toggle_calendar_image,this),this.enablecheckbox=e),this.calendarimage&&this.enablecheckbox&&this.toggle_calendar_image()},this),document.getElementById(this.calendarimage.get("id")).closest(".modal-dialog")&&(this.calendarimage.set("aria-hidden",!0),this.calendarimage.set("tabIndex","-1"))},focus_event:function(e){M.form.dateselector.cancel_any_timeout(),M.form.dateselector.currentowner===this?this.release_calendar():null!==this.enablecheckbox&&!this.enablecheckbox.get("checked")||this.claim_calendar(),e.preventDefault()},handle_select_change:function(){this.closepopup=!1,this.set_date_from_selects(),this.closepopup=!0},claim_calendar:function(){M.form.dateselector.cancel_any_timeout(),M.form.dateselector.currentowner!==this&&(M.form.dateselector.currentowner&&M.form.dateselector.currentowner.release_calendar(),M.form.dateselector.currentowner!==this&&(this.connect_handlers(),this.set_date_from_selects()),M.form.dateselector.currentowner=this,M.form.dateselector.calendar.set("minimumDate",new Date(this.yearselect.firstOptionValue(),0,1)),M.form.dateselector.calendar.set("maximumDate",new Date(this.yearselect.lastOptionValue(),11,31)),M.form.dateselector.panel.show(),M.form.dateselector.calendar.show(),M.form.dateselector.fix_position(),setTimeout(function(){M.form.dateselector.cancel_any_timeout()},100),M.form.dateselector.calendar.focus(),n.one(document.body).on("keyup",function(e){var t;M.form.dateselector.currentowner&&9===e.keyCode&&(e.stopPropagation(),t=document.getElementById(M.form.dateselector.currentowner.calendarimage.get("id")),M.form.dateselector.calendar.get("focused")&&t.closest(".dropdown-menu")&&!t.closest(".dropdown-menu").classList.contains("show")&&t.closest(".dropdown-menu").classList.add("show")),(M.form.dateselector.currentowner===this&&!M.form.dateselector.calendar.get("focused")||27===e.keyCode&&M.form.dateselector.calendar.get("focused"))&&(this.calendarimage.focus(),this.release_calendar())},this))},set_date_from_selects:function(){var e=parseInt(this.yearselect.get("value"),10),t=parseInt(this.monthselect.get("value"),10)-1,n=parseInt(this.dayselect.get("value"),10),e=new Date(e,t,n);M.form.dateselector.calendar.deselectDates(),M.form.dateselector.calendar.selectDates([e]
+),M.form.dateselector.calendar.set("date",e),M.form.dateselector.calendar.render(),e.getDate()!==n&&(this.dayselect.set("value",e.getDate()),this.monthselect.set("value",e.getMonth()+1))},set_selects_from_date:function(e){var e=e.newSelection[0],t=n.DataType.Date.format(e,{format:"%Y"}),t=t-this.yearselect.firstOptionValue();this.yearselect.set("selectedIndex",t),this.monthselect.set("selectedIndex",n.DataType.Date.format(e,{format:"%m"})-this.monthselect.firstOptionValue()),this.dayselect.set("selectedIndex",n.DataType.Date.format(e,{format:"%d"})-this.dayselect.firstOptionValue()),M.form.dateselector.currentowner&&this.closepopup&&this.release_calendar()},connect_handlers:function(){M.form.dateselector.calendar.on("selectionChange",this.set_selects_from_date,this,!0)},release_calendar:function(e){var t=M.form.dateselector.currentowner===this;M.form.dateselector.panel.hide(),M.form.dateselector.calendar.detach("selectionChange",this.set_selects_from_date),M.form.dateselector.calendar.hide(),M.form.dateselector.currentowner=null,!t||null!=e&&"click"===e.type||this.calendarimage.focus()},toggle_calendar_image:function(){this.enablecheckbox.get("checked")?this.calendarimage.removeAttribute("disabled"):(this.calendarimage.setAttribute("disabled"),this.release_calendar())}},n.extend(t,n.Base,t.prototype,{NAME:"Date Selector",ATTRS:{firstdayofweek:{validator:n.Lang.isString},node:{setter:function(e){return n.one(e)}}}})},"@VERSION@",{requires:["base","node","overlay","calendar"]});
\ No newline at end of file
diff --git a/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector.js b/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector.js
index ace194f94dc..c76a2835228 100644
--- a/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector.js
+++ b/lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector.js
@@ -240,7 +240,7 @@ CALENDAR.prototype = {
         }, this);
 
         // Loop through the input fields.
-        var inputs = this.get('node').all('input, a');
+        var inputs = this.get('node').all('input, button');
         inputs.each(function(node) {
             // Check if the current node is a calendar image field.
             if (node.get('name').match(/\[calendar\]/)) {
@@ -381,10 +381,10 @@ CALENDAR.prototype = {
     toggle_calendar_image: function() {
         // 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('disabled');
             this.release_calendar();
         } else {
-            this.calendarimage.removeClass('disabled');
+            this.calendarimage.removeAttribute('disabled');
         }
     }
 };
diff --git a/lib/form/yui/src/dateselector/js/calendar.js b/lib/form/yui/src/dateselector/js/calendar.js
index a652048ad0c..dc89cd369d7 100644
--- a/lib/form/yui/src/dateselector/js/calendar.js
+++ b/lib/form/yui/src/dateselector/js/calendar.js
@@ -32,7 +32,7 @@ CALENDAR.prototype = {
         }, this);
 
         // Loop through the input fields.
-        var inputs = this.get('node').all('input, a');
+        var inputs = this.get('node').all('input, button');
         inputs.each(function(node) {
             // Check if the current node is a calendar image field.
             if (node.get('name').match(/\[calendar\]/)) {
@@ -173,10 +173,10 @@ CALENDAR.prototype = {
     toggle_calendar_image: function() {
         // 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('disabled');
             this.release_calendar();
         } else {
-            this.calendarimage.removeClass('disabled');
+            this.calendarimage.removeAttribute('disabled');
         }
     }
 };