@syncfusion/ej2-calendars 20.2.50 → 20.3.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.2.50
+*  version : 20.3.47
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-calendars@*",
-  "_id": "@syncfusion/ej2-calendars@20.2.46",
+  "_id": "@syncfusion/ej2-calendars@18.29.7",
   "_inBundle": false,
-  "_integrity": "sha512-P79N0+ovKdSyWvqQt39rUzhOf2MuGpS5CyFHNn4+ui8K5QY1ld38MdQKBfAMqlq+esyHrgnq/smaw0ef7Fde9g==",
+  "_integrity": "sha512-r5oATghsZmaxkIjMxERQi6aiK4xRGL4R/aBoxhg3RHjx6JHzKJbnx9PyV9yLMd4tg8fb5Bwa7dDWxKYVLuPcXg==",
   "_location": "/@syncfusion/ej2-calendars",
   "_phantomChildren": {},
   "_requested": {
@@ -32,8 +32,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-calendars"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-20.2.46.tgz",
-  "_shasum": "019e69e0c54925b505f9b888952d4afc033a7567",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-calendars/-/ej2-calendars-18.29.7.tgz",
+  "_shasum": "e84b6925e383db1cec6844879252bd260ab4dd68",
   "_spec": "@syncfusion/ej2-calendars@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -44,16 +44,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.2.48",
-    "@syncfusion/ej2-buttons": "~20.2.46",
-    "@syncfusion/ej2-inputs": "~20.2.48",
-    "@syncfusion/ej2-lists": "~20.2.46",
-    "@syncfusion/ej2-popups": "~20.2.49"
+    "@syncfusion/ej2-base": "~20.3.47",
+    "@syncfusion/ej2-buttons": "~20.3.47",
+    "@syncfusion/ej2-inputs": "~20.3.47",
+    "@syncfusion/ej2-lists": "~20.3.47",
+    "@syncfusion/ej2-popups": "~20.3.47"
   },
   "deprecated": false,
   "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.",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-calendars.es2015.js",
+  "es2015": "./dist/es6/ej2-calendars.es5.js",
   "homepage": "https://github.com/syncfusion/ej2-javascript-ui-controls#readme",
   "keywords": [
     "ej2",
@@ -81,6 +81,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.2.50",
+  "version": "20.3.47",
   "sideEffects": false
 }

package/src/calendar/calendar.js

@@ -134,7 +134,7 @@ var CalendarBase = /** @class */ (function (_super) {
                 this.calendarElement.classList.add(DEVICE);
             }
             attributes(this.calendarElement, {
-                'role': 'calendar'
+                'data-role': 'calendar'
             });
         }
         this.createHeader();
