Sync with Kendo UI Professional

Author: Kendo Bot

docs/api/javascript/ui/datepicker.md

@@ -101,9 +101,13 @@ The effect(s) to use when playing the open animation. Multiple effects should be
 
 The duration of the open animation in milliseconds.
 
-### ARIATemplate `String`*(default: "Current focused date is #=kendo.toString(data.current, 'D')#")*
+### ARIATemplate `String`*(default: "Current focused #=data.valueType# is #=data.text#")*
 
- Specifies a template used to populate the value of the aria-label attribute of the currently focused cell of the calendar.
+ Specifies a template used to populate the value of the aria-label attribute of the currently focused cell of the calendar. The parameters available for the template are:
+
+* `current` - The current focused date.
+* `valueType` - The focused item value type - month, year and etc.
+* `text` - A text representing the focused value.
 
 #### Example
 

docs/api/javascript/ui/daterangepicker.md

@@ -11,9 +11,13 @@ Represents the Kendo UI DateRangePicker widget. Inherits from [Widget](/api/java
 
 ## Configuration
 
-### ARIATemplate `String`*(default: "Current focused date is #=kendo.toString(data.current, 'D')#")*
+### ARIATemplate `String`*(default: "Current focused #=data.valueType# is #=data.text#")*
 
- Specifies a template used to populate value of the aria-label attribute.
+ Specifies a template used to populate value of the aria-label attribute of the currently focused cell of the calendar..The parameters available for the template are:
+
+* `current` - The current focused date.
+* `valueType` - The focused item value type - month, year and etc.
+* `text` - A text representing the focused value.
 
 #### Example
 

docs/api/javascript/ui/datetimepicker.md

@@ -100,9 +100,13 @@ The effect(s) to use when playing the open animation. Multiple effects should be
 
 The duration of the open animation in milliseconds.
 
-### ARIATemplate `String`*(default: "Current focused date is #=kendo.toString(data.current, 'G')#")*
+### ARIATemplate `String`*(default: "Current focused #=data.valueType# is #=data.text#")*
 
- Specifies a template used to populate value of the aria-label attribute.
+ Specifies a template used to populate value of the aria-label attribute of the currently focused cell of the calendar. The parameters available for the template are:
+
+* `current` - The current focused date.
+* `valueType` - The focused item value type - month, year and etc.
+* `text` - A text representing the focused value.
 
 #### Example
 

src/kendo.calendar.js

@@ -1340,6 +1340,26 @@ var __meta__ = { // jshint ignore:line
             }
 
             that.footer = footer !== false ? template(footerTemplate, { useWithBlock: false }) : null;
+        },
+
+        _updateAria: function (ariaTemplate, date) {
+            var that = this;
+            var cell = that._cell;
+            var valueType = that.view().valueType();
+            var current = date || that.current();
+            var text;
+
+            if (valueType === "month") {
+                text = kendo.toString(current, "MMMM");
+            } else if (valueType === "date") {
+                text = kendo.toString(current, "D");
+            } else {
+                text = cell.text();
+            }
+
+            cell.attr("aria-label", ariaTemplate({ current: current, valueType: valueType, text: text }));
+
+            return cell.attr("id");
         }
     });
 
@@ -1526,6 +1546,9 @@ var __meta__ = { // jshint ignore:line
             },
             toDateString: function(date) {
                 return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate();
+            },
+            valueType: function () {
+                return "date";
             }
         },
         {
@@ -1601,6 +1624,9 @@ var __meta__ = { // jshint ignore:line
             },
             toDateString: function(date) {
                 return date.getFullYear() + "/" + date.getMonth() + "/1";
+            },
+            valueType: function () {
+                return "month";
             }
         },
         {
@@ -1652,6 +1678,9 @@ var __meta__ = { // jshint ignore:line
             },
             toDateString: function(date) {
                 return date.getFullYear() + "/0/1";
+            },
+            valueType: function () {
+                return "year";
             }
         },
         {
@@ -1726,6 +1755,9 @@ var __meta__ = { // jshint ignore:line
             toDateString: function(date) {
                 var year = date.getFullYear();
                 return (year - year % 10) + "/0/1";
+            },
+            valueType: function () {
+                return "decade";
             }
         }]
     };

