@progress/kendo-angular-dateinputs 7.1.4 → 7.1.5-dev.202211011455

package/esm2015/daterange/date-range-end-input.directive.js

@@ -50,11 +50,10 @@ export class DateRangeEndInputDirective extends DateRangeInput {
     ngOnInit() {
         this.rangeService.registerEndInput(this.dateInput);
         super.init();
+        this.dateInput.pickerType = 'daterangeend';
     }
     ngAfterViewInit() {
-        const inputElement = this.dateInput.inputElement;
-        this.renderer.removeAttribute(inputElement, attributeNames.ariaExpanded);
-        this.dateInput.pickerType = 'daterangeend';
+        this.renderer.setAttribute(this.dateInput.inputElement, attributeNames.ariaExpanded, 'false');
     }
     ngOnDestroy() {
         super.destroy();

package/esm2015/daterange/date-range-input.js

@@ -34,6 +34,8 @@ export class DateRangeInput {
         return isPresent(popup) && isPresent(popup.calendar);
     }
     init() {
+        this.input.role = 'combobox';
+        this.input.hasPopup = 'grid';
         if (this.input.value) {
             this.dateRangeService.setRange(this.getRange(this.input.value));
         }

package/esm2015/daterange/date-range-popup.component.js

@@ -170,7 +170,12 @@ export class DateRangePopupComponent {
         this.zone.runOutsideAngular(() => {
             this.activateSubscription = merge(this.contentCalendar.changes, this.viewCalendar.changes)
                 .pipe(filter(changes => changes && changes.first), map(changes => changes.first))
-                .subscribe((calendar) => setTimeout(() => calendar.focus()));
+                .subscribe((calendar) => setTimeout(() => {
+                calendar.focus();
+                this.calendarSubscriptions.add(calendar.viewList.focusedCellChange.subscribe((id) => {
+                    this.dateRangeService.setActiveDescendent(id);
+                }));
+            }));
         });
     }
     /**
@@ -297,7 +302,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <ng-template #defaultTemplate>
             <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
         </ng-template>
-    `, isInline: true, components: [{ type: i3.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }], directives: [{ type: i4.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
+    `, isInline: true, components: [{ type: i3.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }], directives: [{ type: i4.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/daterange/date-range-start-input.directive.js

@@ -52,13 +52,10 @@ export class DateRangeStartInputDirective extends DateRangeInput {
     ngOnInit() {
         this.rangeService.registerStartInput(this.dateInput);
         super.init();
+        this.dateInput.pickerType = 'daterangestart';
     }
     ngAfterViewInit() {
-        const inputElement = this.dateInput.inputElement;
-        this.renderer.setAttribute(inputElement, 'role', 'combobox');
-        this.renderer.setAttribute(inputElement, attributeNames.ariaHasPopup, 'true');
-        this.dateInput.pickerType = 'daterangestart';
-        this.renderer.setAttribute(inputElement, attributeNames.ariaExpanded, 'false');
+        this.renderer.setAttribute(this.dateInput.inputElement, attributeNames.ariaExpanded, 'false');
     }
     ngOnDestroy() {
         super.destroy();

package/esm2015/daterange/date-range.service.js

@@ -6,7 +6,6 @@ import { Injectable, Optional } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { EMPTY_SELECTIONRANGE } from '../calendar/models/selection-range.interface';
 import { isEqual } from '@progress/kendo-date-math';
-import { Subscription } from 'rxjs';
 import { attributeNames } from '../common/utils';
 import * as i0 from "@angular/core";
 const isActive = (cmp) => (cmp && cmp.isActive) || false;
@@ -19,8 +18,6 @@ export class DateRangeService {
     /** @hidden */
     constructor(renderer) {
         this.renderer = renderer;
-        /** @hidden */
-        this.focusedCellChange = new Subscription();
         /**
          * An Observable instance that notifies when the `activeRangeEnd` state is changed.
          */
@@ -80,23 +77,34 @@ export class DateRangeService {
     get selectionRange() {
         return this.range$.value;
     }
+    /**
+     * @hidden
+     * Gets the start input element.
+     */
+    get inputStartElement() {
+        return this.startInput$.value.dateInput.nativeElement;
+    }
+    /**
+     * @hidden
+     * Gets the end input element.
+     */
+    get inputEndElement() {
+        return this.endInput$.value.dateInput.nativeElement;
+    }
     /**
      * Activates the registered `DateRangePopup` component.
      * The method opens the popup and focuses the calendar.
      */
     activatePopup() {
-        var _a;
         const dateRangePopup = this.dateRangePopup$.value;
         if (!dateRangePopup) {
             return;
         }
         if (this.startInput$.value) {
-            const inputElement = this.startInput$.value.dateInput.nativeElement;
-            this.renderer.setAttribute(inputElement, attributeNames.ariaControls, dateRangePopup.popupUID);
-            this.renderer.setAttribute(inputElement, attributeNames.ariaExpanded, 'true');
-            this.focusedCellChange = (_a = dateRangePopup.viewCalendar.first) === null || _a === void 0 ? void 0 : _a.viewList.focusedCellChange.subscribe((id) => {
-                this.renderer.setAttribute(inputElement, attributeNames.ariaActiveDescendant, id);
-            });
+            this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaControls, dateRangePopup.popupUID);
+            this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaExpanded, 'true');
+            this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaControls, dateRangePopup.popupUID);
+            this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaExpanded, 'true');
         }
         dateRangePopup.activate();
     }
@@ -105,20 +113,28 @@ export class DateRangeService {
      * The method closes the popup.
      */
     deactivatePopup() {
-        var _a;
         const dateRangePopup = this.dateRangePopup$.value;
         if (!(dateRangePopup && dateRangePopup.show)) {
             return;
         }
         if (this.startInput$.value) {
-            const inputElement = this.startInput$.value.dateInput.nativeElement;
-            this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
-            this.renderer.setAttribute(inputElement, attributeNames.ariaExpanded, 'false');
-            (_a = this.focusedCellChange) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-            this.renderer.removeAttribute(inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.inputStartElement, attributeNames.ariaControls);
+            this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaExpanded, 'false');
+            this.renderer.removeAttribute(this.inputStartElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.inputEndElement, attributeNames.ariaControls);
+            this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaExpanded, 'false');
+            this.renderer.removeAttribute(this.inputEndElement, attributeNames.ariaActiveDescendant);
         }
         dateRangePopup.show = false;
     }