@@ -262,7 +262,7 @@ var CalendarBase = /** @class */ (function (_super) {
     };
     CalendarBase.prototype.createContent = function () {
         this.contentElement = this.createElement('div', { className: CONTENT });
-        this.table = this.createElement('table', { attrs: { tabIndex: '0', 'role': 'grid', 'aria-activedescendant': '' } });
+        this.table = this.createElement('table', { attrs: { tabIndex: '0', 'role': 'grid', 'aria-activedescendant': '', 'aria-labelledby': this.element.id } });
         if (this.getModuleName() === 'calendar') {
             this.element.appendChild(this.contentElement);
         }
@@ -894,7 +894,6 @@ var CalendarBase = /** @class */ (function (_super) {
             var year = startYear + rowIterator;
             localDate.setFullYear(year);
             var tdEle = this.dayCell(localDate);
-            attributes(tdEle, { 'role': 'gridcell' });
             var dayLink = this.createElement('span');
             dayLink.textContent = this.globalize.formatDate(localDate, {
                 format: null, type: 'dateTime', skeleton: 'y'
@@ -935,7 +934,7 @@ var CalendarBase = /** @class */ (function (_super) {
         var date = this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);
         var value = date.valueOf();
         var attrs = {
-            className: CELL, attrs: { 'id': '' + getUniqueID('' + value), 'aria-selected': 'false', 'role': 'gridcell' }
+            className: CELL, attrs: { 'id': '' + getUniqueID('' + value), 'aria-selected': 'false' }
         };
         return this.createElement('td', attrs);
     };
@@ -1009,7 +1008,7 @@ var CalendarBase = /** @class */ (function (_super) {
         var row = count;
         var rowIterator = 0;
         for (var dayCell = 0; dayCell < elements.length / count; ++dayCell) {
-            trEle = this.createElement('tr', { attrs: { 'role': 'row' } });
+            trEle = this.createElement('tr');
             for (rowIterator = 0 + rowIterator; rowIterator < row; rowIterator++) {
                 if (!elements[rowIterator].classList.contains('e-week-number') && !isNullOrUndefined(elements[rowIterator].children[0])) {
                     addClass([elements[rowIterator].children[0]], [LINK]);

package/src/calendar/islamic.js

@@ -354,14 +354,14 @@ var Islamic = /** @class */ (function () {
                 dayLink.textContent = this.calendarInstance.globalize.formatDate(localDate, { type: 'dateTime', format: 'y', calendar: 'islamic' });
                 if (islamicDate.year === parseInt(startHdrYr) - 1 || (year_1 < startFullYr) || (year_1 > endFullYr) && islamicDate.year !== parseInt(endHdrYr)) {
                     addClass([tdEle], OTHERMONTH);
-                    if (year_1 < new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()
-                        || year_1 > new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {
-                        addClass([tdEle], DISABLED);
-                    }
                 }
                 else if (year_1 < new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()
                     || year_1 > new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {
                     addClass([tdEle], DISABLED);
+                    if (year_1 < new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()
+                        || year_1 > new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {
+                        addClass([tdEle], DISABLED);
+                    }
                 }
                 else if (!isNullOrUndefined(value) &&
                     (this.getIslamicDate(localDate)).year ===

package/src/datepicker/datepicker.js

@@ -165,10 +165,9 @@ var DatePicker = /** @class */ (function (_super) {
     };
     DatePicker.prototype.createInput = function () {
         var ariaAttrs = {
-            'aria-live': 'assertive', 'aria-atomic': 'true',
-            'aria-haspopup': 'true', 'aria-activedescendant': 'null',
-            'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
-            'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-invalid': 'false'
+            'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-expanded': 'false',
+            'role': 'combobox', 'autocomplete': 'off', 'autocorrect': 'off',
+            'autocapitalize': 'off', 'spellcheck': 'false', 'aria-invalid': 'false'
         };
         if (this.getModuleName() === 'datepicker') {
             var l10nLocale = { placeholder: this.placeholder };
@@ -1372,8 +1371,7 @@ var DatePicker = /** @class */ (function (_super) {
         }
         var ariaAttrs = {
             'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-disabled': 'true',
-            'aria-haspopup': 'true', 'aria-activedescendant': 'null',
-            'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
+            'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
             'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'
         };
         if (this.inputElement) {
@@ -1698,11 +1696,15 @@ var DatePicker = /** @class */ (function (_super) {
     DatePicker.prototype.setAriaAttributes = function () {
         if (this.isCalendar()) {
             Input.addAttributes({ 'aria-expanded': 'true' }, this.inputElement);
-            attributes(this.inputElement, { 'aria-activedescendant': '' + this.setActiveDescendant() });
+            attributes(this.inputElement, { 'aria-owns': this.inputElement.id + '_options' });
+            if (this.value) {
+                attributes(this.inputElement, { 'aria-activedescendant': '' + this.setActiveDescendant() });
+            }
         }
         else {
             Input.addAttributes({ 'aria-expanded': 'false' }, this.inputElement);
-            attributes(this.inputElement, { 'aria-activedescendant': 'null' });
+            this.inputElement.removeAttribute('aria-owns');
+            this.inputElement.removeAttribute('aria-activedescendant');
         }
     };
     DatePicker.prototype.errorClass = function () {
@@ -1859,7 +1861,7 @@ var DatePicker = /** @class */ (function (_super) {
                     }
                     break;
             }
-            if (!this.isDynamicValueChanged) {
+            if (!this.isDynamicValueChanged && !this.isIconClicked) {
                 this.hide(null);
             }
             this.isDynamicValueChanged = false;

package/src/daterangepicker/daterangepicker.d.ts

@@ -169,6 +169,7 @@ export declare class DateRangePicker extends CalendarBase {
     private mobileRangePopupWrap;
     protected isAngular: boolean;
     protected preventChange: boolean;
+    protected isPropChanged: boolean;
     /**
      * Gets or sets the start and end date of the Calendar.
      * {% codeBlock src='daterangepicker/value/index.md' %}{% endcodeBlock %}

package/src/daterangepicker/daterangepicker.js

@@ -147,6 +147,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         _this.invalidValueString = null;
         _this.isAngular = false;
         _this.preventChange = false;
+        _this.isPropChanged = false;
         _this.dateRangeOptions = options;
         return _this;
     }
@@ -2334,7 +2335,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         if (this.enableRtl) {
             this.calendarElement.classList.add(RTL);
         }
-        attributes(this.calendarElement, { 'role': 'calendar' });
+        attributes(this.calendarElement, { 'data-role': 'calendar' });
         _super.prototype.createHeader.call(this);
         _super.prototype.createContent.call(this);
     };
@@ -2893,7 +2894,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {
             this.presetElement = this.createElement('div', { className: PRESETS, attrs: { 'tabindex': '0' } });
             var listTag = ListBase.createList(this.createElement, this.presetsItem, null, true);
-            attributes(listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });
+            attributes(listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options', 'tabindex': '0' });
             this.presetElement.appendChild(listTag);
             this.popupWrapper.appendChild(this.presetElement);
             var customElement = this.presetElement.querySelector('#custom_range');
@@ -2954,7 +2955,13 @@ var DateRangePicker = /** @class */ (function (_super) {
             enableRtl: this.enableRtl,
             zIndex: this.zIndex,
             open: function () {
-                attributes(_this.inputElement, { 'aria-expanded': 'true' });
+                attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options' });
+                if (_this.value) {
+                    attributes(_this.inputElement, { 'aria-activedescendant': _this.inputElement.id });
+                }
+                else {
+                    _this.inputElement.removeAttribute('aria-activedescendant');
+                }
                 addClass([_this.inputWrapper.buttons[0]], ACTIVE);
                 if (!_this.isMobile) {
                     if (_this.cancelButton) {
@@ -3002,6 +3009,8 @@ var DateRangePicker = /** @class */ (function (_super) {
             },
             close: function () {
                 attributes(_this.inputElement, { 'aria-expanded': 'false' });
+                _this.inputElement.removeAttribute('aria-owns');
+                _this.inputElement.removeAttribute('aria-activedescendant');
                 removeClass([_this.inputWrapper.buttons[0]], ACTIVE);
                 if (_this.isRangeIconClicked) {
                     _this.inputWrapper.container.children[1].focus();
@@ -3268,7 +3277,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         var target = e.target;
         if (!this.inputWrapper.container.contains(target) ||
-            (!isNullOrUndefined(this.popupObj) && !closest(target, '[id="' + this.popupWrapper.id + '"]') && e.type === 'mousedown')) {
+            (!isNullOrUndefined(this.popupObj) && !closest(target, '[id="' + this.popupWrapper.id + '"]') && e.type !== 'mousedown')) {
             if (e.type !== 'touchstart' && ((e.type === 'mousedown') ||
                 this.closeEventArgs && !this.closeEventArgs.cancel)) {
                 e.preventDefault();
@@ -3307,9 +3316,8 @@ var DateRangePicker = /** @class */ (function (_super) {
             buttons: [DATERANGEICON]
         }, this.createElement);
         attributes(this.inputElement, {
-            'aria-readonly': this.readonly ? 'true' : 'false', 'tabindex': '0', 'aria-haspopup': 'true',
-            'aria-activedescendant': 'null', 'aria-owns': this.element.id + '_popup', 'aria-expanded': 'false',
-            'role': 'combobox', 'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',
+            'tabindex': '0', 'aria-expanded': 'false', 'role': 'combobox',
+            'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',
             'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'
         });
         Input.addAttributes({ 'aria-label': 'select' }, this.inputWrapper.buttons[0]);
@@ -3740,9 +3748,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         this.unBindEvents();
         this.hide(null);
         var ariaAttrs = {
-            'aria-readonly': this.readonly ? 'true' : 'false', 'tabindex': '0', 'aria-haspopup': 'true',
-            'aria-activedescendant': 'null', 'aria-owns': this.element.id + '_popup', 'aria-expanded': 'false',
-            'role': 'combobox', 'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',
+            'tabindex': '0', 'aria-expanded': 'false', 'role': 'combobox',
+            'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',
             'autocorrect': 'off', 'autocapitalize': 'off', 'aria-invalid': 'false', 'spellcheck': 'false'
         };
         if (this.inputElement) {
@@ -4101,9 +4108,6 @@ var DateRangePicker = /** @class */ (function (_super) {
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             var openPopup = ['maxDays', 'minDays', 'value'];
-            if (openPopup.indexOf(prop) < 0) {
-                this.hide(null);
-            }
             switch (prop) {
                 case 'width':
                     this.setEleWidth(this.width);
@@ -4124,7 +4128,6 @@ var DateRangePicker = /** @class */ (function (_super) {
                     break;
                 case 'readonly':
                     Input.setReadonly(this.readonly, this.inputElement);
-                    this.inputElement.setAttribute('aria-readonly', '' + this.readonly);
                     this.setRangeAllowEdit();
                     break;
                 case 'cssClass':
@@ -4314,7 +4317,13 @@ var DateRangePicker = /** @class */ (function (_super) {
                     this.setProperties({ depth: newProp.depth }, true);
                     this.refreshChange();
                     break;
+                default:
+                    this.isPropChanged = true;
+            }
+            if (openPopup.indexOf(prop) < 0 && !this.isPropChanged) {
+                this.hide(null);
             }
+            this.isPropChanged = false;
         }
     };
     __decorate([

package/src/datetimepicker/datetimepicker.js

@@ -148,13 +148,11 @@ var DateTimePicker = /** @class */ (function (_super) {
         }
         var ariaAttribute = {
             'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-invalid': 'false',
-            'aria-haspopup': 'true', 'aria-activedescendant': 'null',
             'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',
-            'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off'
+            'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off'
         };
         if (this.inputElement) {
             Input.removeAttributes(ariaAttribute, this.inputElement);
-            this.inputElement.removeAttribute('aria-placeholder');
         }
         if (this.isCalendar()) {
             if (this.popupWrapper) {
@@ -569,6 +567,7 @@ var DateTimePicker = /** @class */ (function (_super) {
                 }
                 addClass([_this.inputWrapper.container], [ICONANIMATION]);
                 attributes(_this.inputElement, { 'aria-expanded': 'true' });
+                attributes(_this.inputElement, { 'aria-owns': _this.inputElement.id + '_options' });
                 EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);
             }
         });
@@ -633,7 +632,7 @@ var DateTimePicker = /** @class */ (function (_super) {
             }, close: function () {
                 removeClass([_this.timeIcon], ACTIVE);
                 _this.unWireTimeListEvents();
-                _this.inputElement.setAttribute('aria-activedescendant', 'null');
+                _this.inputElement.removeAttribute('aria-activedescendant');
                 remove(_this.popupObject.element);
                 _this.popupObject.destroy();
                 _this.dateTimeWrapper.innerHTML = '';
@@ -849,11 +848,11 @@ var DateTimePicker = /** @class */ (function (_super) {
         }
     };
     DateTimePicker.prototype.setTimeActiveDescendant = function () {
-        if (!isNullOrUndefined(this.selectedElement)) {
+        if (!isNullOrUndefined(this.selectedElement) && this.value) {
             attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });
         }
         else {
-            attributes(this.inputElement, { 'aria-activedescendant': 'null' });
+            this.inputElement.removeAttribute('aria-activedescendant');
         }
     };
     DateTimePicker.prototype.addTimeSelection = function () {
@@ -1012,6 +1011,7 @@ var DateTimePicker = /** @class */ (function (_super) {
             this.popupObject.hide(new Animation(animModel));
             this.inputWrapper.container.classList.remove(ICONANIMATION);
             attributes(this.inputElement, { 'aria-expanded': 'false' });
+            this.inputElement.removeAttribute('aria-owns');
             EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);
         }
     };
@@ -1399,7 +1399,6 @@ var DateTimePicker = /** @class */ (function (_super) {
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(newProp.placeholder, this.inputElement);
-                    this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);
                     break;
                 case 'enabled':
                     Input.setEnabled(this.enabled, this.inputElement);
@@ -1458,7 +1457,7 @@ var DateTimePicker = /** @class */ (function (_super) {
                     _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
                     break;
             }
-            if (!this.isDynamicValueChanged) {
+            if (!this.isDynamicValueChanged && !this.isIconClicked) {
                 this.hide(null);
             }
             this.isDynamicValueChanged = false;

package/src/timepicker/timepicker.js

@@ -345,9 +345,10 @@ var TimePicker = /** @class */ (function (_super) {
         }, this.createElement);
         this.inputWrapper.container.style.width = this.setWidth(this.width);
         attributes(this.inputElement, {
-            'aria-haspopup': 'true', 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-activedescendant': 'null',
-            'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
-            'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'false', 'aria-invalid': 'false'
+            'aria-autocomplete': 'list', 'tabindex': '0',
+            'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
+            'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',
+            'aria-disabled': 'false', 'aria-invalid': 'false'
         });
         if (!this.isNullOrEmpty(this.inputStyle)) {
             Input.addAttributes({ 'style': this.inputStyle }, this.inputElement);
@@ -448,9 +449,10 @@ var TimePicker = /** @class */ (function (_super) {
         this.hide();
         this.unBindEvents();
         var ariaAttribute = {
-            'aria-haspopup': 'true', 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-activedescendant': 'null',
-            'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
-            'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'true', 'aria-invalid': 'false'
+            'aria-autocomplete': 'list', 'tabindex': '0',
+            'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
+            'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',
+            'aria-disabled': 'true', 'aria-invalid': 'false'
         };
         if (this.inputElement) {
             Input.removeAttributes(ariaAttribute, this.inputElement);
@@ -551,7 +553,7 @@ var TimePicker = /** @class */ (function (_super) {
             }, close: function () {
                 removeClass([_this.inputWrapper.buttons[0]], SELECTED);
                 _this.unWireListEvents();
-                _this.inputElement.setAttribute('aria-activedescendant', 'null');
+                _this.inputElement.removeAttribute('aria-activedescendant');
                 remove(_this.popupObj.element);
                 _this.popupObj.destroy();
                 _this.popupWrapper.innerHTML = '';
@@ -1043,6 +1045,8 @@ var TimePicker = /** @class */ (function (_super) {
                     _this.popupObj.hide(new Animation(animModel));
                     removeClass([_this.inputWrapper.container], [ICONANIMATION]);
                     attributes(_this.inputElement, { 'aria-expanded': 'false' });
+                    _this.inputElement.removeAttribute('aria-owns');
+                    _this.inputElement.removeAttribute('aria-activedescendant');
                     EventHandler.remove(document, 'mousedown touchstart', _this.documentClickHandler);
                 }
                 if (Browser.isDevice && _this.modal) {
@@ -1806,11 +1810,11 @@ var TimePicker = /** @class */ (function (_super) {
         this.clearIconState();
     };
     TimePicker.prototype.setActiveDescendant = function () {
-        if (!isNullOrUndefined(this.selectedElement)) {
+        if (!isNullOrUndefined(this.selectedElement) && this.value) {
             attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });
         }
         else {
-            attributes(this.inputElement, { 'aria-activedescendant': 'null' });
+            this.inputElement.removeAttribute('aria-activedescendant');
         }
     };
     TimePicker.prototype.removeSelection = function () {
@@ -1900,7 +1904,7 @@ var TimePicker = /** @class */ (function (_super) {
     };
     TimePicker.prototype.createListItems = function () {
         var _this = this;
-        this.listWrapper = this.createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });
+        this.listWrapper = this.createElement('div', { className: CONTENT, attrs: { 'tabindex': '-1' } });
         var start;
         var interval = this.step * 60000;
         var listItems = [];
@@ -1930,7 +1934,7 @@ var TimePicker = /** @class */ (function (_super) {
             }
         };
         this.listTag = ListBase.createList(this.createElement, listItems, listBaseOptions, true);
-        attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });
+        attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options', 'tabindex': '0' });
         append([this.listTag], this.listWrapper);
     };
     TimePicker.prototype.documentClickHandler = function (event) {
@@ -2143,6 +2147,7 @@ var TimePicker = /** @class */ (function (_super) {
                     }
                     _this.setActiveDescendant();
                     attributes(_this.inputElement, { 'aria-expanded': 'true' });
+                    attributes(_this.inputElement, { 'aria-owns': _this.inputElement.id + '_options' });
                     addClass([_this.inputWrapper.container], FOCUS);
                     EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);
                     _this.setOverlayIndex(_this.mobileTimePopupWrap, _this.popupObj.element, _this.modal, Browser.isDevice);
@@ -2256,7 +2261,6 @@ var TimePicker = /** @class */ (function (_super) {
             switch (prop) {
                 case 'placeholder':
                     Input.setPlaceholder(newProp.placeholder, this.inputElement);
-                    this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);
                     break;
                 case 'readonly':
                     Input.setReadonly(this.readonly, this.inputElement, this.floatLabelType);