@progress/kendo-angular-dateinputs 7.1.2 → 7.1.3-dev.202210211241

package/esm2015/calendar/services/selection.service.js

@@ -31,6 +31,10 @@ export 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];

package/esm2015/calendar/services/weeknames.service.js

@@ -13,8 +13,8 @@ export 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;
     }
 }

package/esm2015/calendar/view-list.component.js

@@ -35,15 +35,21 @@ export 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;
@@ -68,7 +74,8 @@ export 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);
@@ -80,7 +87,8 @@ export 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);
@@ -145,6 +153,9 @@ export 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);
     }
@@ -156,23 +167,25 @@ export 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: i1.BusViewService }, { token: i0.ChangeDetectorRef }, { token: i2.IntlService }, { token: i3.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)"
@@ -181,7 +194,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>
@@ -203,6 +216,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>
 
@@ -222,10 +239,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: i4.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: i5.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { type: i6.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: i8.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i4.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: i5.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { type: i6.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: i8.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: [{
@@ -236,6 +254,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)"
@@ -244,7 +263,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>
@@ -266,6 +285,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>
 
@@ -285,6 +308,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>
@@ -310,6 +334,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: [{
@@ -322,6 +352,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 }]

package/esm2015/calendar/view.component.js

@@ -35,6 +35,7 @@ export 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 = [];
@@ -106,6 +107,9 @@ export 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;
@@ -131,6 +135,9 @@ export 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;
@@ -222,13 +229,14 @@ export class ViewComponent {
     }
 }
 ViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewComponent, deps: [{ token: i1.BusViewService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.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)
@@ -255,6 +263,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"
             >
@@ -276,12 +285,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)
@@ -308,6 +318,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"
             >
@@ -362,4 +373,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], cellLeave: [{
                 type: Output
+            }], focusedCellId: [{
+                type: Output
             }] } });

package/esm2015/common/utils.js

@@ -33,3 +33,37 @@ export const isNumberArray = (value) => Array.isArray(value) && value.length > 0
  * and all items in the array are dates, returns `true`.
  */
 export const isDateArray = (value) => Array.isArray(value) && value.length > 0 && value.every(item => item instanceof Date);
+/**
+ * @hidden
+ */
+export 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.
+ */
+export 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
+ */
+export const selectors = {
+    infiniteCalendarTable: '.k-content .k-calendar-table',
+    multiViewCalendarTable: '.k-content.k-calendar-table'
+};
+/**
+ * @hidden
+ */
+export const attributeNames = {
+    ariaActiveDescendant: 'aria-activedescendant',
+    ariaControls: 'aria-controls',
+    ariaExpanded: 'aria-expanded',
+    ariaHasPopup: 'aria-haspopup',
+    valueNow: 'valuenow',
+    valuetext: 'valuetext',
+    ariaInvalid: 'aria-invalid'
+};

package/esm2015/dateinput/dateinput.component.js