+    /**
+     * @hidden
+     */
+    setActiveDescendent(id) {
+        this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaActiveDescendant, id);
+        this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaActiveDescendant, id);
+    }
+    ;
     /**
      * @hidden
      *

package/esm2015/datetimepicker/datetimepicker.component.js

@@ -512,7 +512,7 @@ export class DateTimePickerComponent {
     }
     get popupUID() {
         var _a;
-        return (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.id;
+        return (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.popupId;
     }
     ;
     ngOnInit() {
@@ -1096,7 +1096,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [tabindex]="tabindex"
             [title]="title"
             pickerType="datetimepicker"
-            [hasPopup]="true"
+            hasPopup="grid"
             [isPopupOpen]="isOpen"
             (valueChange)="handleInputValueChange($event)"
             [kendoEventsOutsideAngular]="{
@@ -1147,12 +1147,13 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     }"
                     [scope]="this"
                 >
-                    <div class="k-button-group k-button-group-stretched">
+                    <div class="k-button-group k-button-group-stretched" role="group">
                         <button
                             type="button"
                             class="k-button k-group-start k-date-tab"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'date'"
+                            [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
                             [attr.title]="localization.get('dateTabLabel')"
                             [attr.aria-label]="localization.get('dateTabLabel')"
                             [kendoEventsOutsideAngular]="{
@@ -1168,6 +1169,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                             class="k-button k-group-end k-time-tab"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'time'"
+                            [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
                             [attr.title]="localization.get('timeTabLabel')"
                             [attr.aria-label]="localization.get('timeTabLabel')"
                             [kendoEventsOutsideAngular]="{
@@ -1274,7 +1276,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i8.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: i9.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: i10.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i8.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: i9.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: i10.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1355,7 +1357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [tabindex]="tabindex"
             [title]="title"
             pickerType="datetimepicker"
-            [hasPopup]="true"
+            hasPopup="grid"
             [isPopupOpen]="isOpen"
             (valueChange)="handleInputValueChange($event)"
             [kendoEventsOutsideAngular]="{
@@ -1406,12 +1408,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     }"
                     [scope]="this"
                 >
-                    <div class="k-button-group k-button-group-stretched">
+                    <div class="k-button-group k-button-group-stretched" role="group">
                         <button
                             type="button"
                             class="k-button k-group-start k-date-tab"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'date'"
+                            [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
                             [attr.title]="localization.get('dateTabLabel')"
                             [attr.aria-label]="localization.get('dateTabLabel')"
                             [kendoEventsOutsideAngular]="{
@@ -1427,6 +1430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                             class="k-button k-group-end k-time-tab"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'time'"
+                            [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
                             [attr.title]="localization.get('timeTabLabel')"
                             [attr.aria-label]="localization.get('timeTabLabel')"
                             [kendoEventsOutsideAngular]="{

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1666814053,
+    publishDate: 1667314440,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/timepicker/timelist.component.js

@@ -15,7 +15,6 @@ import { SecondsService } from './services/seconds.service';
 import { MillisecondsService } from './services/milliseconds.service';
 import { DayPeriodService } from './services/dayperiod.service';
 import { closestInScope } from '../common/dom-queries';
-import { attributeNames } from '../common/utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/dom.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -62,23 +61,14 @@ export class TimeListComponent {
         this.data = [];
         this.indexToScroll = -1;
         this.domEvents = [];
-        this.hostElement = this.element.nativeElement;
     }
     get roleAttribute() {
-        return this.isDayPeriod ? 'listbox' : 'spinbutton';
+        return 'listbox';
     }
     get ariaLabel() {
         var _a;
         return this.localization.get((_a = this.part) === null || _a === void 0 ? void 0 : _a.type);
     }
-    get valueMin() {
-        var _a;
-        return (_a = this.data[0]) === null || _a === void 0 ? void 0 : _a.text;
-    }
-    get valueMax() {
-        var _a;
-        return (_a = this.data[this.data.length - 1]) === null || _a === void 0 ? void 0 : _a.text;
-    }
     get tabIndex() {
         return this.disabled ? undefined : 0;
     }
@@ -86,8 +76,10 @@ export class TimeListComponent {
         var _a;
         return ((_a = this.part) === null || _a === void 0 ? void 0 : _a.type) === 'dayperiod';
     }
+    get currentSelectedIndex() {
+        return this.selectedIndex(this.value);
+    }
     ngOnChanges(changes) {
-        var _a, _b;
         if (changes.part) {
             this.service = this.injector.get(services[this.part.type]);
             this.service.configure(this.serviceSettings());
@@ -107,8 +99,6 @@ export class TimeListComponent {
         this.animateToIndex = this.animateToIndex && this.textHasChanged(valueChanges);
         this.total = this.service.total(value);
         this.indexToScroll = this.selectedIndex(value);
-        this.renderer.setAttribute(this.hostElement, attributeNames.valueNow, (_a = this.getCurrentItem()) === null || _a === void 0 ? void 0 : _a.value.toString());
-        this.renderer.setAttribute(this.hostElement, attributeNames.valuetext, (_b = this.getCurrentItem()) === null || _b === void 0 ? void 0 : _b.text);
     }
     ngOnInit() {
         this.animateToIndex = true;
@@ -261,7 +251,7 @@ export class TimeListComponent {
     }
 }
 TimeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: i1.TimePickerDOMService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.role": "this.roleAttribute", "attr.aria-label": "this.ariaLabel", "attr.valuemin": "this.valueMin", "attr.valuemax": "this.valueMax", "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.role": "this.roleAttribute", "attr.aria-label": "this.ariaLabel", "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-virtualization
         [skip]="skip"
         [take]="total"
@@ -279,11 +269,12 @@ TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 click: handleItemClick
             }"
             [scope]="this"
-            [attr.role]="isDayPeriod ? 'presentation' : null"
+            [attr.role]="'presentation'"
         >
             <li *ngFor="let item of data; let index = index;" class="k-item"
                 [attr.data-timelist-item-index]="index"
-                [attr.role]="isDayPeriod ? 'option' : null"
+                [attr.role]="'option'"
+                [attr.aria-selected]="index === currentSelectedIndex"
                 >
                 <span>{{item.text}}</span>
             </li>
@@ -312,11 +303,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 click: handleItemClick
             }"
             [scope]="this"
-            [attr.role]="isDayPeriod ? 'presentation' : null"
+            [attr.role]="'presentation'"
         >
             <li *ngFor="let item of data; let index = index;" class="k-item"
                 [attr.data-timelist-item-index]="index"
-                [attr.role]="isDayPeriod ? 'option' : null"
+                [attr.role]="'option'"
+                [attr.aria-selected]="index === currentSelectedIndex"
                 >
                 <span>{{item.text}}</span>
             </li>
@@ -347,12 +339,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], ariaLabel: [{
                 type: HostBinding,
                 args: ["attr.aria-label"]
-            }], valueMin: [{
-                type: HostBinding,
-                args: ['attr.valuemin']
-            }], valueMax: [{
-                type: HostBinding,
-                args: ["attr.valuemax"]
             }], tabIndex: [{
                 type: HostBinding,
                 args: ["attr.tabindex"]

package/esm2015/timepicker/timepicker.component.js

@@ -775,6 +775,7 @@ export class TimePickerComponent {
         else {
             this.blurComponent();
         }
+        this.cdr.detectChanges();
     }
     blurComponent() {
         this.isActive = false; // order is important ¯\_(ツ)_/¯
@@ -855,7 +856,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         <kendo-dateinput
             #input
             pickerType="timepicker"
-            [hasPopup]="true"
+            hasPopup="dialog"
             [isPopupOpen]="show"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
@@ -926,7 +927,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </kendo-timeselector>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: i8.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i9.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: i8.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i9.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -987,7 +988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <kendo-dateinput
             #input
             pickerType="timepicker"
-            [hasPopup]="true"
+            hasPopup="dialog"
             [isPopupOpen]="show"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"