src/kendo.datepicker.js

@@ -403,7 +403,7 @@ var __meta__ = { // jshint ignore:line
             month: {},
             dates: [],
             disableDates: null,
-            ARIATemplate: 'Current focused date is #=kendo.toString(data.current, "D")#',
+            ARIATemplate: 'Current focused #=data.valueType# is #=data.text#',
             dateInput: false,
             weekNumber: false,
             componentType: "classic"
@@ -761,7 +761,7 @@ var __meta__ = { // jshint ignore:line
         },
 
         _template: function() {
-            this._ariaTemplate = template(this.options.ARIATemplate);
+            this._ariaTemplate = proxy(template(this.options.ARIATemplate), this);
         },
 
         _createDateInput: function(options) {
@@ -781,17 +781,15 @@ var __meta__ = { // jshint ignore:line
         },
 
         _updateARIA: function(date) {
-            var cell;
             var that = this;
             var calendar = that.dateView.calendar;
-            if(that.element && that.element.length) {
+
+            if (that.element && that.element.length) {
                 that.element[0].removeAttribute("aria-activedescendant");
             }
-            if (calendar) {
-                cell = calendar._cell;
-                cell.attr("aria-label", that._ariaTemplate({ current: date || calendar.current() }));
 
-                that.element.attr("aria-activedescendant", cell.attr("id"));
+            if (calendar) {
+                that.element.attr("aria-activedescendant", calendar._updateAria(that._ariaTemplate, date));
             }
         }
     });

src/kendo.datetimepicker.js

@@ -158,7 +158,7 @@ var __meta__ = { // jshint ignore:line
             depth: MONTH,
             animation: {},
             month : {},
-            ARIATemplate: 'Current focused date is #=kendo.toString(data.current, "d")#',
+            ARIATemplate: 'Current focused #=data.valueType# is #=data.text#',
             dateButtonText: "Open the date view",
             timeButtonText: "Open the time view",
             dateInput: false,
@@ -946,7 +946,7 @@ var __meta__ = { // jshint ignore:line
         },
 
         _template: function() {
-            this._ariaTemplate = kendo.template(this.options.ARIATemplate);
+            this._ariaTemplate = $.proxy(kendo.template(this.options.ARIATemplate), this);
         },
 
         _createDateInput: function(options) {
@@ -971,19 +971,15 @@ var __meta__ = { // jshint ignore:line
         },
 
         _updateARIA: function(date) {
-            var cell;
             var that = this;
             var calendar = that.dateView.calendar;
 
-            if(that.element && that.element.length) {
+            if (that.element && that.element.length) {
                 that.element[0].removeAttribute(ARIA_ACTIVEDESCENDANT);
             }
 
             if (calendar) {
-                cell = calendar._cell;
-                cell.attr("aria-label", that._ariaTemplate({ current: date || calendar.current() }));
-
-                that.element.attr(ARIA_ACTIVEDESCENDANT, cell.attr("id"));
+                that.element.attr(ARIA_ACTIVEDESCENDANT, calendar._updateAria(that._ariaTemplate, date));
             }
         },
         _popup: function(){

tests/datepicker/aria.js

@@ -110,5 +110,65 @@ it("DatePicker removes aria-label from previous cell", function() {
     assert.equal(cell.length, 1);
 });
 
+});
+
+describe("kendo.ui.DatePicker ARIA defaults", function () {
+    beforeEach(function() {
+
+        input = $("<input id='test' />").appendTo(Mocha.fixture);
+    });
+    afterEach(function() {
+
+        instance.destroy();
+        kendo.destroy(Mocha.fixture);
     });
+
+it("DatePicker add correct aria-label for date", function() {
+    instance = new DatePicker(input);
+    instance.open();
+
+    var date = kendo.date.today();
+    instance.element.trigger("focus");
+    var cell = instance.dateView.calendar.element.find("td.k-state-focused");
+
+    assert.equal(cell.attr("aria-label"), "Current focused date is "+kendo.toString(date, "D"));
+});
+
+it("DatePicker add correct aria-label for year", function() {
+    var date = kendo.date.today();
+    instance = new DatePicker(input, { start: "year"});
+    instance.open();
+    instance.element.trigger("focus");
+    var cell = instance.dateView.calendar.element.find("td.k-state-focused");
+    assert.equal(cell.attr("aria-label"), "Current focused month is "+kendo.toString(date, "MMMM"));
+});
+
+it("DatePicker add evaluates ariatemplate in correct context", function() {
+    var date = kendo.date.today();
+    instance = new DatePicker(input, { ARIATemplate: "Current focused date is #= this.dateView.calendar.view().name === 'month' ? 'test': kendo.toString(data.current, 'MMM yyyy') #"});
+    instance.open();
+    instance.element.trigger("focus");
+    var cell = instance.dateView.calendar.element.find("td.k-state-focused");
+    assert.equal(cell.attr("aria-label"), "Current focused date is test");
+});
+
+it("DatePicker add correct aria-label for decade", function() {
+    var date = kendo.date.today();
+    instance = new DatePicker(input, { start: "decade"});
+    instance.open();
+    instance.element.trigger("focus");
+    var cell = instance.dateView.calendar.element.find("td.k-state-focused");
+    assert.equal(cell.attr("aria-label"),  "Current focused year is "+kendo.toString(date, "yyyy"));
+});
+
+it("DatePicker add correct aria-label for century", function() {
+    instance = new DatePicker(input, { start: "century", value: new Date(2021, 0, 1)});
+    instance.open();
+    instance.element.trigger("focus");
+    var cell = instance.dateView.calendar.element.find("td.k-state-focused");
+
+    assert.equal(cell.attr("aria-label"), "Current focused decade is 2020 - 2029");
+});
+
+});
 }());

tests/datetimepicker/aria.js

@@ -123,4 +123,62 @@
         });
 
     });
