@progress/kendo-angular-dateinputs 7.1.3-dev.202210121001 → 7.1.3-dev.202210260703

package/fesm2015/kendo-angular-dateinputs.js

@@ -3,13 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, isDevMode, Directive, Input, Component, Output, ChangeDetectionStrategy, HostBinding, forwardRef, ElementRef, ContentChild, ViewChild, HostListener, InjectionToken, Inject, NgZone, Optional, ViewContainerRef, ViewChildren, TemplateRef, ContentChildren, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, isDevMode, Directive, Input, Component, Output, ChangeDetectionStrategy, HostListener, HostBinding, forwardRef, ElementRef, ContentChild, ViewChild, InjectionToken, Inject, NgZone, Optional, ViewContainerRef, ViewChildren, TemplateRef, ContentChildren, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import { cloneDate, addDays, getDate, isEqual, addDecades, addCenturies, firstDecadeOfCentury, lastDecadeOfCentury, firstYearOfDecade, createDate, lastYearOfDecade, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, addWeeks, addMonths, firstDayOfMonth, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
 import * as i5 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, guid, Keys, hasObservers, KendoInput, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, KendoInput, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-intl';
 import { IntlModule } from '@progress/kendo-angular-intl';
@@ -17,7 +17,7 @@ import { Subject, Subscription, ReplaySubject, Observable, combineLatest, of, in
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { map, scan, takeWhile, debounceTime, tap, filter } from 'rxjs/operators';
-import * as i2 from '@progress/kendo-angular-popup';
+import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import { touchEnabled } from '@progress/kendo-common';
 
@@ -28,7 +28,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1665567991,
+    publishDate: 1666767725,
     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'
 };
@@ -120,6 +120,40 @@ const isNumberArray = (value) => Array.isArray(value) && value.length > 0 && val
  * and all items in the array are dates, returns `true`.
  */
 const isDateArray = (value) => Array.isArray(value) && value.length > 0 && value.every(item => item instanceof Date);
+/**
+ * @hidden
+ */
+const isArrowWithShiftPressed = (args) => args.shiftKey && (args.keyCode === Keys.ArrowRight || args.keyCode === Keys.ArrowLeft || args.keyCode === Keys.ArrowDown || args.keyCode === Keys.ArrowUp);
+/**
+ * @hidden
+ * Enum with key codes.
+ */
+var Keys;
+(function (Keys) {
+    Keys[Keys["ArrowDown"] = 40] = "ArrowDown";
+    Keys[Keys["ArrowLeft"] = 37] = "ArrowLeft";
+    Keys[Keys["ArrowRight"] = 39] = "ArrowRight";
+    Keys[Keys["ArrowUp"] = 38] = "ArrowUp";
+})(Keys || (Keys = {}));
+/**
+ * @hidden
+ */
+const selectors = {
+    infiniteCalendarTable: '.k-content .k-calendar-table',
+    multiViewCalendarTable: '.k-content.k-calendar-table'
+};
+/**
+ * @hidden
+ */
+const attributeNames = {
+    ariaActiveDescendant: 'aria-activedescendant',
+    ariaControls: 'aria-controls',
+    ariaExpanded: 'aria-expanded',
+    ariaHasPopup: 'aria-haspopup',
+    valueNow: 'aria-valuenow',
+    valuetext: 'aria-valuetext',
+    ariaInvalid: 'aria-invalid'
+};
 
 const isSet = (value) => value !== null && value !== undefined;
 const setter = (method) => (date, value) => {
@@ -456,8 +490,8 @@ const isTabExitingCalendar = (calendarType, focusedElement, shiftKey) => {
     }
     return calendarType === 'infinite' || ( // infinte calendar is always exited on first tab keydown
     calendarType === 'classic' &&
-        (shiftKey && focusedElement.classList.contains('k-calendar')) || // exited on main calendar element focused and back-tab
-        (!shiftKey && focusedElement.classList.contains('k-calendar-nav-next')) // exited on next button focused and regular tab
+        (shiftKey && focusedElement.classList.contains('k-calendar-table')) || // exited on main calendar element focused and back-tab
+        (!shiftKey && focusedElement.classList.contains('k-calendar-table')) // exited on next button focused and regular tab
     );
 };
 /**
@@ -908,7 +942,7 @@ class MonthViewService {
                 const isRangeMid = isInMiddle && isInSelectionRange(cellDate, selectionRange);
                 return {
                     formattedValue: this.value(cellDate),
-                    id: `${cellUID}${cellDate.getTime()}`,
+                    id: `${cellUID}${otherMonth ? cellDate.getTime() + '1' : cellDate.getTime()}`,
                     isFocused: this.isEqual(cellDate, focusedDate),
                     isSelected: isActiveView && selectedDates.some(date => this.isEqual(cellDate, date)),
                     isWeekend: this.isWeekend(cellDate),
@@ -1222,6 +1256,7 @@ const viewOffset = (view, offset) => {
     const candidate = CalendarViewEnum[CalendarViewEnum[view + offset]];
     return candidate !== undefined ? candidate : view;
 };
+let nextCalendarId = 0;
 /**
  * @hidden
  */
@@ -1231,6 +1266,7 @@ class BusViewService {
         this.viewChanged = new EventEmitter();
         this.bottom = CalendarViewEnum.month;
         this.top = CalendarViewEnum.century;
+        this.calendarId = nextCalendarId++;
     }
     configure(bottom, top) {
         this.bottom = bottom;
@@ -1288,8 +1324,8 @@ class WeekNamesService {
     constructor(intl) {
         this.intl = intl;
     }
-    getWeekNames(includeWeekNumber = false) {
-        const weekNames = shiftWeekNames(this.intl.dateFormatNames({ nameType: 'short', type: 'days' }), this.intl.firstDay());
+    getWeekNames(includeWeekNumber = false, nameType) {
+        const weekNames = shiftWeekNames(this.intl.dateFormatNames({ nameType: nameType, type: 'days' }), this.intl.firstDay());
         return includeWeekNumber ? [''].concat(weekNames) : weekNames;
     }
 }
@@ -1497,6 +1533,7 @@ class ViewComponent {
         this.weekNumberCellClick = new EventEmitter();
         this.cellEnter = new EventEmitter();
         this.cellLeave = new EventEmitter();
+        this.focusedCellId = new EventEmitter();
         this.colSpan = 0;
         this.subscriptions = new Subscription();
         this.domEvents = [];
@@ -1568,6 +1605,9 @@ class ViewComponent {
         };
     }
     getStyles(context) {
+        if (!context.isOtherMonth && this.isActive && context.isFocused) {
+            this.focusedCellId.emit(context.id);
+        }
         const { isRangeEnd, isRangeStart } = context;
         const isEndActive = this.activeRangeEnd === 'end' && isRangeEnd;
         const isStartActive = this.activeRangeEnd === 'start' && isRangeStart;
@@ -1593,6 +1633,9 @@ class ViewComponent {
         const availableDates = week.map(item => item.value).filter(date => !this.disabledDatesService.isDateDisabled(date));
         this.weekNumberCellClick.emit(availableDates);
     }
+    getMonthLabel(date) {
+        return this.activeView === 1 ? this.intl.formatDate(date, 'MMMM') : null;
+    }
     firstWeekDateContext(rowCtx) {
         if (!this.weekNumber) {
             return null;
@@ -1684,13 +1727,14 @@ class ViewComponent {
     }
 }
 ViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewComponent, deps: [{ token: BusViewService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
-ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ViewComponent, selector: "[kendoCalendarView]", inputs: { direction: "direction", isActive: "isActive", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", viewDate: "viewDate", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", min: "min", max: "max", selectedDates: "selectedDates", weekNumber: "weekNumber", viewIndex: "viewIndex", templateRef: "templateRef", weekNumberTemplateRef: "weekNumberTemplateRef" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave" }, usesOnChanges: true, ngImport: i0, template: `
-    <ng-template #emptyCell><td class="k-empty k-calendar-td">&nbsp;</td></ng-template>
+ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ViewComponent, selector: "[kendoCalendarView]", inputs: { direction: "direction", isActive: "isActive", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", viewDate: "viewDate", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", min: "min", max: "max", selectedDates: "selectedDates", weekNumber: "weekNumber", viewIndex: "viewIndex", templateRef: "templateRef", weekNumberTemplateRef: "weekNumberTemplateRef" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", focusedCellId: "focusedCellId" }, usesOnChanges: true, ngImport: i0, template: `
+    <ng-template #emptyCell><td class="k-empty k-calendar-td" role="gridcell">&nbsp;</td></ng-template>
     <tr *ngIf="!isHorizontal()" class="k-calendar-tr" role="row"><th class="k-calendar-caption" scope="col" [colSpan]="colSpan">{{title}}</th></tr>
     <tr *kFor="let row of data; let rowIndex = index" class="k-calendar-tr" role="row">
         <ng-template [ngIf]="weekNumber">
             <td
                 class="k-alt k-calendar-td"
+                role="gridcell"
                 *ngIf="firstDate(row); else emptyCell"
                 [kendoEventsOutsideAngular]="{
                     click: handleWeekNumberClick.bind(this, row)
@@ -1717,6 +1761,7 @@ ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 [attr.data-cell-index]="tableCellIndex(rowIndex, cellIndex)"
                 [attr.aria-selected]="cell.isSelected || cell.isRangeStart || cell.isRangeMid || cell.isRangeEnd"
                 [attr.aria-disabled]="cell.isDisabled"
+                [attr.aria-label]="getMonthLabel(cell.value)"
                 [ngClass]="getStyles(cell)"
                 [title]="cell.title"
             >
@@ -1738,12 +1783,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     // eslint-disable-next-line
                     selector: '[kendoCalendarView]',
                     template: `
-    <ng-template #emptyCell><td class="k-empty k-calendar-td">&nbsp;</td></ng-template>
+    <ng-template #emptyCell><td class="k-empty k-calendar-td" role="gridcell">&nbsp;</td></ng-template>
     <tr *ngIf="!isHorizontal()" class="k-calendar-tr" role="row"><th class="k-calendar-caption" scope="col" [colSpan]="colSpan">{{title}}</th></tr>
     <tr *kFor="let row of data; let rowIndex = index" class="k-calendar-tr" role="row">
         <ng-template [ngIf]="weekNumber">
             <td
                 class="k-alt k-calendar-td"
+                role="gridcell"
                 *ngIf="firstDate(row); else emptyCell"
                 [kendoEventsOutsideAngular]="{
                     click: handleWeekNumberClick.bind(this, row)
@@ -1770,6 +1816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [attr.data-cell-index]="tableCellIndex(rowIndex, cellIndex)"
                 [attr.aria-selected]="cell.isSelected || cell.isRangeStart || cell.isRangeMid || cell.isRangeEnd"
                 [attr.aria-disabled]="cell.isDisabled"
+                [attr.aria-label]="getMonthLabel(cell.value)"
                 [ngClass]="getStyles(cell)"
                 [title]="cell.title"
             >
@@ -1824,6 +1871,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], cellLeave: [{
                 type: Output
+            }], focusedCellId: [{
+                type: Output
             }] } });
 
 /* eslint-disable @angular-eslint/component-selector */
@@ -1848,16 +1897,28 @@ class HorizontalViewListComponent {
         this.showViewHeader = false;
         this.animateNavigation = false;
         this.orientation = 'horizontal';
+        this.tabIndex = 0;
+        this.disabled = false;
         this.cellClick = new EventEmitter();
         this.weekNumberCellClick = new EventEmitter();
         this.cellEnter = new EventEmitter();
         this.cellLeave = new EventEmitter();
         this.activeDateChange = new EventEmitter();
+        this.focusCalendar = new EventEmitter();
+        this.blurCalendar = new EventEmitter();
+        this.focusedCellChange = new EventEmitter();
         this.getComponentClass = true;
         this.weekNames = [];
+        this.wideWeekNames = [];
         this.dates = [];
         this.intlSubscription = this.intl.changes.subscribe(this.intlChange.bind(this));
     }
+    /**
+     * @hidden
+     */
+    handleFocus() {
+        this.focusCalendar.emit();
+    }
     get weekNumber() {
         return this.showWeekNumbers && this.isMonthView();
     }
@@ -1882,10 +1943,17 @@ class HorizontalViewListComponent {
     get getComponentCenturyClass() {
         return this.activeView === CalendarViewEnum.century;
     }
+    get getActiveDescendant() {
+        return this.views === 1 ? this.activeDescendant : null;
+    }
+    get getTabIndex() {
+        return this.disabled || this.views === 2 ? null : this.tabIndex;
+    }
     ngOnChanges(changes) {
         this.initService();
         if (this.weekNames.length === 0 || changes.weekNumber) {
-            this.weekNames = this.weekService.getWeekNames(this.weekNumber);
+            this.weekNames = this.getWeekNames('short');
+            this.wideWeekNames = this.getWeekNames('wide');
         }
         if (!this.service) {
             return;
@@ -1902,6 +1970,11 @@ class HorizontalViewListComponent {
             this.activeDate = cloneDate(this.dates[0]);
             this.activeDateChange.emit(this.activeDate);
         }
+        this.setAriaActivedescendant();
+        //set tabindex for MultiViewCalendar
+        if (this.views === 2) {
+            this.renderer.setAttribute(this.element.nativeElement, 'tabindex', this.tabIndex.toString());
+        }
     }
     ngAfterViewInit() {
         // make the calendar look the same in the different browsers
@@ -2006,6 +2079,9 @@ class HorizontalViewListComponent {
         }
         return this.isListInRange(this.service.datesList(this.move(action), this.getTake(this.skip)));
     }
+    getWeekNames(type) {
+        return this.weekService.getWeekNames(this.weekNumber, type);
+    }
     setTableMinWidth() {
         const container = this.element.nativeElement;
         const table = container.querySelector('table');
@@ -2015,7 +2091,8 @@ class HorizontalViewListComponent {
         }
     }
     intlChange() {
-        this.weekNames = this.weekService.getWeekNames(this.weekNumber);
+        this.weekNames = this.getWeekNames('short');
+        this.wideWeekNames = this.getWeekNames('wide');
         this.cdr.markForCheck();
     }
     clampDate(value) {
@@ -2035,19 +2112,34 @@ class HorizontalViewListComponent {
     getTake(skip) {
         return Math.min(this.total - skip, this.views);
     }
+    setAriaActivedescendant() {
+        if (this.views === 2) {
+            this.renderer.setAttribute(this.element.nativeElement, attributeNames.ariaActiveDescendant, this.activeDescendant);
+        }
+    }
 }
 HorizontalViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HorizontalViewListComponent, deps: [{ token: BusViewService }, { token: i1.IntlService }, { token: WeekNamesService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", orientation: "orientation", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange" }, host: { properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, usesOnChanges: true, ngImport: i0, template: `
+HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", orientation: "orientation", activeDescendant: "activeDescendant", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { listeners: { "focus": "handleFocus()" }, properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
                 role="grid"
                 class="k-content k-calendar-table"
                 [ngClass]="class"
+                [attr.aria-labelledby]="id"
+                [attr.aria-activedescendant]="getActiveDescendant"
+                [attr.tabindex]="getTabIndex"
+                (focus)="focusCalendar.emit()"
+                (focusout)="blurCalendar.emit($event)"
             >
                 <caption *ngIf="showViewHeader" [ngClass]="getCaptionClass()">{{ getCaptionTitle(date) }}</caption>
-                <thead *ngIf="isMonthView()" class="k-calendar-thead">
+                <thead *ngIf="isMonthView()" class="k-calendar-thead" role="rowgroup">
                     <tr class="k-calendar-tr" role="row">
-                        <th *ngFor="let name of weekNames" class="k-calendar-th">{{name}}</th>
+                        <th *ngFor="let name of weekNames; let i = index;"
+                        class="k-calendar-th"
+                        scope="col"
+                        [attr.aria-label]="wideWeekNames[i]"
+                        role="columnheader"
+                        >{{name}}</th>
                     </tr>
                 </thead>
                 <tbody
@@ -2072,6 +2164,7 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                     (weekNumberCellClick)="weekNumberCellClick.emit($event)"
                     (cellEnter)="cellEnter.emit($event)"
                     (cellLeave)="cellLeave.emit($event)"
+                    (focusedCellId)="focusedCellChange.emit($event)"
                 >
                 </tbody>
             </table>
@@ -2107,7 +2200,7 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             }"
         >
         </ng-template>
-    `, isInline: true, components: [{ type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HorizontalViewListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2119,11 +2212,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 role="grid"
                 class="k-content k-calendar-table"
                 [ngClass]="class"
+                [attr.aria-labelledby]="id"
+                [attr.aria-activedescendant]="getActiveDescendant"
+                [attr.tabindex]="getTabIndex"
+                (focus)="focusCalendar.emit()"
+                (focusout)="blurCalendar.emit($event)"
             >
                 <caption *ngIf="showViewHeader" [ngClass]="getCaptionClass()">{{ getCaptionTitle(date) }}</caption>
-                <thead *ngIf="isMonthView()" class="k-calendar-thead">
+                <thead *ngIf="isMonthView()" class="k-calendar-thead" role="rowgroup">
                     <tr class="k-calendar-tr" role="row">
-                        <th *ngFor="let name of weekNames" class="k-calendar-th">{{name}}</th>
+                        <th *ngFor="let name of weekNames; let i = index;"
+                        class="k-calendar-th"
+                        scope="col"
+                        [attr.aria-label]="wideWeekNames[i]"
+                        role="columnheader"
+                        >{{name}}</th>
                     </tr>
                 </thead>
                 <tbody
@@ -2148,6 +2251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     (weekNumberCellClick)="weekNumberCellClick.emit($event)"
                     (cellEnter)="cellEnter.emit($event)"
                     (cellLeave)="cellLeave.emit($event)"
+                    (focusedCellId)="focusedCellChange.emit($event)"
                 >
                 </tbody>
             </table>
@@ -2185,7 +2289,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i1.IntlService }, { type: WeekNamesService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { cellTemplateRef: [{
+        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i1.IntlService }, { type: WeekNamesService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { handleFocus: [{
+                type: HostListener,
+                args: ["focus"]
+            }], cellTemplateRef: [{
                 type: Input
             }], weekNumberTemplateRef: [{
                 type: Input
@@ -2215,6 +2322,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], orientation: [{
                 type: Input
+            }], activeDescendant: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
             }], weekNumber: [{
                 type: Input
             }], cellClick: [{
@@ -2227,6 +2342,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], activeDateChange: [{
                 type: Output
+            }], focusCalendar: [{
+                type: Output
+            }], blurCalendar: [{
+                type: Output
+            }], focusedCellChange: [{
+                type: Output
             }], getComponentClass: [{
                 type: HostBinding,
                 args: ["class.k-calendar-view"]
@@ -2299,6 +2420,7 @@ class HeaderComponent {
         }
         this.activeViewValue = CalendarViewEnum[this.activeView];
         this.todayMessage = this.localization.get('today');
+        this.parentViewButtonTitle = this.localization.get('parentViewButtonTitle');
         this.setTodayAvailability();
         this.navigate = this.bus.canMoveUp(this.activeView);
         this.title = this.getTitle();
@@ -2319,6 +2441,9 @@ class HeaderComponent {
         }
         this.bus.moveUp(this.activeView);
     }
+    isDisabled() {
+        return this.navigate ? null : '';
+    }
     intlChange() {
         if (this.currentDate && this.bus.service(this.activeView)) {
             this.title = this.getTitle();
@@ -2328,6 +2453,7 @@ class HeaderComponent {
     l10nChange() {
         this.prevButtonTitle = this.localization.get('prevButtonTitle');
         this.nextButtonTitle = this.localization.get('nextButtonTitle');
+        this.parentViewButtonTitle = this.localization.get('parentViewButtonTitle');
         this.todayMessage = this.localization.get('today');
         this.cdr.markForCheck();
     }
@@ -2353,11 +2479,17 @@ class HeaderComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HeaderComponent, deps: [{ token: BusViewService }, { token: i0.ChangeDetectorRef }, { token: i1$1.LocalizationService }, { token: i1.IntlService }, { token: DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", templateRef: "templateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons", orientation: "orientation" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass" } }, usesOnChanges: true, ngImport: i0, template: `
-    <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title" [class.k-disabled]="!navigate"
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", templateRef: "templateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons", orientation: "orientation", id: "id" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+    <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title"
+        role="button"
+        [id]="id"
+        tabindex="-1"
+        [class.k-disabled]="!navigate"
+        [attr.aria-disabled]="isDisabled()"
         [kendoEventsOutsideAngular]="{
             click: handleNavigation
         }"
+        [title]="parentViewButtonTitle"
         [scope]="this">
         <ng-template [ngIf]="!templateRef">{{title}}</ng-template>
         <ng-template
@@ -2371,6 +2503,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         <button
             *ngIf="showNavigationButtons"
             class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-prev"
+            tabindex="-1"
             type="button"
             [attr.aria-disabled]="isPrevDisabled"
             [disabled]="isPrevDisabled"
@@ -2381,17 +2514,20 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         </button>
         <span
             class="k-today k-calendar-nav-today"
+            tabindex="-1"
             [class.k-disabled]="!todayAvailable"
             [kendoEventsOutsideAngular]="{
                 click: handleTodayClick
             }"
             [scope]="this"
+            role="link"
         >
             {{ todayMessage }}
         </span>
         <button
             *ngIf="showNavigationButtons"
             class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-next"
+            tabindex="-1"
             type="button"
             [attr.aria-disabled]="isNextDisabled"
             [disabled]="isNextDisabled"
@@ -2407,10 +2543,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             args: [{
                     selector: 'kendo-calendar-header',
                     template: `
-    <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title" [class.k-disabled]="!navigate"
+    <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title"
+        role="button"
+        [id]="id"
+        tabindex="-1"
+        [class.k-disabled]="!navigate"
+        [attr.aria-disabled]="isDisabled()"
         [kendoEventsOutsideAngular]="{
             click: handleNavigation
         }"
+        [title]="parentViewButtonTitle"
         [scope]="this">
         <ng-template [ngIf]="!templateRef">{{title}}</ng-template>
         <ng-template
@@ -2424,6 +2566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <button
             *ngIf="showNavigationButtons"
             class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-prev"
+            tabindex="-1"
             type="button"
             [attr.aria-disabled]="isPrevDisabled"
             [disabled]="isPrevDisabled"
@@ -2434,17 +2577,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </button>
         <span
             class="k-today k-calendar-nav-today"
+            tabindex="-1"
             [class.k-disabled]="!todayAvailable"
             [kendoEventsOutsideAngular]="{
                 click: handleTodayClick
             }"
             [scope]="this"
+            role="link"
         >
             {{ todayMessage }}
         </span>
         <button
             *ngIf="showNavigationButtons"
             class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-next"
+            tabindex="-1"
             type="button"
             [attr.aria-disabled]="isNextDisabled"
             [disabled]="isNextDisabled"
@@ -2476,6 +2622,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], orientation: [{
                 type: Input
+            }], id: [{
+                type: Input
             }], todayButtonClick: [{
                 type: Output
             }], prevButtonClick: [{
@@ -2493,51 +2641,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ["class.k-vstack"]
             }] } });
 
-const KEY_TO_ACTION = {
-    '33': Action.PrevView,
-    '34': Action.NextView,
-    '35': Action.LastInView,
-    '36': Action.FirstInView,
-    '37': Action.Left,
-    '38': Action.Up,
-    '39': Action.Right,
-    '40': Action.Down,
-    'meta+38': Action.UpperView,
-    'meta+40': Action.LowerView
-};
-/**
- * @hidden
- */
-class NavigationService {
-    constructor(bus) {
-        this.bus = bus;
-    }
-    action(event) {
-        const action = `${event.ctrlKey || event.metaKey ? 'meta+' : ''}${event.keyCode}`;
-        return KEY_TO_ACTION[action];
-    }
-    move(value, action, activeView) {
-        const service = this.bus.service(activeView);
-        if (!service) {
-            return value;
-        }
-        if (action === Action.UpperView && this.bus.canMoveUp(activeView)) {
-            this.bus.moveUp(activeView);
-            return value;
-        }
-        if (action === Action.LowerView && this.bus.canMoveDown(activeView)) {
-            this.bus.moveDown(activeView);
-            return value;
-        }
-        return service.move(value, action);
-    }
-}
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, deps: [{ token: BusViewService }], target: i0.ɵɵFactoryTarget.Injectable });
-NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: BusViewService }]; } });
-
 /**
  * @hidden
  */
@@ -2562,6 +2665,10 @@ class SelectionService {
                 const [start, end] = sortDates([rangePivot || date, date]);
                 selectedDates = this.bus.service(activeViewEnum).dateRange(start, end);
                 rangePivot = date > selectedDates[0] ? selectedDates[0] : last(selectedDates);
+                if (modifiers.anyArrow) {
+                    const [start, end] = sortDates([this.lastClicked || date, date]);
+                    selectedDates = this.bus.service(0).dateRange(start, end);
+                }
             }
             else {
                 selectedDates = [date];
@@ -2918,13 +3025,58 @@ const disabledDatesRangeValidator = (isDateDisabled) => {
     };
 };
 
+const KEY_TO_ACTION = {
+    '33': Action.PrevView,
+    '34': Action.NextView,
+    '35': Action.LastInView,
+    '36': Action.FirstInView,
+    '37': Action.Left,
+    '38': Action.Up,
+    '39': Action.Right,
+    '40': Action.Down,
+    'meta+38': Action.UpperView,
+    'meta+40': Action.LowerView
+};
+/**
+ * @hidden
+ */
+class NavigationService {
+    constructor(bus) {
+        this.bus = bus;
+    }
+    action(event) {
+        const action = `${event.ctrlKey || event.metaKey ? 'meta+' : ''}${event.keyCode}`;
+        return KEY_TO_ACTION[action];
+    }
+    move(value, action, activeView) {
+        const service = this.bus.service(activeView);
+        if (!service) {
+            return value;
+        }
+        if (action === Action.UpperView && this.bus.canMoveUp(activeView)) {
+            this.bus.moveUp(activeView);
+            return value;
+        }
+        if (action === Action.LowerView && this.bus.canMoveDown(activeView)) {
+            this.bus.moveDown(activeView);
+            return value;
+        }
+        return service.move(value, action);
+    }
+}
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, deps: [{ token: BusViewService }], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: BusViewService }]; } });
+
 /**
  * @hidden
  */
 class Messages$1 extends ComponentMessages {
 }
 Messages$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages$1, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages$1.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages$1, selector: "kendo-multiview-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle" }, usesInheritance: true, ngImport: i0 });
+Messages$1.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages$1, selector: "kendo-multiview-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages$1, decorators: [{
             type: Directive,
             args: [{
@@ -2937,6 +3089,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], nextButtonTitle: [{
                 type: Input
+            }], parentViewButtonTitle: [{
+                type: Input
             }] } });
 
 /**
@@ -3013,10 +3167,6 @@ class MultiViewCalendarComponent {
         this.zone = zone;
         this.disabledDatesService = disabledDatesService;
         this.selectionService = selectionService;
-        /**
-         * @hidden
-         */
-        this.id = guid();
         /**
          * Determines whether the built-in min or max validators are enforced when validating a form.
          */
@@ -3052,10 +3202,6 @@ class MultiViewCalendarComponent {
          * @hidden
          */
         this.isActive = false;
-        /**
-         * @hidden
-         */
-        this.isHeaderActive = false;
         /**
          * Defines the active view that the Calendar initially renders
          * ([see example]({% slug activeview_multiviewcalendar %})).
@@ -3132,6 +3278,10 @@ class MultiViewCalendarComponent {
          * @hidden
          */
         this.blurEvent = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.focusCalendar = new EventEmitter();
         this.cellUID = guid();
         this.isHovered = false;
         this.isPrevDisabled = true;
@@ -3151,6 +3301,7 @@ class MultiViewCalendarComponent {
         this.disabledDatesRangeValidateFn = noop$2;
         this.subscriptions = new Subscription();
         this.setClasses(element.nativeElement);
+        this.id = `kendo-multiviewcalendarid-${this.bus.calendarId}-`;
     }
     /**
      * Sets or gets the `focusedDate` property of the Calendar and
@@ -3165,6 +3316,24 @@ class MultiViewCalendarComponent {
     get focusedDate() {
         return this._focusedDate;
     }
+    /**
+     * @hidden
+     */
+    get headerId() {
+        return this.id + 'header-';
+    }
+    /**
+     * @hidden
+     */
+    get multiViewCalendarHeaderIdLabel() {
+        return this.views === 2 ? this.id + 'header-' : null;
+    }
+    /**
+ * @hidden
+ */
+    get calendarHeaderIdLabel() {
+        return this.views === 1 ? this.id + 'header-' : null;
+    }
     /**
      * Sets or gets the `min` property of the Calendar and
      * defines the minimum allowed date value.
@@ -3335,14 +3504,14 @@ class MultiViewCalendarComponent {
         return CalendarViewEnum[this.topView];
     }
     get widgetId() {
-        return this.id;
-    }
-    get calendarTabIndex() {
-        return this.disabled ? undefined : this.tabIndex;
+        return this.views === 2 ? this.id : null;
     }
     get ariaDisabled() {
         return this.disabled;
     }
+    /**
+     * @hidden
+     */
     get ariaActivedescendant() {
         return this.cellUID + this.focusedDate.getTime();
     }
@@ -3357,14 +3526,13 @@ class MultiViewCalendarComponent {
         }
         this.isActive = false;
         this.isHovered = false; //ensure that hovered is also not active
-        this.isHeaderActive = this.headerElement.nativeElement.contains(relatedTarget);
     }
     /**
      * @hidden
      */
     handleFocus() {
         this.isActive = true;
-        this.isHeaderActive = false;
+        this.focusCalendar.emit();
     }
     /**
      * @hidden
@@ -3397,10 +3565,32 @@ class MultiViewCalendarComponent {
      * @hidden
      */
     keydown(event) {
-        if (this.isHeaderActive) {
+        const arrowUpOrDownKeyPressed = [Keys$1.ArrowUp, Keys$1.ArrowDown].indexOf(event.keyCode) !== -1;
+        const ctrlKey = event.ctrlKey || event.metaKey;
+        const onArrowRightAndControl = event.keyCode === Keys$1.ArrowRight && ctrlKey;
+        const onArrowLeftAndControl = event.keyCode === Keys$1.ArrowLeft && ctrlKey;
+        const onTKeyPress = event.keyCode === Keys$1.KeyT;
+        const onEnterKeyPress = event.keyCode === Keys$1.Enter;
+        if (onArrowRightAndControl) {
+            event.preventDefault();
+            this.navigateView(this.nextView);
             return;
         }
-        if (event.keyCode === Keys.Enter) {
+        else if (onArrowLeftAndControl) {
+            event.preventDefault();
+            this.navigateView(this.prevView);
+            return;
+        }
+        else if (ctrlKey && arrowUpOrDownKeyPressed) {
+            event.preventDefault();
+        }
+        else if (onTKeyPress) {
+            this.focusedDate = getToday();
+            this.bus.moveToBottom(this.activeViewEnum);
+            return;
+        }
+        else if (onEnterKeyPress) {
+            this.selectionService.lastClicked = this.focusedDate;
             this.performSelection(this.focusedDate, event);
         }
         const candidate = dateInRange(this.navigator.move(this.focusedDate, this.navigator.action(event), this.activeViewEnum), this.min, this.max);
@@ -3413,6 +3603,10 @@ class MultiViewCalendarComponent {
         if (!isSameView) {
             this.emitNavigate(this.focusedDate);
         }
+        if (isArrowWithShiftPressed(event)) {
+            event['anyArrow'] = true;
+            this.performSelection(this.focusedDate, event);
+        }
     }
     ngOnInit() {
         this.subscriptions.add(this.bus.viewChanged.subscribe(({ view }) => {
@@ -3464,7 +3658,7 @@ class MultiViewCalendarComponent {
         if (!this.element) {
             return;
         }
-        this.element.nativeElement.focus();
+        this.element.nativeElement.querySelector('.k-calendar-view').focus();
     }
     /**
      * Blurs the Calendar component.
@@ -3473,13 +3667,9 @@ class MultiViewCalendarComponent {
         if (!this.element) {
             return;
         }
-        this.element.nativeElement.blur();
-    }
-    /**
-     * @hidden
-     */
-    handleHeaderFocus() {
-        this.isHeaderActive = true;
+        const activeElement = this.views === 2 ? this.element.nativeElement.querySelector('.k-calendar-view') :
+            this.element.nativeElement.querySelector('.k-content.k-calendar-table');
+        activeElement.blur();
     }
     /**
      * @hidden
@@ -3608,6 +3798,7 @@ class MultiViewCalendarComponent {
      * @hidden
      */
     handleCellClick({ date, modifiers }) {
+        this.selectionService.lastClicked = date;
         this.performSelection(date, modifiers);
         const isSameView = this.bus.service(this.activeViewEnum).isInArray(this.focusedDate, this.viewList.dates);
         if (!isSameView) {
@@ -3686,7 +3877,7 @@ class MultiViewCalendarComponent {
     }
 }
 MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarComponent, deps: [{ token: BusViewService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DisabledDatesService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Component });
-MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur" }, host: { listeners: { "focusout": "handleFocusout($event)", "focus": "handleFocus()", "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.tabindex": "this.calendarTabIndex", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled", "attr.aria-activedescendant": "this.ariaActivedescendant" } }, providers: [
+MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur", focusCalendar: "focusCalendar" }, host: { listeners: { "focusout": "handleFocusout($event)", "focus": "handleFocus()", "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
         BusViewService,
         RANGE_CALENDAR_VALUE_ACCESSOR,
         RANGE_CALENDAR_RANGE_VALIDATORS,
@@ -3708,6 +3899,9 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
 
         i18n-nextButtonTitle="kendo.multiviewcalendar.nextButtonTitle|The label for the next button in the Multiview calendar"
         nextButtonTitle="Navigate to next view"
+
+        i18n-parentViewButtonTitle="kendo.multiviewcalendar.parentViewButtonTitle|The title of the parent view button in the Multiview calendar header"
+        parentViewButtonTitle="Navigate to parent view"
     >
     </ng-container>
     <kendo-calendar-header
@@ -3715,6 +3909,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         [currentDate]="activeDate"
         [min]="min"
         [max]="max"
+        [id]="headerId"
         [rangeLength]="views"
         [templateRef]="headerTitleTemplateRef?.templateRef"
         [isPrevDisabled]="isPrevDisabled"
@@ -3724,15 +3919,14 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         (todayButtonClick)="handleTodayButtonClick({ selectedDates: [$event], focusedDate: $event })"
         (prevButtonClick)="navigateView(prevView)"
         (nextButtonClick)="navigateView(nextView)"
-        [kendoEventsOutsideAngular]="{
-            focusin: handleHeaderFocus
-        }"
-        [scope]="this"
     >
     </kendo-calendar-header>
     <kendo-calendar-horizontal
+        [id]="calendarHeaderIdLabel"
+        [attr.aria-labelledby]="multiViewCalendarHeaderIdLabel"
         [activeView]="activeViewEnum"
-        [isActive]="isActive || (isHovered && !isHeaderActive)"
+        [activeDescendant]="ariaActivedescendant"
+        [isActive]="isActive || isHovered"
         [cellTemplateRef]="activeCellTemplate()?.templateRef"
         [weekNumberTemplateRef]="weekNumberTemplateRef?.templateRef"
         [cellUID]="cellUID"
@@ -3747,14 +3941,18 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         [selectionRange]="selectionRange"
         [selectedDates]="selectedDates"
         [orientation]="orientation"
+        [tabIndex]="tabIndex"
+        [disabled]="disabled"
         (cellClick)="handleCellClick($event)"
         (weekNumberCellClick)="handleWeekNumberClick($event)"
         (cellEnter)="emitCellEvent(cellEnter, $event)"
         (cellLeave)="emitCellEvent(cellLeave, $event)"
         (activeDateChange)="setActiveDate($event)"
+        (focusCalendar)="handleFocus()"
+        (blurCalendar)="handleFocusout($event)"
     >
     </kendo-calendar-horizontal>
-  `, isInline: true, components: [{ type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange"] }], directives: [{ type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "activeDescendant", "tabIndex", "disabled", "id", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }], directives: [{ type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -3784,6 +3982,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
         i18n-nextButtonTitle="kendo.multiviewcalendar.nextButtonTitle|The label for the next button in the Multiview calendar"
         nextButtonTitle="Navigate to next view"
+
+        i18n-parentViewButtonTitle="kendo.multiviewcalendar.parentViewButtonTitle|The title of the parent view button in the Multiview calendar header"
+        parentViewButtonTitle="Navigate to parent view"
     >
     </ng-container>
     <kendo-calendar-header
@@ -3791,6 +3992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         [currentDate]="activeDate"
         [min]="min"
         [max]="max"
+        [id]="headerId"
         [rangeLength]="views"
         [templateRef]="headerTitleTemplateRef?.templateRef"
         [isPrevDisabled]="isPrevDisabled"
@@ -3800,15 +4002,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         (todayButtonClick)="handleTodayButtonClick({ selectedDates: [$event], focusedDate: $event })"
         (prevButtonClick)="navigateView(prevView)"
         (nextButtonClick)="navigateView(nextView)"
-        [kendoEventsOutsideAngular]="{
-            focusin: handleHeaderFocus
-        }"
-        [scope]="this"
     >
     </kendo-calendar-header>
     <kendo-calendar-horizontal
+        [id]="calendarHeaderIdLabel"
+        [attr.aria-labelledby]="multiViewCalendarHeaderIdLabel"
         [activeView]="activeViewEnum"
-        [isActive]="isActive || (isHovered && !isHeaderActive)"
+        [activeDescendant]="ariaActivedescendant"
+        [isActive]="isActive || isHovered"
         [cellTemplateRef]="activeCellTemplate()?.templateRef"
         [weekNumberTemplateRef]="weekNumberTemplateRef?.templateRef"
         [cellUID]="cellUID"
@@ -3823,11 +4024,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         [selectionRange]="selectionRange"
         [selectedDates]="selectedDates"
         [orientation]="orientation"
+        [tabIndex]="tabIndex"
+        [disabled]="disabled"
         (cellClick)="handleCellClick($event)"
         (weekNumberCellClick)="handleWeekNumberClick($event)"
         (cellEnter)="emitCellEvent(cellEnter, $event)"
         (cellLeave)="emitCellEvent(cellLeave, $event)"
         (activeDateChange)="setActiveDate($event)"
+        (focusCalendar)="handleFocus()"
+        (blurCalendar)="handleFocusout($event)"
     >
     </kendo-calendar-horizontal>
   `
@@ -3891,6 +4096,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], blurEvent: [{
                 type: Output,
                 args: ['blur']
+            }], focusCalendar: [{
+                type: Output
             }], cellTemplate: [{
                 type: ContentChild,
                 args: [CellTemplateDirective, { static: false }]
@@ -3942,18 +4149,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], widgetId: [{
                 type: HostBinding,
                 args: ['attr.id']
-            }], calendarTabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
             }], ariaDisabled: [{
                 type: HostBinding,
                 args: ['attr.aria-disabled']
             }, {
                 type: HostBinding,
                 args: ['class.k-disabled']
-            }], ariaActivedescendant: [{
-                type: HostBinding,
-                args: ['attr.aria-activedescendant']
             }], handleFocusout: [{
                 type: HostListener,
                 args: ['focusout', ['$event']]
@@ -4177,10 +4378,11 @@ const differenceToScroll = (scrollTop, staticOffset, maxScrollDifference) => {
  * @hidden
  */
 class VirtualizationComponent {
-    constructor(scrollerFactory, container, renderer, zone) {
+    constructor(scrollerFactory, container, renderer, zone, scrollBarWidthService) {
         this.container = container;
         this.renderer = renderer;
         this.zone = zone;
+        this.scrollBarWidthService = scrollBarWidthService;
         this.direction = 'vertical';
         this.itemHeight = 1;
         this.itemWidth = 1;
@@ -4359,7 +4561,7 @@ class VirtualizationComponent {
         return indexOffset < this.containerScrollPosition ? ScrollDirection.Backward : ScrollDirection.Forward;
     }
 }
-VirtualizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VirtualizationComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+VirtualizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VirtualizationComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i5.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
 VirtualizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: { direction: "direction", itemHeight: "itemHeight", itemWidth: "itemWidth", topOffset: "topOffset", bottomOffset: "bottomOffset", maxScrollDifference: "maxScrollDifference", scrollOffsetSize: "scrollOffsetSize", scrollDuration: "scrollDuration", skip: "skip", take: "take", total: "total" }, outputs: { activeIndexChange: "activeIndexChange", pageChange: "pageChange", scrollChange: "scrollChange" }, host: { properties: { "class.k-flex": "this.wrapperClasses", "class.k-content": "this.wrapperClasses", "class.k-scrollable": "this.wrapperClasses", "class.k-scrollable-horizontal": "this.horizontalClass" } }, providers: [{
             provide: SCROLLER_FACTORY_TOKEN,
             useValue: DEFAULT_SCROLLER_FACTORY
@@ -4391,7 +4593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SCROLLER_FACTORY_TOKEN]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { direction: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i5.ScrollbarWidthService }]; }, propDecorators: { direction: [{
                 type: Input
             }], itemHeight: [{
                 type: Input
@@ -4802,15 +5004,21 @@ class ViewListComponent {
         this.min = new Date(MIN_DATE);
         this.max = new Date(MAX_DATE);
         this.selectedDates = [];
+        this.tabIndex = 0;
+        this.disabled = false;
         this.cellClick = new EventEmitter();
         this.weekNumberCellClick = new EventEmitter();
         this.activeDateChange = new EventEmitter();
         this.todayButtonClick = new EventEmitter();
         this.pageChange = new EventEmitter();
+        this.focusCalendar = new EventEmitter();
+        this.blurCalendar = new EventEmitter();
+        this.focusedCellChange = new EventEmitter();
         this.getComponentClass = true;
         this.dates = [];
         this.cols = [];
         this.weekNames = [];
+        this.wideWeekNames = [];
         this.take = VIEWS_COUNT;
         this.animateToIndex = true;
         this.indexToScroll = -1;
@@ -4835,7 +5043,8 @@ class ViewListComponent {
         return this.activeView === CalendarViewEnum.century;
     }
     ngOnInit() {
-        this.weekNames = this.getWeekNames();
+        this.weekNames = this.getWeekNames('short');
+        this.wideWeekNames = this.getWeekNames('wide');
         this.bottomOffset = this.getBottomOffset();
         this.viewOffset = -1 * this.dom.headerHeight;
         this.viewHeight = this.dom.viewHeight(this.activeView);
@@ -4847,7 +5056,8 @@ class ViewListComponent {
             return;
         }
         this.cols = new Array(this.service.rowLength({ prependCell: this.weekNumber })).fill('');
-        this.weekNames = hasChange(changes, 'weekNumber') && this.weekNumber ? this.getWeekNames() : this.weekNames;
+        this.weekNames = hasChange(changes, 'weekNumber') && this.weekNumber ? this.getWeekNames('short') : this.weekNames;
+        this.wideWeekNames = hasChange(changes, 'weekNumber') && this.weekNumber ? this.getWeekNames('wide') : this.weekNames;
         const activeViewChanged = hasChange(changes, 'activeView');
         const focusedDate = this.focusedDate;
         const viewDate = dateInRange(this.service.viewDate(focusedDate, this.max, this.minViewsToRender), this.min, this.max);
@@ -4912,6 +5122,9 @@ class ViewListComponent {
     isScrolled() {
         return this.virtualization.isListScrolled(this.service.skip(this.focusedDate, this.min));
     }
+    getTabIndex() {
+        return this.disabled ? null : this.tabIndex;
+    }
     getBottomOffset() {
         return this.getScrollableHeight() - this.dom.viewHeight(this.activeView);
     }
@@ -4923,23 +5136,25 @@ class ViewListComponent {
     getTake(skip) {
         return Math.min(this.total - skip, this.take);
     }
-    getWeekNames() {
-        const weekNames = shiftWeekNames(this.intl.dateFormatNames({ nameType: 'short', type: 'days' }), this.intl.firstDay());
+    getWeekNames(nameType) {
+        const weekNames = shiftWeekNames(this.intl.dateFormatNames({ nameType: nameType, type: 'days' }), this.intl.firstDay());
         return this.weekNumber ? [''].concat(weekNames) : weekNames;
     }
     intlChange() {
-        this.weekNames = this.getWeekNames();
+        this.weekNames = this.getWeekNames('short');
+        this.wideWeekNames = this.getWeekNames('wide');
         if (this.isMonthView()) {
             this.cdr.markForCheck();
         }
     }
 }
 ViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewListComponent, deps: [{ token: BusViewService }, { token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: CalendarDOMService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-calendar-header
         [currentDate]="activeDate"
         [min]="min"
         [max]="max"
+        [id]="id"
         [activeView]="activeView"
         [templateRef]="headerTitleTemplateRef"
         (todayButtonClick)="todayButtonClick.emit($event)"
@@ -4948,7 +5163,7 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
     <table class="k-calendar-weekdays k-calendar-table" style="table-layout: auto;" *ngIf="isMonthView()">
         <thead class="k-calendar-thead">
             <tr class="k-calendar-tr">
-                <th class="k-calendar-th" *ngFor="let name of weekNames">{{name}}</th>
+                <th class="k-calendar-th" *ngFor="let name of weekNames; let i = index;" scope="col" [attr.aria-label]="wideWeekNames[i]" role="columnheader">{{name}}</th>
             </tr>
         </thead>
     </table>
@@ -4970,6 +5185,10 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             #list
             role="grid"
             class="k-calendar-table"
+            [attr.tabindex]="getTabIndex()"
+            [attr.aria-labelledby]="id"
+            (focus)="focusCalendar.emit()"
+            (focusout)="blurCalendar.emit($event)"
         >
             <colgroup><col *ngFor="let _ of cols" /></colgroup>
 
@@ -4989,10 +5208,11 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                    [viewDate]="date"
                    (cellClick)="cellClick.emit($event)"
                    (weekNumberCellClick)="weekNumberCellClick.emit($event)"
+                   (focusedCellId)="focusedCellChange.emit($event)"
             ></tbody>
         </table>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewListComponent, decorators: [{
             type: Component,
             args: [{
@@ -5003,6 +5223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         [currentDate]="activeDate"
         [min]="min"
         [max]="max"
+        [id]="id"
         [activeView]="activeView"
         [templateRef]="headerTitleTemplateRef"
         (todayButtonClick)="todayButtonClick.emit($event)"
@@ -5011,7 +5232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
     <table class="k-calendar-weekdays k-calendar-table" style="table-layout: auto;" *ngIf="isMonthView()">
         <thead class="k-calendar-thead">
             <tr class="k-calendar-tr">
-                <th class="k-calendar-th" *ngFor="let name of weekNames">{{name}}</th>
+                <th class="k-calendar-th" *ngFor="let name of weekNames; let i = index;" scope="col" [attr.aria-label]="wideWeekNames[i]" role="columnheader">{{name}}</th>
             </tr>
         </thead>
     </table>
@@ -5033,6 +5254,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             #list
             role="grid"
             class="k-calendar-table"
+            [attr.tabindex]="getTabIndex()"
+            [attr.aria-labelledby]="id"
+            (focus)="focusCalendar.emit()"
+            (focusout)="blurCalendar.emit($event)"
         >
             <colgroup><col *ngFor="let _ of cols" /></colgroup>
 
@@ -5052,6 +5277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                    [viewDate]="date"
                    (cellClick)="cellClick.emit($event)"
                    (weekNumberCellClick)="weekNumberCellClick.emit($event)"
+                   (focusedCellId)="focusedCellChange.emit($event)"
             ></tbody>
         </table>
     </kendo-virtualization>
@@ -5077,6 +5303,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], selectedDates: [{
                 type: Input
+            }], tabIndex: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
             }], weekNumber: [{
                 type: Input
             }], cellClick: [{
@@ -5089,6 +5321,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], pageChange: [{
                 type: Output
+            }], focusCalendar: [{
+                type: Output
+            }], blurCalendar: [{
+                type: Output
+            }], focusedCellChange: [{
+                type: Output
             }], virtualization: [{
                 type: ViewChild,
                 args: [VirtualizationComponent, { static: false }]
@@ -5279,7 +5517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class CalendarMessages extends ComponentMessages {
 }
 CalendarMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-CalendarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CalendarMessages, selector: "kendo-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle" }, usesInheritance: true, ngImport: i0 });
+CalendarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CalendarMessages, selector: "kendo-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarMessages, decorators: [{
             type: Directive,
             args: [{
@@ -5292,6 +5530,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], nextButtonTitle: [{
                 type: Input
+            }], parentViewButtonTitle: [{
+                type: Input
             }] } });
 
 /**
@@ -5381,10 +5621,6 @@ class CalendarComponent {
         this.localization = localization;
         this.selectionService = selectionService;
         this.pickerService = pickerService;
-        /**
-         * @hidden
-         */
-        this.id = guid();
         /**
          * Determines whether the built-in min or max validators are enforced when validating a form.
          */
@@ -5487,6 +5723,7 @@ class CalendarComponent {
         this.resolvedPromise = Promise.resolve(null);
         this.destroyed = false;
         validatePackage(packageMetadata);
+        this.id = `kendo-calendarid-${this.bus.calendarId}`;
         this.setClasses(element.nativeElement);
         if (this.pickerService) {
             this.pickerService.calendar = this;
@@ -5511,6 +5748,12 @@ class CalendarComponent {
         this._focusedDate = focusedDate || getToday();
         this.setAriaActivedescendant();
     }
+    /**
+     * @hidden
+     */
+    get headerId() {
+        return this.id + '-header';
+    }
     get focusedDate() {
         return this._focusedDate;
     }
@@ -5706,10 +5949,6 @@ class CalendarComponent {
     get widgetId() {
         return this.id;
     }
-    get calendarTabIndex() {
-        // in Classic mode, the inner MultiViewCalendar is the focusable element
-        return this.disabled || this.type === 'classic' ? undefined : this.tabIndex;
-    }
     get ariaDisabled() {
         // in Classic mode, the inner MultiViewCalendar should handle the disabled class and aria attr
         return this.type === 'classic' ? undefined : this.disabled;
@@ -5780,7 +6019,7 @@ class CalendarComponent {
         this.cdr.detectChanges();
     }
     /**
-     * Focuses the host element of the Calendar.
+     * Focuses the Calendar by making the table.k-calendar-table element active.
      *
      * @example
      * ```ts
@@ -5795,19 +6034,18 @@ class CalendarComponent {
      * ```
      */
     focus() {
-        const focusTarget = this.type === 'infinite' ?
-            this.element && this.element.nativeElement :
-            this.multiViewCalendar;
-        if (isPresent(focusTarget)) {
-            focusTarget.focus();
-        }
+        var _a, _b, _c;
+        this.currentlyFocusedElement = this.type === 'infinite' ?
+            (_a = this.element) === null || _a === void 0 ? void 0 : _a.nativeElement.querySelector(selectors.infiniteCalendarTable) :
+            this.currentlyFocusedElement = (_b = this.element) === null || _b === void 0 ? void 0 : _b.nativeElement.querySelector(selectors.multiViewCalendarTable);
+        (_c = this.currentlyFocusedElement) === null || _c === void 0 ? void 0 : _c.focus();
     }
     /**
      * Blurs the Calendar component.
      */
     blur() {
         const blurTarget = this.type === 'infinite' ?
-            this.element && this.element.nativeElement :
+            this.currentlyFocusedElement :
             this.multiViewCalendar;
         if (isPresent(blurTarget)) {
             blurTarget.blur();
@@ -5984,6 +6222,8 @@ class CalendarComponent {
      * @hidden
      */
     handleCellClick({ date, modifiers }) {
+        this.focus();
+        this.selectionService.lastClicked = date;
         this.performSelection(date, modifiers);
     }
     /**
@@ -6007,6 +6247,7 @@ class CalendarComponent {
         if (this.element.nativeElement.contains(args.relatedTarget)) {
             return;
         }
+        ;
         this.isActive = false;
         // the injector can get the NgControl instance of the parent component (for example, the DateTimePicker)
         // and enters the zone for no reason because the parent component is still untouched
@@ -6037,7 +6278,7 @@ class CalendarComponent {
      */
     handleMultiViewCalendarKeydown(args) {
         // Prevent form from submitting on enter if used in datepicker (classic view)
-        if (isPresent(this.pickerService) && args.keyCode === Keys.Enter) {
+        if (isPresent(this.pickerService) && args.keyCode === Keys$1.Enter) {
             args.preventDefault();
         }
     }
@@ -6095,29 +6336,46 @@ class CalendarComponent {
         }
     }
     handleKeydown(args) {
-        const headerActive = this.type === 'classic' && this.multiViewCalendar.isHeaderActive;
-        if (headerActive) {
-            return;
-        }
-        // reserve the alt + arrow key commands for the picker
-        const arrowKeyPressed = [Keys.ArrowUp, Keys.ArrowRight, Keys.ArrowDown, Keys.ArrowLeft].indexOf(args.keyCode) !== -1;
-        if (isPresent(this.pickerService) && arrowKeyPressed && args.altKey) {
-            return;
-        }
-        // Prevent form from submitting on enter if used in datepicker (infinite view)
-        if (isPresent(this.pickerService) && args.keyCode === Keys.Enter) {
-            args.preventDefault();
-        }
-        const candidate = dateInRange(this.navigator.move(this.focusedDate, this.navigator.action(args), this.activeViewEnum), this.min, this.max);
-        if (!isEqual(this.focusedDate, candidate)) {
-            this.focusedDate = candidate;
-            this.detectChanges();
-            args.preventDefault();
-        }
-        if (args.keyCode === Keys.Enter) {
-            this.performSelection(this.focusedDate, args);
+        if (this.type === 'infinite') {
+            // reserve the alt + arrow key commands for the picker
+            const ctrlKey = args.ctrlKey || args.metaKey;
+            const arrowKeyPressed = [Keys$1.ArrowUp, Keys$1.ArrowRight, Keys$1.ArrowDown, Keys$1.ArrowLeft].indexOf(args.keyCode) !== -1;
+            const reserveKeyCommandsForPicker = isPresent(this.pickerService) && arrowKeyPressed && args.altKey;
+            if (reserveKeyCommandsForPicker) {
+                return;
+            }
+            if (ctrlKey && arrowKeyPressed) {
+                args.preventDefault();
+            }
+            // Prevent form from submitting on enter if used in datepicker (infinite view)
+            const preventSubmitInDatePicker = isPresent(this.pickerService) && args.keyCode === Keys$1.Enter;
+            if (preventSubmitInDatePicker) {
+                args.preventDefault();
+            }
+            const candidate = dateInRange(this.navigator.move(this.focusedDate, this.navigator.action(args), this.activeViewEnum), this.min, this.max);
+            if (!isEqual(this.focusedDate, candidate)) {
+                this.focusedDate = candidate;
+                this.detectChanges();
+                args.preventDefault();
+            }
+            if (args.keyCode === Keys$1.Enter) {
+                this.selectionService.lastClicked = this.focusedDate;
+                this.performSelection(this.focusedDate, args);
+            }
+            if (args.keyCode === Keys$1.KeyT) {
+                this.focusToday();
+            }
+            if (isArrowWithShiftPressed(args)) {
+                args.anyArrow = true;
+                this.performSelection(this.focusedDate, args);
+            }
         }
     }
+    focusToday() {
+        this.focusedDate = getToday();
+        this.bus.moveToBottom(this.activeViewEnum);
+        this.cdr.detectChanges();
+    }
     detectChanges() {
         if (!this.destroyed) {
             this.cdr.detectChanges();
@@ -6129,16 +6387,19 @@ class CalendarComponent {
         }
     }
     setAriaActivedescendant() {
+        var _a;
         // in Classic mode, the inner MultiViewCalendar handles the activedescendant
-        if (!isPresent(this.element) || (this.type === 'classic' && !this.element.nativeElement.hasAttribute('aria-activedescendant'))) {
+        const infiniteCalendarTable = (_a = this.element.nativeElement) === null || _a === void 0 ? void 0 : _a.querySelector(selectors.infiniteCalendarTable);
+        const activedescendantHandledByInnerMultiViewCalendar = !isPresent(infiniteCalendarTable) || (this.type === 'classic' && !infiniteCalendarTable.hasAttribute(attributeNames.ariaActiveDescendant));
+        if (activedescendantHandledByInnerMultiViewCalendar) {
             return;
         }
         if (this.type === 'classic') {
-            this.renderer.removeAttribute(this.element.nativeElement, 'aria-activedescendant');
+            this.renderer.removeAttribute(infiniteCalendarTable, attributeNames.ariaActiveDescendant);
             return;
         }
         const focusedCellId = this.cellUID + this.focusedDate.getTime();
-        this.renderer.setAttribute(this.element.nativeElement, 'aria-activedescendant', focusedCellId);
+        this.renderer.setAttribute(infiniteCalendarTable, attributeNames.ariaActiveDescendant, focusedCellId);
     }
     parseSelectionToValue(selection) {
         selection = selection || [];
@@ -6161,7 +6422,7 @@ class CalendarComponent {
     }
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarComponent, deps: [{ token: BusViewService }, { token: CalendarDOMService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: ScrollSyncService }, { token: DisabledDatesService }, { token: i1$1.LocalizationService }, { token: SelectionService }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CalendarComponent, selector: "kendo-calendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.tabindex": "this.calendarTabIndex", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CalendarComponent, selector: "kendo-calendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
         BusViewService,
         CALENDAR_VALUE_ACCESSOR,
         CALENDAR_RANGE_VALIDATORS,
@@ -6185,6 +6446,9 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 
         i18n-nextButtonTitle="kendo.calendar.nextButtonTitle|The title of the next button in the Classic calendar"
         nextButtonTitle="Navigate to next view"
+
+        i18n-parentViewButtonTitle="kendo.calendar.parentViewButtonTitle|The title of the parent view button in the calendar header"
+        parentViewButtonTitle="Navigate to parent view"
     >
     </ng-container>
     <ng-container *ngIf="type === 'infinite'">
@@ -6202,6 +6466,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         <kendo-calendar-viewlist
             [activeView]="activeViewEnum"
             [isActive]="isActive"
+            [id]="headerId"
             [cellTemplateRef]="activeCellTemplate()?.templateRef"
             [headerTitleTemplateRef]="headerTitleTemplateRef?.templateRef"
             [weekNumberTemplateRef]="weekNumberTemplateRef?.templateRef"
@@ -6211,6 +6476,8 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [focusedDate]="focusedDate"
             [weekNumber]="weekNumber"
             [selectedDates]="selectedDates"
+            [tabIndex]="tabIndex"
+            [disabled]="disabled"
             (todayButtonClick)="handleDateChange({
                 selectedDates: [$event],
                 focusedDate: $event
@@ -6219,6 +6486,8 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             (weekNumberCellClick)="handleWeekNumberClick($event)"
             (activeDateChange)="handleActiveDateChange($event)"
             (pageChange)="onPageChange()"
+            (focusCalendar)="handleFocus()"
+            (blurCalendar)="handleBlur($event)"
         >
         </kendo-calendar-viewlist>
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
@@ -6229,7 +6498,9 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [views]="1"
             [min]="min"
             [max]="max"
+            [id]="id"
             [isActive]="isActive"
+            [tabIndex]="tabIndex"
             [activeView]="activeView"
             [bottomView]="bottomView"
             [topView]="topView"
@@ -6249,7 +6520,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             (activeViewChange)="handleActiveViewChange($event)"
             (navigate)="handleNavigate($event)"
             (valueChange)="handleMultiViewCalendarValueChange($event, multiviewcalendar.focusedDate)"
-            (focus)="handleFocus()"
+            (focusCalendar)="handleFocus()"
             (blur)="handleBlur($event)"
             (keydown)="handleMultiViewCalendarKeydown($event)"
         >
@@ -6257,11 +6528,12 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 [today]="localization.get('today')"
                 [prevButtonTitle]="localization.get('prevButtonTitle')"
                 [nextButtonTitle]="localization.get('nextButtonTitle')"
+                [parentViewButtonTitle]="localization.get('parentViewButtonTitle')"
             >
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
     </ng-container>
-  `, isInline: true, components: [{ type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange"] }, { type: i5.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: 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"], exportAs: ["kendo-multiviewcalendar"] }, { type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { type: i5.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: 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"] }, { type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -6293,6 +6565,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
         i18n-nextButtonTitle="kendo.calendar.nextButtonTitle|The title of the next button in the Classic calendar"
         nextButtonTitle="Navigate to next view"
+
+        i18n-parentViewButtonTitle="kendo.calendar.parentViewButtonTitle|The title of the parent view button in the calendar header"
+        parentViewButtonTitle="Navigate to parent view"
     >
     </ng-container>
     <ng-container *ngIf="type === 'infinite'">
@@ -6310,6 +6585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <kendo-calendar-viewlist
             [activeView]="activeViewEnum"
             [isActive]="isActive"
+            [id]="headerId"
             [cellTemplateRef]="activeCellTemplate()?.templateRef"
             [headerTitleTemplateRef]="headerTitleTemplateRef?.templateRef"
             [weekNumberTemplateRef]="weekNumberTemplateRef?.templateRef"
@@ -6319,6 +6595,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [focusedDate]="focusedDate"
             [weekNumber]="weekNumber"
             [selectedDates]="selectedDates"
+            [tabIndex]="tabIndex"
+            [disabled]="disabled"
             (todayButtonClick)="handleDateChange({
                 selectedDates: [$event],
                 focusedDate: $event
@@ -6327,6 +6605,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             (weekNumberCellClick)="handleWeekNumberClick($event)"
             (activeDateChange)="handleActiveDateChange($event)"
             (pageChange)="onPageChange()"
+            (focusCalendar)="handleFocus()"
+            (blurCalendar)="handleBlur($event)"
         >
         </kendo-calendar-viewlist>
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
@@ -6337,7 +6617,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [views]="1"
             [min]="min"
             [max]="max"
+            [id]="id"
             [isActive]="isActive"
+            [tabIndex]="tabIndex"
             [activeView]="activeView"
             [bottomView]="bottomView"
             [topView]="topView"
@@ -6357,7 +6639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             (activeViewChange)="handleActiveViewChange($event)"
             (navigate)="handleNavigate($event)"
             (valueChange)="handleMultiViewCalendarValueChange($event, multiviewcalendar.focusedDate)"
-            (focus)="handleFocus()"
+            (focusCalendar)="handleFocus()"
             (blur)="handleBlur($event)"
             (keydown)="handleMultiViewCalendarKeydown($event)"
         >
@@ -6365,6 +6647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [today]="localization.get('today')"
                 [prevButtonTitle]="localization.get('prevButtonTitle')"
                 [nextButtonTitle]="localization.get('nextButtonTitle')"
+                [parentViewButtonTitle]="localization.get('parentViewButtonTitle')"
             >
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
@@ -6480,9 +6763,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], widgetId: [{
                 type: HostBinding,
                 args: ['attr.id']
-            }], calendarTabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
             }], ariaDisabled: [{
                 type: HostBinding,
                 args: ['attr.aria-disabled']
@@ -6563,6 +6843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
+let nextId = 0;
 const MIN_DOC_LINK$1 = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent/#toc-min';
 const MAX_DOC_LINK$1 = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent/#toc-max';
 const VALUE_DOC_LINK$3 = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/#toc-using-with-json';
@@ -6613,6 +6894,7 @@ class KendoDate {
         validatePackage(packageMetadata);
         this.monthNames = this.allFormatedMonths();
         this.dayPeriods = this.allDayPeriods();
+        nextId++;
         if (!value) {
             this.value = getDate(new Date());
             const sampleFormat = this.dateFormatString(this.value, this.format).symbols;
@@ -6999,10 +7281,6 @@ class DateInputComponent {
         this.injector = injector;
         this.localization = localization;
         this.pickerService = pickerService;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
         /**
          * Sets or gets the `disabled` property of the DateInput and
          * determines whether the component is active
@@ -7026,7 +7304,7 @@ class DateInputComponent {
         /**
          * @hidden
          */
-        this.role = 'spinbutton';
+        this.role = 'textbox';
         /**
          * @hidden
          */
@@ -7103,10 +7381,6 @@ class DateInputComponent {
          * [spinner buttons]({% slug spinbuttons_dateinput %}).
          */
         this.spinners = false;
-        /**
-         * @hidden
-         */
-        this.isPopupOpen = false;
         /**
          * @hidden
          */
@@ -7199,11 +7473,26 @@ class DateInputComponent {
         this._size = DEFAULT_SIZE;
         this._rounded = DEFAULT_ROUNDED;
         this._fillMode = DEFAULT_FILL_MODE;
+        this.subs = new Subscription();
         this.symbolsMap = this.dateSymbolMap();
         this.updateFormatSections();
         if (this.pickerService) {
             this.pickerService.input = this;
         }
+        else {
+            this.ariaReadOnly = null;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get focusableId() {
+        if (this.pickerType) {
+            return `${this.pickerType}-${nextId}`;
+        }
+        else {
+            return `dateinput-${nextId}`;
+        }
     }
     /**
      * @hidden
@@ -7328,6 +7617,13 @@ class DateInputComponent {
             }
         }
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+    }
     get inputFormat() {
         if (!this.format) {
             return DEFAULT_FORMAT$1;
@@ -7363,6 +7659,21 @@ class DateInputComponent {
     containsElement(element) {
         return Boolean(closest(element, node => node === this.wrapper.nativeElement));
     }
+    /**
+     * @hidden
+     */
+    ngOnInit() {
+        this.kendoDate = this.getKendoDate(this.value);
+        this.updateElementValue();
+        this.subs.add(this.intl.changes.subscribe(this.intlChange.bind(this)));
+        this.ngControl = this.injector.get(NgControl, null);
+        if (this.wrapper) {
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
+            this.ngZone.runOutsideAngular(() => {
+                this.bindEvents();
+            });
+        }
+    }
     /**
      * @hidden
      */
@@ -7384,10 +7695,16 @@ class DateInputComponent {
             this.updateElementValue(this.isActive);
         }
     }
+    ngAfterViewInit() {
+        var _a, _b;
+        this.setComponentClasses();
+        const formControl = (_a = this.injector.get(NgControl, null)) === null || _a === void 0 ? void 0 : _a.control;
+        this.control = formControl;
+        this.subs.add((_b = this.formControl) === null || _b === void 0 ? void 0 : _b.statusChanges.subscribe(() => this.setAriaInvalid()));
+        this.setAriaInvalid();
+    }
     ngOnDestroy() {
-        if (this.intlSubscription) {
-            this.intlSubscription.unsubscribe();
-        }
+        this.subs.unsubscribe();
         if (this.pickerService) {
             this.pickerService.input = null;
         }
@@ -7396,32 +7713,28 @@ class DateInputComponent {
     /**
      * @hidden
      */
-    validate(control) {
-        return this.minValidator(control) || this.maxValidator(control) || this.incompleteValidator(control, this.isDateIncomplete);
+    setAriaInvalid() {
+        if (!this.control) {
+            return;
+        }
+        if (this.control.invalid) {
+            this.renderer.setAttribute(this.inputElement, attributeNames.ariaInvalid, 'true');
+        }
+        else {
+            this.renderer.setAttribute(this.inputElement, attributeNames.ariaInvalid, 'false');
+        }
     }
     /**
      * @hidden
      */
-    registerOnValidatorChange(fn) {
-        this.onValidatorChange = fn;
+    validate(control) {
+        return this.minValidator(control) || this.maxValidator(control) || this.incompleteValidator(control, this.isDateIncomplete);
     }
     /**
      * @hidden
      */
-    ngOnInit() {
-        this.kendoDate = this.getKendoDate(this.value);
-        this.updateElementValue();
-        this.intlSubscription = this.intl.changes.subscribe(this.intlChange.bind(this));
-        this.ngControl = this.injector.get(NgControl, null);
-        if (this.wrapper) {
-            this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
-            this.ngZone.runOutsideAngular(() => {
-                this.bindEvents();
-            });
-        }
-    }
-    ngAfterViewInit() {
-        this.setComponentClasses();
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
     }
     /**
      * @hidden
@@ -7801,34 +8114,34 @@ class DateInputComponent {
         if (this.disabled || this.readonly || event.altKey || event.ctrlKey || event.metaKey) {
             return;
         }
-        if (event.keyCode === Keys.Tab) {
+        if (event.keyCode === Keys$1.Tab) {
             const moved = this.switchDateSegment(event.shiftKey ? -1 : 1);
             if (moved) {
                 event.preventDefault();
             }
             return;
         }
-        if (event.keyCode === Keys.Backspace) {
+        if (event.keyCode === Keys$1.Backspace) {
             this.backspace = true;
             return;
         }
         switch (event.keyCode) {
-            case Keys.ArrowDown:
+            case Keys$1.ArrowDown:
                 this.modifyDateSegmentValue(-1);
                 break;
-            case Keys.ArrowUp:
+            case Keys$1.ArrowUp:
                 this.modifyDateSegmentValue(1);
                 break;
-            case Keys.ArrowRight:
+            case Keys$1.ArrowRight:
                 this.switchDateSegment(1);
                 break;
-            case Keys.ArrowLeft:
+            case Keys$1.ArrowLeft:
                 this.switchDateSegment(-1);
                 break;
-            case Keys.Home:
+            case Keys$1.Home:
                 this.selectNearestSegment(0);
                 break;
-            case Keys.End:
+            case Keys$1.End:
                 this.selectNearestSegment(this.inputValue.length);
                 break;
             default:
@@ -7926,7 +8239,7 @@ class DateInputComponent {
     }
 }
 DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1$1.LocalizationService }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrect: "autoCorrect", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateInputComponent, selector: "kendo-dateinput", inputs: { pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrect: "autoCorrect", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: L10N_PREFIX, useValue: 'kendo.dateinput' },
@@ -8076,7 +8389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.IntlService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i1$1.LocalizationService }, { type: PickerService, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { focusableId: [{
+                }] }]; }, propDecorators: { pickerType: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -8306,10 +8619,6 @@ class DatePickerComponent {
         this.pickerService = pickerService;
         this.disabledDatesService = disabledDatesService;
         this.touchEnabled = touchEnabled;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
         /**
          * Defines the active view that the Calendar initially renders
          * ([see example]({% slug calendar_type_datepicker %}#toc-active-view)).
@@ -8512,7 +8821,6 @@ class DatePickerComponent {
          * @hidden
          */
         this.wrapperClasses = true;
-        this.popupUID = guid();
         this._popupSettings = { animate: true };
         this._show = false;
         this._value = null;
@@ -8706,12 +9014,11 @@ class DatePickerComponent {
     get disabledClass() {
         return this.disabled;
     }
-    /**
-     * @hidden
-     */
-    get inputRole() {
-        return this.readOnlyInput ? 'listbox' : 'spinbutton';
+    get popupUID() {
+        var _a;
+        return (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.id;
     }
+    ;
     get isActive() {
         return this._active;
     }
@@ -8960,18 +9267,18 @@ class DatePickerComponent {
      */
     handleKeydown(e) {
         const { altKey, shiftKey, keyCode, target } = e;
-        if (keyCode === Keys.Escape) {
+        if (keyCode === Keys$1.Escape) {
             this.show = false;
         }
         if (altKey) {
-            if (keyCode === Keys.ArrowDown && !this.show) {
+            if (keyCode === Keys$1.ArrowDown && !this.show) {
                 this.show = true;
             }
-            if (keyCode === Keys.ArrowUp) {
+            if (keyCode === Keys$1.ArrowUp) {
                 this.show = false;
             }
         }
-        if (keyCode === Keys.Tab && this.show && this.calendar.isActive && isTabExitingCalendar(this.calendarType, target, shiftKey)) {
+        if (keyCode === Keys$1.Tab && this.show && this.calendar.isActive && isTabExitingCalendar(this.calendarType, target, shiftKey)) {
             this.input.focus();
             this.show = false;
         }
@@ -8995,6 +9302,7 @@ class DatePickerComponent {
             return;
         }
         this._show = show;
+        const inputElement = this.wrapper.nativeElement.querySelector('input');
         if (show) {
             const direction = this.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
@@ -9007,13 +9315,27 @@ class DatePickerComponent {
                 popupClass: this.popupClasses,
                 positionMode: 'absolute'
             });
+            if (this.calendar.type === 'infinite') {
+                this.pickerSubscriptions.add(this.calendar.monthView.focusedCellChange.subscribe((id) => {
+                    this.renderer.setAttribute(inputElement, attributeNames.ariaActiveDescendant, id);
+                }));
+            }
+            else {
+                this.pickerSubscriptions.add(this.calendar.multiViewCalendar.viewList.focusedCellChange.subscribe((id) => {
+                    this.renderer.setAttribute(inputElement, attributeNames.ariaActiveDescendant, id);
+                }));
+            }
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
+            this.renderer.setAttribute(inputElement, attributeNames.ariaControls, this.popupUID);
             this.subscription = this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
             this.popupRef.close();
             this.popupRef = null;
             this.subscription.unsubscribe();
+            this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(inputElement, attributeNames.ariaActiveDescendant);
+            this.cdr.detectChanges();
         }
     }
     focusInput() {
@@ -9129,8 +9451,8 @@ class DatePickerComponent {
         }
     }
 }
-DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], focusableId: "focusableId", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
@@ -9158,8 +9480,8 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </ng-container>
         <kendo-dateinput
             #input
-            [role]="inputRole"
-            [focusableId]="focusableId"
+            [role]="'combobox'"
+            pickerType="datepicker"
             [hasPopup]="true"
             [isPopupOpen]="show"
             [disabled]="disabled"
@@ -9233,7 +9555,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         <ng-template>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "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: 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: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: 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: 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: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -9269,8 +9591,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-container>
         <kendo-dateinput
             #input
-            [role]="inputRole"
-            [focusableId]="focusableId"
+            [role]="'combobox'"
+            pickerType="datepicker"
             [hasPopup]="true"
             [isPopupOpen]="show"
             [disabled]="disabled"
@@ -9346,7 +9668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: PickerService }, { type: DisabledDatesService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i1$2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: PickerService }, { type: DisabledDatesService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -9408,8 +9730,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], navigationItemTemplateRef: [{
                 type: Input,
                 args: ['navigationItemTemplate']
-            }], focusableId: [{
-                type: Input
             }], activeView: [{
                 type: Input
             }], bottomView: [{
@@ -10152,12 +10472,13 @@ const services = {
  * @hidden
  */
 class TimeListComponent {
-    constructor(element, injector, dom, renderer, zone) {
+    constructor(element, injector, dom, renderer, zone, localization) {
         this.element = element;
         this.injector = injector;
         this.dom = dom;
         this.renderer = renderer;
         this.zone = zone;
+        this.localization = localization;
         this.min = cloneDate(MIDNIGHT_DATE);
         this.max = cloneDate(MAX_TIME);
         this.step = 1;
@@ -10171,11 +10492,32 @@ class TimeListComponent {
         this.data = [];
         this.indexToScroll = -1;
         this.domEvents = [];
+        this.hostElement = this.element.nativeElement;
+    }
+    get roleAttribute() {
+        return this.isDayPeriod ? 'listbox' : 'spinbutton';
+    }
+    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;
     }
+    get isDayPeriod() {
+        var _a;
+        return ((_a = this.part) === null || _a === void 0 ? void 0 : _a.type) === 'dayperiod';
+    }
     ngOnChanges(changes) {
+        var _a, _b;
         if (changes.part) {
             this.service = this.injector.get(services[this.part.type]);
             this.service.configure(this.serviceSettings());
@@ -10195,6 +10537,8 @@ 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;
@@ -10227,6 +10571,9 @@ class TimeListComponent {
             this.animateToIndex = true;
         });
     }
+    getCurrentItem() {
+        return this.indexToScroll >= 0 ? this.data[this.indexToScroll] : null;
+    }
     handleChange(dataItem) {
         const candidate = this.service.apply(this.value, dataItem.value);
         if (this.value.getTime() === candidate.getTime()) {
@@ -10343,8 +10690,8 @@ class TimeListComponent {
         this.domEvents.push(this.renderer.listen(element, 'mouseover', () => !this.isActive && this.focus()), this.renderer.listen(element, 'click', () => this.focus()), this.renderer.listen(element, 'blur', () => this.isActive = false), this.renderer.listen(element, 'focus', () => this.isActive = true), this.renderer.listen(element, 'keydown', this.handleKeyDown.bind(this)));
     }
 }
-TimeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: TimePickerDOMService }, { token: i0.Renderer2 }, { token: i0.NgZone }], 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.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: TimePickerDOMService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1$1.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: `
     <kendo-virtualization
         [skip]="skip"
         [take]="total"
@@ -10362,9 +10709,12 @@ TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 click: handleItemClick
             }"
             [scope]="this"
+            [attr.role]="isDayPeriod ? 'presentation' : null"
         >
             <li *ngFor="let item of data; let index = index;" class="k-item"
-                [attr.data-timelist-item-index]="index">
+                [attr.data-timelist-item-index]="index"
+                [attr.role]="isDayPeriod ? 'option' : null"
+                >
                 <span>{{item.text}}</span>
             </li>
         </ul>
@@ -10392,16 +10742,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 click: handleItemClick
             }"
             [scope]="this"
+            [attr.role]="isDayPeriod ? 'presentation' : null"
         >
             <li *ngFor="let item of data; let index = index;" class="k-item"
-                [attr.data-timelist-item-index]="index">
+                [attr.data-timelist-item-index]="index"
+                [attr.role]="isDayPeriod ? 'option' : null"
+                >
                 <span>{{item.text}}</span>
             </li>
         </ul>
     </kendo-virtualization>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }, { type: TimePickerDOMService }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { min: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }, { type: TimePickerDOMService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1$1.LocalizationService }]; }, propDecorators: { min: [{
                 type: Input
             }], max: [{
                 type: Input
@@ -10418,6 +10771,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], virtualization: [{
                 type: ViewChild,
                 args: [VirtualizationComponent, { static: true }]
+            }], roleAttribute: [{
+                type: HostBinding,
+                args: ["attr.role"]
+            }], 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"]
@@ -10497,7 +10862,7 @@ const snapTime = snappers => (candidate, min) => {
 class TimePickerMessages extends ComponentMessages {
 }
 TimePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TimePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TimePickerMessages, selector: "kendo-timepicker-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", now: "now", nowLabel: "nowLabel", toggle: "toggle" }, usesInheritance: true, ngImport: i0 });
+TimePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TimePickerMessages, selector: "kendo-timepicker-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", now: "now", nowLabel: "nowLabel", toggle: "toggle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerMessages, decorators: [{
             type: Directive,
             args: [{
@@ -10518,6 +10883,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], toggle: [{
                 type: Input
+            }], hour: [{
+                type: Input
+            }], minute: [{
+                type: Input
+            }], second: [{
+                type: Input
+            }], millisecond: [{
+                type: Input
+            }], dayperiod: [{
+                type: Input
             }] } });
 
 /**
@@ -10864,15 +11239,15 @@ class TimeSelectorComponent {
     handleKeydown(args) {
         const { keyCode, altKey } = args;
         // reserve the alt + arrow key commands for the picker
-        const arrowKeyPressed = [Keys.ArrowLeft, Keys.ArrowRight].indexOf(keyCode) !== -1;
+        const arrowKeyPressed = [Keys$1.ArrowLeft, Keys$1.ArrowRight].indexOf(keyCode) !== -1;
         if (isPresent(this.pickerService) && arrowKeyPressed && altKey) {
             return;
         }
-        if (keyCode === Keys.Enter && !this.hasActiveButton()) {
+        if (keyCode === Keys$1.Enter && !this.hasActiveButton()) {
             this.handleAccept();
         }
-        else if (keyCode === Keys.ArrowLeft || keyCode === Keys.ArrowRight) {
-            this.focusList(keyCode === Keys.ArrowLeft ? Direction.Left : Direction.Right);
+        else if (keyCode === Keys$1.ArrowLeft || keyCode === Keys$1.ArrowRight) {
+            this.focusList(keyCode === Keys$1.ArrowLeft ? Direction.Left : Direction.Right);
         }
     }
     emitBlur(args) {
@@ -11241,7 +11616,8 @@ const formatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PA
  * Represents the [Kendo UI TimePicker component for Angular]({% slug overview_timepicker %}#toc-basic-usage).
  */
 class TimePickerComponent {
-    constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, touchEnabled) {
+    constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, touchEnabled) {
+        this.bus = bus;
         this.zone = zone;
         this.localization = localization;
         this.cdr = cdr;
@@ -11252,10 +11628,6 @@ class TimePickerComponent {
         this.pickerService = pickerService;
         this.intl = intl;
         this.touchEnabled = touchEnabled;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
         /**
          * Sets or gets the `disabled` property of the TimePicker and
          * determines whether the component is active
@@ -11393,7 +11765,6 @@ class TimePickerComponent {
          * @hidden
          */
         this.wrapperClasses = true;
-        this.popupUID = guid();
         this.onControlChange = noop$2;
         this.onControlTouched = noop$2;
         this.onValidatorChange = noop$2;
@@ -11572,12 +11943,10 @@ class TimePickerComponent {
     get disabledClass() {
         return this.disabled;
     }
-    /**
-     * @hidden
-     */
-    get inputRole() {
-        return this.readOnlyInput ? 'listbox' : 'spinbutton';
+    get popupUID() {
+        return `k-timepicker-popup-${this.bus.calendarId}-`;
     }
+    ;
     get isActive() {
         return this._active;
     }
@@ -11677,15 +12046,17 @@ class TimePickerComponent {
      */
     handleKeydown(event) {
         const { altKey, keyCode } = event;
-        if (keyCode === Keys.Escape) {
+        if (keyCode === Keys$1.Escape) {
             this.show = false;
             return;
         }
         if (altKey) {
-            if (keyCode === Keys.ArrowUp) {
+            if (keyCode === Keys$1.ArrowUp) {
+                event.preventDefault();
                 this.show = false;
             }
-            if (keyCode === Keys.ArrowDown && !this.show) {
+            if (keyCode === Keys$1.ArrowDown && !this.show) {
+                event.preventDefault();
                 this.show = true;
             }
         }
@@ -11878,6 +12249,7 @@ class TimePickerComponent {
         }
         this._show = show;
         this.cdr.markForCheck();
+        const inputElement = this.wrapper.nativeElement.querySelector('input');
         if (show) {
             const direction = this.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
@@ -11891,11 +12263,13 @@ class TimePickerComponent {
                 positionMode: 'absolute'
             });
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
+            this.renderer.setAttribute(inputElement, attributeNames.ariaControls, this.popupUID);
             this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
             this.popupRef.close();
             this.popupRef = null;
+            this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
         }
     }
     focusInput() {
@@ -12005,12 +12379,13 @@ class TimePickerComponent {
         }
     }
 }
-TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: i1.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", rangeValidation: "rangeValidation", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, deps: [{ token: BusViewService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: i1.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", rangeValidation: "rangeValidation", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
         LocalizationService,
+        BusViewService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.timepicker'
@@ -12038,16 +12413,31 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
 
             i18n-toggle="kendo.timepicker.toggle|The label for the toggle button in the timepicker component"
             toggle="Toggle time list"
+
+            i18n-hour="kendo.timepicker.hour|The label for the hour part in the timepicker component"
+            hour="Hour"
+
+            i18n-minute="kendo.timepicker.minute|The label for the minute part in the timepicker component"
+            minute="Minute"
+
+            i18n-second="kendo.timepicker.second|The label for the second part in the timepicker component"
+            second="Second"
+
+            i18n-millisecond="kendo.timepicker.millisecond|The label for the millisecond part in the timepicker component"
+            millisecond="Millisecond"
+
+            i18n-dayperiod="kendo.timepicker.dayperiod|The label for the dayperiod part in the timepicker component"
+            dayperiod="Dayperiod"
         >
         </ng-container>
         <kendo-dateinput
             #input
-            [focusableId]="focusableId"
+            pickerType="timepicker"
             [hasPopup]="true"
             [isPopupOpen]="show"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
-            [role]="inputRole"
+            [role]="'combobox'"
             [ariaReadOnly]="readonly"
             [format]="format"
             [formatPlaceholder]="formatPlaceholder"
@@ -12067,6 +12457,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         <button
             #toggleButton
             type="button"
+            tabindex="-1"
             class="k-input-button k-button k-icon-button"
             [attr.title]="localization.get('toggle')"
             [attr.aria-label]="localization.get('toggle')"
@@ -12103,12 +12494,17 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                     [cancel]="localization.get('cancel')"
                     [nowLabel]="localization.get('nowLabel')"
                     [now]="localization.get('now')"
+                    [hour]="localization.get('hour')"
+                    [minute]="localization.get('minute')"
+                    [second]="localization.get('second')"
+                    [millisecond]="localization.get('millisecond')"
+                    [dayperiod]="localization.get('dayperiod')"
                 >
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "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: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: 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: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i5.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: [{
@@ -12119,6 +12515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
                         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
                         LocalizationService,
+                        BusViewService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.timepicker'
@@ -12148,16 +12545,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
             i18n-toggle="kendo.timepicker.toggle|The label for the toggle button in the timepicker component"
             toggle="Toggle time list"
+
+            i18n-hour="kendo.timepicker.hour|The label for the hour part in the timepicker component"
+            hour="Hour"
+
+            i18n-minute="kendo.timepicker.minute|The label for the minute part in the timepicker component"
+            minute="Minute"
+
+            i18n-second="kendo.timepicker.second|The label for the second part in the timepicker component"
+            second="Second"
+
+            i18n-millisecond="kendo.timepicker.millisecond|The label for the millisecond part in the timepicker component"
+            millisecond="Millisecond"
+
+            i18n-dayperiod="kendo.timepicker.dayperiod|The label for the dayperiod part in the timepicker component"
+            dayperiod="Dayperiod"
         >
         </ng-container>
         <kendo-dateinput
             #input
-            [focusableId]="focusableId"
+            pickerType="timepicker"
             [hasPopup]="true"
             [isPopupOpen]="show"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
-            [role]="inputRole"
+            [role]="'combobox'"
             [ariaReadOnly]="readonly"
             [format]="format"
             [formatPlaceholder]="formatPlaceholder"
@@ -12177,6 +12589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <button
             #toggleButton
             type="button"
+            tabindex="-1"
             class="k-input-button k-button k-icon-button"
             [attr.title]="localization.get('toggle')"
             [attr.aria-label]="localization.get('toggle')"
@@ -12213,6 +12626,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [cancel]="localization.get('cancel')"
                     [nowLabel]="localization.get('nowLabel')"
                     [now]="localization.get('now')"
+                    [hour]="localization.get('hour')"
+                    [minute]="localization.get('minute')"
+                    [second]="localization.get('second')"
+                    [millisecond]="localization.get('millisecond')"
+                    [dayperiod]="localization.get('dayperiod')"
                 >
                 </kendo-timeselector-messages>
             </kendo-timeselector>
@@ -12220,7 +12638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: PickerService }, { type: i1.IntlService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i1$2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: PickerService }, { type: i1.IntlService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -12234,8 +12652,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
-            }], focusableId: [{
-                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{
@@ -12407,10 +12823,6 @@ class DateTimePickerComponent {
          * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
          */
         this.twoDigitYearMax = TWO_DIGIT_YEAR_MAX;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
         /**
          * Sets the title of the input element of the DateTimePicker.
          */
@@ -12574,6 +12986,12 @@ class DateTimePickerComponent {
     get input() {
         return this.pickerService.input;
     }
+    /**
+     * @hidden
+     */
+    get inputElement() {
+        return this.wrapper.nativeElement.querySelector('input');
+    }
     /**
      * @hidden
      */
@@ -12812,12 +13230,6 @@ class DateTimePickerComponent {
     get disableCalendar() {
         return this.activeTab !== 'date' && !this.calendar.isActive;
     }
-    /**
-     * @hidden
-     */
-    get inputRole() {
-        return this.readOnlyInput ? 'listbox' : 'spinbutton';
-    }
     /**
      * @hidden
      *
@@ -12843,6 +13255,11 @@ class DateTimePickerComponent {
         }
         return appendTo === 'component' ? this.container : appendTo;
     }
+    get popupUID() {
+        var _a;
+        return (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    ;
     ngOnInit() {
         this.subscriptions.add(this.pickerService.onFocus
             // detect popup changes to disable the inactive view mark-up when the popup is open
@@ -13042,6 +13459,9 @@ class DateTimePickerComponent {
         if (event.target !== dateTimeSelector) {
             return;
         }
+        if (this.activeTab === 'time') {
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+        }
         this.activeTabComponent.focus();
     }
     /**
@@ -13094,20 +13514,20 @@ class DateTimePickerComponent {
         }
         const { keyCode, altKey } = event;
         switch (keyCode) {
-            case altKey && Keys.ArrowUp:
-            case Keys.Escape:
+            case altKey && Keys$1.ArrowUp:
+            case Keys$1.Escape:
                 this.handleCancel();
                 break;
-            case !this.isOpen && altKey && Keys.ArrowDown:
+            case !this.isOpen && altKey && Keys$1.ArrowDown:
                 this.ngZone.run(() => this.togglePopup(true));
                 break;
-            case altKey && Keys.ArrowRight:
+            case altKey && Keys$1.ArrowRight:
                 this.changeActiveTab('time');
                 break;
-            case altKey && Keys.ArrowLeft:
+            case altKey && Keys$1.ArrowLeft:
                 this.changeActiveTab('date');
                 break;
-            case this.isOpen && this.timeSelector.isActive && isPresent(this.calendarValue) && Keys.Enter:
+            case this.isOpen && this.timeSelector.isActive && isPresent(this.calendarValue) && Keys$1.Enter:
                 this.handleAccept();
                 break;
             default: return;
@@ -13121,7 +13541,7 @@ class DateTimePickerComponent {
         const { keyCode, shiftKey, target } = event;
         // if no focusable next sibling elements exist in the controls sections, the user is tabbing out of the popup
         const focusableSiblingAvailable = isPresent(target.nextElementSibling) && !target.nextElementSibling.disabled;
-        if (keyCode === Keys.Tab && !shiftKey && !focusableSiblingAvailable) {
+        if (keyCode === Keys$1.Tab && !shiftKey && !focusableSiblingAvailable) {
             this.input.focus();
             this.handleCancel();
         }
@@ -13131,7 +13551,7 @@ class DateTimePickerComponent {
      */
     handleBackTabOut(event) {
         const { keyCode, shiftKey } = event;
-        if (keyCode === Keys.Tab && shiftKey) {
+        if (keyCode === Keys$1.Tab && shiftKey) {
             this.input.focus();
         }
     }
@@ -13251,12 +13671,28 @@ class DateTimePickerComponent {
             anchorAlign: { vertical: 'bottom', horizontal: direction },
             popupAlign: { vertical: 'top', horizontal: direction }
         });
+        this.popupRef.popupElement.setAttribute('id', this.popupUID);
+        this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+        if (this.activeTab === 'date') {
+            if (this.calendar.type === 'infinite') {
+                this.subscriptions.add(this.calendar.monthView.focusedCellChange.subscribe((id) => {
+                    this.renderer.setAttribute(this.inputElement, attributeNames.ariaActiveDescendant, id);
+                }));
+            }
+            else {
+                this.subscriptions.add(this.calendar.multiViewCalendar.viewList.focusedCellChange.subscribe((id) => {
+                    this.renderer.setAttribute(this.inputElement, attributeNames.ariaActiveDescendant, id);
+                }));
+            }
+        }
         this.popupRef.popupAnchorViewportLeave.subscribe(() => this.handleCancel());
     }
     closePopup() {
         if (!this.isOpen) {
             return;
         }
+        this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
+        this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
         this.popupRef.close();
         this.popupRef = null;
     }
@@ -13331,8 +13767,8 @@ class DateTimePickerComponent {
         }
     }
 }
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i2.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i1$1.LocalizationService }, { token: DisabledDatesService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", focusableId: "focusableId", title: "title", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1$2.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i1$1.LocalizationService }, { token: DisabledDatesService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
@@ -13399,12 +13835,12 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [placeholder]="placeholder"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
-            [role]="inputRole"
+            [role]="'combobox'"
             [ariaReadOnly]="readonly"
             [steps]="steps"
             [tabindex]="tabindex"
             [title]="title"
-            [focusableId]="focusableId"
+            pickerType="datetimepicker"
             [hasPopup]="true"
             [isPopupOpen]="isOpen"
             (valueChange)="handleInputValueChange($event)"
@@ -13583,7 +14019,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "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: 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: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: 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: 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: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.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: [{
@@ -13658,12 +14094,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [placeholder]="placeholder"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
-            [role]="inputRole"
+            [role]="'combobox'"
             [ariaReadOnly]="readonly"
             [steps]="steps"
             [tabindex]="tabindex"
             [title]="title"
-            [focusableId]="focusableId"
+            pickerType="datetimepicker"
             [hasPopup]="true"
             [isPopupOpen]="isOpen"
             (valueChange)="handleInputValueChange($event)"
@@ -13844,7 +14280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i2.PopupService }, { type: i1.IntlService }, { type: i0.ChangeDetectorRef }, { type: PickerService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$2.PopupService }, { type: i1.IntlService }, { type: i0.ChangeDetectorRef }, { type: PickerService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TOUCH_ENABLED]
                 }] }, { type: i1$1.LocalizationService }, { type: DisabledDatesService }, { type: i0.Renderer2 }]; }, propDecorators: { hostClasses: [{
@@ -13871,8 +14307,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], popupSettings: [{
                 type: Input
-            }], focusableId: [{
-                type: Input
             }], title: [{
                 type: Input
             }], disabled: [{
@@ -13982,7 +14416,10 @@ const hasActiveContent = (popup) => popup && popup.hasActiveContent();
  */
 class DateRangeService {
     /** @hidden */
-    constructor() {
+    constructor(renderer) {
+        this.renderer = renderer;
+        /** @hidden */
+        this.focusedCellChange = new Subscription();
         /**
          * An Observable instance that notifies when the `activeRangeEnd` state is changed.
          */
@@ -14047,10 +14484,19 @@ class DateRangeService {
      * 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);
+            });
+        }
         dateRangePopup.activate();
     }
     /**
@@ -14058,10 +14504,18 @@ 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);
+        }
         dateRangePopup.show = false;
     }
     /**
@@ -14145,11 +14599,13 @@ class DateRangeService {
         this.range$.next(range);
     }
 }
-DateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeService, deps: [{ token: i0.Renderer2, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 DateRangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: i0.Renderer2, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 /**
  * A directive which manages the MultiViewCalendar range selection.
@@ -14180,7 +14636,7 @@ class DateRangeSelectionDirective {
          */
         this.selectionRangeChange = new EventEmitter();
         this.calendarSubscriptions = new Subscription();
-        this.dateRangeService = this.dateRangeService || new DateRangeService();
+        this.dateRangeService = this.dateRangeService || new DateRangeService(renderer);
         renderer.setAttribute(element.nativeElement, 'aria-multiselectable', 'true');
     }
     /**
@@ -14549,7 +15005,7 @@ class DateRangePopupComponent {
     }
     handleKeydown(event) {
         const { altKey, keyCode } = event;
-        if (keyCode === Keys.Escape || (altKey && keyCode === Keys.ArrowUp)) {
+        if (keyCode === Keys$1.Escape || (altKey && keyCode === Keys$1.ArrowUp)) {
             this.zone.run(() => this.cancelPopup());
         }
     }
@@ -14561,9 +15017,9 @@ class DateRangePopupComponent {
         if (!calendar) {
             return;
         }
-        const nativeElement = calendar.element.nativeElement;
-        this.blurSubscription = fromEvent(nativeElement, 'blur').subscribe(() => this.onBlur.emit());
-        this.focusSubscription = fromEvent(nativeElement, 'focus').subscribe(() => this.onFocus.emit());
+        const calendarElement = calendar.element.nativeElement.querySelector('.k-calendar-view');
+        this.blurSubscription = fromEvent(calendarElement, 'blur').subscribe(() => this.onBlur.emit());
+        this.focusSubscription = fromEvent(calendarElement, 'focus').subscribe(() => this.onFocus.emit());
     }
     addPopupSubscriptions(...subscriptions) {
         if (!isPresent(this.popupSubscriptions)) {
@@ -14611,13 +15067,13 @@ class DateRangePopupComponent {
         }
     }
 }
-DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i2.PopupService }, { token: DateRangeService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1$2.PopupService }, { token: DateRangeService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: DateRangePopupTemplateDirective, descendants: true }, { propertyName: "contentCalendar", predicate: MultiViewCalendarComponent }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "viewCalendar", predicate: MultiViewCalendarComponent, descendants: true }], exportAs: ["kendo-daterange-popup"], ngImport: i0, template: `
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
             <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
         </ng-template>
-    `, isInline: true, components: [{ type: 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"], exportAs: ["kendo-multiviewcalendar"] }], directives: [{ type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
+    `, isInline: true, components: [{ type: 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: 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: [{
@@ -14630,7 +15086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i2.PopupService }, { type: DateRangeService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$2.PopupService }, { type: DateRangeService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -14698,7 +15154,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * ```
  */
 class DateRangeComponent {
-    constructor() {
+    constructor(dateRangeService) {
+        this.dateRangeService = dateRangeService;
         this.wrapperClass = true;
         /**
          * @hidden
@@ -14706,6 +15163,19 @@ class DateRangeComponent {
         this.showDefault = false;
         validatePackage(packageMetadata);
     }
+    /**
+    * @hidden
+    */
+    keydown(event) {
+        const shouldOpenPopup = event.keyCode === Keys$1.ArrowDown && event.altKey;
+        if (shouldOpenPopup) {
+            this.dateRangeService.activatePopup();
+        }
+        const shouldClosePopup = (event.keyCode === Keys$1.ArrowUp && event.altKey) || event.keyCode === Keys$1.Escape;
+        if (shouldClosePopup) {
+            this.dateRangeService.deactivatePopup();
+        }
+    }
     get hasContentPopup() {
         return this.contentPopup.length > 0;
     }
@@ -14716,13 +15186,12 @@ class DateRangeComponent {
         });
     }
     ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
+        var _a;
+        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
 }
-DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "kendo-daterange", host: { properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
+DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, deps: [{ token: DateRangeService }], target: i0.ɵɵFactoryTarget.Component });
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "kendo-daterange", host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
         <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
     `, isInline: true, components: [{ type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -14736,7 +15205,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
     `
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { wrapperClass: [{
+        }], ctorParameters: function () { return [{ type: DateRangeService }]; }, propDecorators: { keydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], wrapperClass: [{
                 type: HostBinding,
                 args: ['class.k-daterangepicker']
             }], contentPopup: [{
@@ -14832,10 +15304,10 @@ class DateRangeInput {
         }
     }
     togglePopup({ altKey, keyCode }) {
-        if (keyCode === Keys.Escape) {
+        if (keyCode === Keys$1.Escape) {
             this.dateRangeService.cancelPopup();
         }
-        else if (altKey && keyCode === Keys.ArrowDown) {
+        else if (altKey && keyCode === Keys$1.ArrowDown) {
             this.dateRangeService.activatePopup();
         }
     }
@@ -14852,6 +15324,12 @@ class DateRangeInput {
         }
     }
 }
+DateRangeInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeInput, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+DateRangeInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeInput, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeInput, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: function () { return [{ type: undefined }, { type: DateRangeService }, { type: DateInputComponent }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; } });
 
 /**
  * A directive which manages the end range selection.
@@ -14893,6 +15371,11 @@ class DateRangeEndInputDirective extends DateRangeInput {
         this.rangeService.registerEndInput(this.dateInput);
         super.init();
     }
+    ngAfterViewInit() {
+        const inputElement = this.dateInput.inputElement;
+        this.renderer.removeAttribute(inputElement, attributeNames.ariaExpanded);
+        this.dateInput.pickerType = 'daterangeend';
+    }
     ngOnDestroy() {
         super.destroy();
     }
@@ -14938,6 +15421,7 @@ class DateRangeStartInputDirective extends DateRangeInput {
         super('start', rangeService, dateInput, element, renderer, zone);
         this.rangeService = rangeService;
         this.dateInput = dateInput;
+        this.renderer = renderer;
         /**
          * Specifies the navigation behavior of the calendar when the active end is changed on input focus.
          * When enabled, the calendar navigates to the value of the focused input. Otherwise, the calendar
@@ -14969,6 +15453,13 @@ class DateRangeStartInputDirective extends DateRangeInput {
         this.rangeService.registerStartInput(this.dateInput);
         super.init();
     }
+    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');
+    }
     ngOnDestroy() {
         super.destroy();
     }