@@ -15,7 +15,8 @@ import { isDocumentAvailable, hasObservers, KendoInput, Keys, guid } from '@prog
 import { Arrow } from './arrow.enum';
 import { approximateStringMatching, noop, isInRange, dateInRange, isValidRange, setTime, cropTwoDigitYear, setYears, msPaddingFromFormat, millisecondDigitsInFormat, millisecondStepFor, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { closest } from '../common/dom-queries';
-import { requiresZoneOnBlur, isPresent } from '../common/utils';
+import { requiresZoneOnBlur, isPresent, attributeNames } from '../common/utils';
+import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -486,7 +487,7 @@ export class DateInputComponent {
         /**
          * @hidden
          */
-        this.role = 'spinbutton';
+        this.role = 'textbox';
         /**
          * @hidden
          */
@@ -659,11 +660,15 @@ export 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
@@ -788,6 +793,13 @@ export 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;
@@ -823,6 +835,21 @@ export 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
      */
@@ -844,10 +871,16 @@ export 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;
         }
@@ -856,32 +889,28 @@ export 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

package/esm2015/datepicker/datepicker.component.js

@@ -6,7 +6,7 @@ import { Component, ChangeDetectionStrategy, EventEmitter, HostBinding, Input, O
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { cloneDate } from '@progress/kendo-date-math';
-import { hasObservers, KendoInput, guid, Keys } from '@progress/kendo-angular-common';
+import { hasObservers, KendoInput, Keys } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { MIN_DATE, MAX_DATE } from '../defaults';
@@ -26,7 +26,7 @@ import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
 import { noop, isValidRange, setTime, isWindowAvailable, isTabExitingCalendar, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { TOUCH_ENABLED } from '../touch-enabled';
-import { requiresZoneOnBlur, currentFocusTarget } from '../common/utils';
+import { requiresZoneOnBlur, currentFocusTarget, attributeNames } from '../common/utils';
 import { fromEvent } from 'rxjs';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
 import { disabledDatesValidator } from '../validators/disabled-date.validator';
@@ -50,6 +50,7 @@ const TWO_DIGIT_YEAR_MAX = 68;
  */
 export class DatePickerComponent {
     constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, touchEnabled) {
+        var _a;
         this.zone = zone;
         this.localization = localization;
         this.cdr = cdr;
@@ -63,7 +64,7 @@ export class DatePickerComponent {
         /**
          * @hidden
          */
-        this.focusableId = `k-${guid()}`;
+        this.focusableId = `k-datepicker-${(_a = this.calendar) === null || _a === void 0 ? void 0 : _a.id}-`;
         /**
          * Defines the active view that the Calendar initially renders
          * ([see example]({% slug calendar_type_datepicker %}#toc-active-view)).
@@ -266,7 +267,6 @@ export class DatePickerComponent {
          * @hidden
          */
         this.wrapperClasses = true;
-        this.popupUID = guid();
         this._popupSettings = { animate: true };
         this._show = false;
         this._value = null;
@@ -460,12 +460,11 @@ export 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;
     }
@@ -749,6 +748,7 @@ export 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({
@@ -761,13 +761,27 @@ export 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() {
@@ -912,7 +926,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </ng-container>
         <kendo-dateinput
             #input
-            [role]="inputRole"
+            [role]="'combobox'"
             [focusableId]="focusableId"
             [hasPopup]="true"
             [isPopupOpen]="show"
@@ -1023,7 +1037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-container>
         <kendo-dateinput
             #input
-            [role]="inputRole"
+            [role]="'combobox'"
             [focusableId]="focusableId"
             [hasPopup]="true"
             [isPopupOpen]="show"

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

@@ -7,7 +7,7 @@ import { cloneDate, isEqual } from '@progress/kendo-date-math';
 import { DateRangeInput } from './date-range-input';
 import { EMPTY_SELECTIONRANGE } from '../calendar/models/selection-range.interface';
 import { clampRange, isInRange } from '../util';
-import { isPresent } from '../common/utils';
+import { attributeNames, isPresent } from '../common/utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./date-range.service";
 import * as i2 from "../dateinput/dateinput.component";
@@ -51,6 +51,10 @@ export class DateRangeEndInputDirective extends DateRangeInput {
         this.rangeService.registerEndInput(this.dateInput);
         super.init();
     }
+    ngAfterViewInit() {
+        const inputElement = this.dateInput.inputElement;
+        this.renderer.removeAttribute(inputElement, attributeNames.ariaExpanded);
+    }
     ngOnDestroy() {
         super.destroy();
     }

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

@@ -2,11 +2,15 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
 import { cloneDate } from '@progress/kendo-date-math';
 import { Keys } from '@progress/kendo-angular-common';
 import { Subscription, fromEvent } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { isPresent } from '../common/utils';
+import * as i0 from "@angular/core";
+import * as i1 from "./date-range.service";
+import * as i2 from "../dateinput/dateinput.component";
 /**
  * @hidden
  */
@@ -115,3 +119,9 @@ export 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: i1.DateRangeService }, { type: i2.DateInputComponent }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; } });

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

@@ -241,9 +241,9 @@ export 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)) {
@@ -297,7 +297,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <ng-template #defaultTemplate>
             <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
         </ng-template>
-    `, isInline: true, components: [{ type: i3.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur"], exportAs: ["kendo-multiviewcalendar"] }], directives: [{ type: i4.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
+    `, isInline: true, components: [{ type: i3.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }], directives: [{ type: i4.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{