+
+describe("kendo.ui.DateTimePicker ARIA defaults", function () {
+        beforeEach(function() {
+    
+            input = $("<input id='test' />").appendTo(Mocha.fixture);
+        });
+        afterEach(function() {
+    
+            instance.destroy();
+            kendo.destroy(Mocha.fixture);
+        });
+    
+    it("DateTimePicker add correct aria-label for date", function() {
+        instance = new DateTimePicker(input);
+        instance.open();
+    
+        var date = kendo.date.today();
+        instance.element.trigger("focus");
+        var cell = instance.dateView.calendar.element.find("td.k-state-focused");
+    
+        assert.equal(cell.attr("aria-label"), "Current focused date is "+kendo.toString(date, "D"));
+    });
+
+    it("DateTimePicker add evaluates ariatemplate in correct context", function() {
+        instance = new DateTimePicker(input, { ARIATemplate: "Current focused date is #= this.dateView.calendar.view().name === 'month' ? 'test': kendo.toString(data.current, 'MMM yyyy') #"});
+        instance.open();
+        instance.element.trigger("focus");
+        var cell = instance.dateView.calendar.element.find("td.k-state-focused");
+        assert.equal(cell.attr("aria-label"), "Current focused date is test");
+    });
+    
+    it("DateTimePicker add correct aria-label for year", function() {
+        var date = kendo.date.today();
+        instance = new DateTimePicker(input, { start: "year"});
+        instance.open();
+        instance.element.trigger("focus");
+        var cell = instance.dateView.calendar.element.find("td.k-state-focused");
+        assert.equal(cell.attr("aria-label"), "Current focused month is "+kendo.toString(date, "MMMM"));
+    });
+    
+    it("DateTimePicker add correct aria-label for decade", function() {
+        var date = kendo.date.today();
+        instance = new DateTimePicker(input, { start: "decade"});
+        instance.open();
+        instance.element.trigger("focus");
+        var cell = instance.dateView.calendar.element.find("td.k-state-focused");
+        assert.equal(cell.attr("aria-label"),  "Current focused year is "+kendo.toString(date, "yyyy"));
+    });
+    
+    it("DateTimePicker add correct aria-label for century", function() {
+        instance = new DateTimePicker(input, { start: "century", value: new Date(2021, 0, 1)});
+        instance.open();
+        instance.element.trigger("focus");
+        var cell = instance.dateView.calendar.element.find("td.k-state-focused");
+    
+        assert.equal(cell.attr("aria-label"), "Current focused decade is 2020 - 2029");
+    });
+});
 }());