v17.2.36 is released

Author: pipeline

controls/base/dist/ej2-base.umd.min.js

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-base",
-	"version": "17.2.34",
+	"version": "17.2.35",
 	"description": "A common package of Essential JS 2 base libraries, methods and class definitions",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/base/dist/ej2-base.umd.min.js.map

@@ -56,9 +56,10 @@ export function compile(templateString: string, helper?: Object): (data: Object
                 blazorTemplates[templateId].push(data);
             }
             // tslint:disable-next-line:no-any
-            return propName === 'rowTemplate' ? [createElement('tr', { id: blazorId })] as any :
+            return propName === 'rowTemplate' ? [createElement('tr', { id: blazorId, className: 'e-blazor-template' })] as any :
                 // tslint:disable-next-line:no-any
-                [createElement('div', { id: blazorId })] as any;
+                [createElement('div', { id: blazorId, className: 'e-blazor-template' })] as any;
+
         }
         if (typeof result === 'string') {
             if (HAS_SVG.test(result)) {

controls/base/dist/es6/ej2-base.es2015.js

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-buttons",
-	"version": "17.2.28",
+	"version": "17.2.35",
 	"description": "A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/base/dist/es6/ej2-base.es2015.js.map

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 17.2.36 (2019-07-24)
+
+### DatePicker
+
+#### Bug Fixes
+
+- `#236828` - Resolved the `accessibility` related issue in DatePicker.
+
 ## 17.2.35 (2019-07-17)
 
 ### DatePicker

controls/base/dist/es6/ej2-base.es5.js

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-calendars",
-	"version": "17.2.34",
+	"version": "17.2.35",
 	"description": "A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/base/dist/es6/ej2-base.es5.js.map

@@ -2410,6 +2410,17 @@ describe('Calendar', () => {
                 expect(calendar.currentView()).toBe("Decade");
                 expect(document.querySelector('.e-title').textContent).toBe('2010 - 2019');
             });
+            it(' control +up arrow changed to shift+up test case ', () => {
+                calendar = new Calendar({ value: new Date('3/3/2017'), keyConfigs:{controlUp: 'shift+38'} });
+                calendar.appendTo('#calendar');
+                expect(document.querySelector('.e-title').textContent).toBe('March 2017');
+                calendar.keyActionHandle(keyEventArgs);
+                expect(calendar.currentView()).toBe("Year");
+                expect(document.querySelector('.e-title').textContent).toBe('2017');
+                calendar.keyActionHandle(keyEventArgs);
+                expect(calendar.currentView()).toBe("Decade");
+                expect(document.querySelector('.e-title').textContent).toBe('2010 - 2019');
+            });
             it(' home and end button testing on year and decade view ', () => {
                 calendar = new Calendar({ value: new Date('3/3/2017') });
                 calendar.appendTo('#calendar');

controls/base/dist/global/ej2-base.min.js

@@ -2502,6 +2502,21 @@ describe('Datepicker', () => {
             datePicker.inputKeyActionHandle(keyEventArgs);
             expect(datePicker.currentView()).toBe("Month");
         });
+        it('alt + down arrow key changed shift + down arrow test case ', () => {
+            datePicker = new DatePicker({
+                start: 'Decade',
+                keyConfigs: {altDownArrow: 'shift+downarrow'}
+            });
+            datePicker.appendTo('#date');
+            datePicker.element.focus();
+            keyEventArgs.action = 'altDownArrow';
+            datePicker.inputKeyActionHandle(keyEventArgs);
+            keyEventArgs.action = 'controlDown';
+            datePicker.inputKeyActionHandle(keyEventArgs);
+            expect(datePicker.currentView()).toBe("Year");
+            datePicker.inputKeyActionHandle(keyEventArgs);
+            expect(datePicker.currentView()).toBe("Month");
+        });
         it('keyboard action with mouse click on next icon test case ', () => {
             datePicker = new DatePicker({
                 value: new Date('2/2/2017')

controls/base/dist/global/ej2-base.min.js.map

@@ -128,6 +128,97 @@ export interface CalendarBaseModel extends ComponentModel{
      */
     enablePersistence?: boolean;
 
+    /**
+     * Customizes the key actions in Calendar.
+     * For example, when using German keyboard, the key actions can be customized using these shortcuts.
+     * @default null
+     * @blazorType object
+     * 
+     * <table> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * Key action<br/></td><td colSpan=1 rowSpan=1> 
+     * Key<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * controlUp<br/></td><td colSpan=1 rowSpan=1> 
+     * ctrl+38<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * controlDown<br/></td><td colSpan=1 rowSpan=1> 
+     * ctrl+40<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * select<br/></td><td colSpan=1 rowSpan=1> 
+     * enter<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * home<br/></td><td colSpan=1 rowSpan=1> 
+     * home<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * end<br/></td><td colSpan=1 rowSpan=1> 
+     * end<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * pageUp<br/></td><td colSpan=1 rowSpan=1> 
+     * pageup<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * pageDown<br/></td><td colSpan=1 rowSpan=1> 
+     * pagedown<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * shiftPageUp<br/></td><td colSpan=1 rowSpan=1> 
+     * shift+pageup<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * shiftPageDown<br/></td><td colSpan=1 rowSpan=1> 
+     * shift+pagedown<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * controlHome<br/></td><td colSpan=1 rowSpan=1> 
+     * ctrl+home<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * controlEnd<br/></td><td colSpan=1 rowSpan=1> 
+     * ctrl+end<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * altUpArrow<br/></td><td colSpan=1 rowSpan=1> 
+     * alt+uparrow<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * spacebar<br/></td><td colSpan=1 rowSpan=1> 
+     * space<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * altRightArrow<br/></td><td colSpan=1 rowSpan=1> 
+     * alt+rightarrow<br/></td></tr>  
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * altLeftArrow<br/></td><td colSpan=1 rowSpan=1> 
+     * alt+leftarrow<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * moveDown<br/></td><td colSpan=1 rowSpan=1> 
+     * downarrow<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * moveUp<br/></td><td colSpan=1 rowSpan=1> 
+     * uparrow<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * moveLeft<br/></td><td colSpan=1 rowSpan=1> 
+     * leftarrow<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * moveRight<br/></td><td colSpan=1 rowSpan=1> 
+     * rightarrow<br/></td></tr> 
+     * </table>
+     */
+    keyConfigs?: { [key: string]: string };
+
     /**
      * Triggers when Calendar is created.
      * @event

controls/base/package.json

@@ -95,7 +95,7 @@ export class CalendarBase extends Component<HTMLElement> implements INotifyPrope
     protected calendarElement: HTMLElement;
     protected isPopupClicked: boolean = false;
     protected isDateSelected: boolean = true;
-    protected keyConfigs: { [key: string]: string } = {
+    protected defaultKeyConfigs: { [key: string]: string } = {
         controlUp: 'ctrl+38',
         controlDown: 'ctrl+40',
         moveDown: 'downarrow',
@@ -237,6 +237,97 @@ export class CalendarBase extends Component<HTMLElement> implements INotifyPrope
      */
     @Property(false)
     public enablePersistence: boolean;
+    /**     
+     * Customizes the key actions in Calendar.
+     * For example, when using German keyboard, the key actions can be customized using these shortcuts.
+     * @default null
+     * @blazorType object
+     * 
+     * <table> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * Key action<br/></td><td colSpan=1 rowSpan=1> 
+     * Key<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * controlUp<br/></td><td colSpan=1 rowSpan=1> 
+     * ctrl+38<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * controlDown<br/></td><td colSpan=1 rowSpan=1> 
+     * ctrl+40<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * select<br/></td><td colSpan=1 rowSpan=1> 
+     * enter<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * home<br/></td><td colSpan=1 rowSpan=1> 
+     * home<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * end<br/></td><td colSpan=1 rowSpan=1> 
+     * end<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * pageUp<br/></td><td colSpan=1 rowSpan=1> 
+     * pageup<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * pageDown<br/></td><td colSpan=1 rowSpan=1> 
+     * pagedown<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * shiftPageUp<br/></td><td colSpan=1 rowSpan=1> 
+     * shift+pageup<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * shiftPageDown<br/></td><td colSpan=1 rowSpan=1> 
+     * shift+pagedown<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * controlHome<br/></td><td colSpan=1 rowSpan=1> 
+     * ctrl+home<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * controlEnd<br/></td><td colSpan=1 rowSpan=1> 
+     * ctrl+end<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * altUpArrow<br/></td><td colSpan=1 rowSpan=1> 
+     * alt+uparrow<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * spacebar<br/></td><td colSpan=1 rowSpan=1> 
+     * space<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * altRightArrow<br/></td><td colSpan=1 rowSpan=1> 
+     * alt+rightarrow<br/></td></tr>  
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * altLeftArrow<br/></td><td colSpan=1 rowSpan=1> 
+     * alt+leftarrow<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * moveDown<br/></td><td colSpan=1 rowSpan=1> 
+     * downarrow<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * moveUp<br/></td><td colSpan=1 rowSpan=1> 
+     * uparrow<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * moveLeft<br/></td><td colSpan=1 rowSpan=1> 
+     * leftarrow<br/></td></tr> 
+     * <tr> 
+     * <td colSpan=1 rowSpan=1> 
+     * moveRight<br/></td><td colSpan=1 rowSpan=1> 
+     * rightarrow<br/></td></tr> 
+     * </table>
+     */
+    @Property(null)
+    public keyConfigs: { [key: string]: string };
     /** 
      * Triggers when Calendar is created.
      * @event
@@ -540,21 +631,22 @@ export class CalendarBase extends Component<HTMLElement> implements INotifyPrope
     }
     protected wireEvents(): void {
         EventHandler.add(this.headerTitleElement, 'click', this.navigateTitle, this);
+        this.defaultKeyConfigs = (extend(this.defaultKeyConfigs, this.keyConfigs) as { [key: string]: string });
         if (this.getModuleName() === 'calendar') {
             this.keyboardModule = new KeyboardEvents(
                 <HTMLElement>this.element,
                 {
                     eventName: 'keydown',
                     keyAction: this.keyActionHandle.bind(this),
-                    keyConfigs: this.keyConfigs
+                    keyConfigs: this.defaultKeyConfigs
                 });
         } else {
             this.keyboardModule = new KeyboardEvents(
                 <HTMLElement>this.calendarElement,
                 {
                     eventName: 'keydown',
                     keyAction: this.keyActionHandle.bind(this),
-                    keyConfigs: this.keyConfigs
+                    keyConfigs: this.defaultKeyConfigs
                 });
         }
     }
@@ -1385,10 +1477,24 @@ export class CalendarBase extends Component<HTMLElement> implements INotifyPrope
         let focusedEle: Element = this.tableBodyElement.querySelector('tr td.e-focused-date');
         let selectedEle: Element = this.tableBodyElement.querySelector('tr td.e-selected');
         let type: string = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
-        let title: string = this.globalize.formatDate(this.currentDate, { type: 'dateTime', skeleton: 'full', calendar: type });
+        let title: string;
+        let view: String = this.currentView();
+        if (view === 'Month') {
+            title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: 'full', calendar: type });
+        } else if (view === 'Year') {
+            if (type !== 'islamic') {
+                title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: 'yMMMM', calendar: type });
+            } else {
+                title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: 'GyMMM', calendar: type });
+            }
+        } else {
+            title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: 'y', calendar: type });
+        }
         if (selectedEle || focusedEle) {
-            (focusedEle || selectedEle).setAttribute('aria-selected', 'true');
-            (focusedEle || selectedEle).setAttribute('aria-label', 'The current focused date is ' + '' + title);
+            if (!isNullOrUndefined(selectedEle)) {
+                selectedEle.setAttribute('aria-selected', 'true');
+            }
+            (focusedEle || selectedEle).setAttribute('aria-label', title);
             id = (focusedEle || selectedEle).getAttribute('id');
 
         }