@progress/kendo-angular-treelist 12.0.2-develop.3 → 12.1.0-develop.2

package/esm2020/pager/pager.component.mjs

@@ -2,35 +2,53 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, EventEmitter, Output, HostBinding, ElementRef, Renderer2 } from '@angular/core';
+import { Component, Input, EventEmitter, Output, HostBinding, ElementRef, Renderer2, ViewChild, NgZone } from '@angular/core';
 import { normalize } from './pager-settings';
 import { PagerTemplateDirective } from "./pager-template.directive";
-import { anyChanged } from "../utils";
+import { anyChanged, replaceMessagePlaceholder } from "../utils";
 import { PagerContextService } from "./pager-context.service";
 import { Subscription } from "rxjs";
 import { RESPONSIVE_BREAKPOINT_LARGE, RESPONSIVE_BREAKPOINT_MEDIUM } from '../constants';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { Keys } from '@progress/kendo-angular-common';
+import { take } from 'rxjs/operators';
+import { FOCUS_ROOT_ACTIVE, FocusRoot } from '../navigation/focus-root';
+import { NavigationService } from '../navigation/navigation.service';
+import { FocusGroup } from '../navigation/focus-group';
+import { findFocusableChild, findLastFocusableChild } from '../rendering/common/dom-queries';
 import * as i0 from "@angular/core";
-import * as i1 from "./pager-context.service";
-import * as i2 from "./pager-prev-buttons.component";
-import * as i3 from "./pager-numeric-buttons.component";
-import * as i4 from "./pager-input.component";
-import * as i5 from "./pager-next-buttons.component";
-import * as i6 from "./pager-info.component";
-import * as i7 from "./pager-page-sizes.component";
-import * as i8 from "@progress/kendo-angular-common";
-import * as i9 from "@angular/common";
+import * as i1 from "../navigation/navigation.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "./pager-context.service";
+import * as i4 from "../navigation/focus-group";
+import * as i5 from "../navigation/focus-root";
+import * as i6 from "./pager-prev-buttons.component";
+import * as i7 from "./pager-numeric-buttons.component";
+import * as i8 from "./pager-input.component";
+import * as i9 from "./pager-next-buttons.component";
+import * as i10 from "./pager-info.component";
+import * as i11 from "./pager-page-sizes.component";
+import * as i12 from "@progress/kendo-angular-common";
+import * as i13 from "@angular/common";
 /**
  * @hidden
  */
 export class PagerComponent {
-    constructor(pagerContext, element, renderer) {
+    constructor(navigationService, localizationService, pagerContext, focusGroup, focusRoot, renderer, element, zone) {
+        this.navigationService = navigationService;
+        this.localizationService = localizationService;
         this.pagerContext = pagerContext;
-        this.element = element;
+        this.focusGroup = focusGroup;
+        this.focusRoot = focusRoot;
         this.renderer = renderer;
+        this.element = element;
+        this.zone = zone;
         this.allCount = 0;
         this.total = 0;
         this.skip = 1;
         this.pageChange = new EventEmitter();
+        this.pagerRole = 'application';
+        this.pagerRoleDescription = 'pager';
         this.pagerWrapClass = true;
         this.gridPagerClass = true;
         this.pagerClass = true;
@@ -60,6 +78,12 @@ export class PagerComponent {
     set options(value) {
         this.settings = normalize(value);
     }
+    get hostTabindex() {
+        return this.navigationService.enabled ? '0' : '-1';
+    }
+    get hostAriaLabel() {
+        return this.pagerLabel;
+    }
     get totalPages() {
         return Math.ceil((this.total || 0) / this.pageSize);
     }
@@ -77,7 +101,13 @@ export class PagerComponent {
         return context;
     }
     ngOnInit() {
+        const element = this.element.nativeElement;
         this.subscriptions.add(this.pagerContext.pageChange.subscribe(this.changePage.bind(this)));
+        this.subscriptions.add(this.renderer.listen(element, 'focusin', event => this.onFocusIn(event)));
+        this.subscriptions.add(this.renderer.listen(element, 'keydown', event => this.onKeyDown(event)));
+        if (this.navigationService.enabled) {
+            this.focusRoot.deactivate();
+        }
     }
     ngOnChanges(changes) {
         if (anyChanged(["pageSize", "skip", "total", "allCount"], changes, false)) {
@@ -103,18 +133,135 @@ export class PagerComponent {
             this.subscriptions.unsubscribe();
         }
     }
+    get pagerLabel() {
+        const localizationMsg = this.localizationService.get('pagerLabel') || '';
+        return replaceMessagePlaceholder(replaceMessagePlaceholder(localizationMsg, 'currentPage', this.currentPage.toString()), 'totalPages', this.totalPages.toString());
+    }
+    get focusTrapTabIndex() {
+        return this.focusGroup.isActive ? '0' : '-1';
+    }
+    onKeyDown(event) {
+        const keyCode = event.keyCode;
+        const target = event.target;
+        if (this.navigationService.enabled) {
+            if (keyCode === Keys.Enter && target === this.element.nativeElement) {
+                this.onEnterEvent(event);
+            }
+            else if (keyCode === Keys.Escape) {
+                this.onEscapeEvent();
+            }
+        }
+        if ((keyCode === Keys.ArrowLeft || keyCode === Keys.PageUp) ||
+            (keyCode === Keys.ArrowRight || keyCode === Keys.PageDown)) {
+            event.preventDefault();
+            this.onArrowEvent(keyCode, target);
+        }
+        else if (keyCode === Keys.Home || keyCode === Keys.End) {
+            event.preventDefault();
+            this.onHomeEndEvent(keyCode, target);
+        }
+    }
     changePage(event) {
         this.pageChange.emit(event);
     }
+    onInnerFocusIn(event, position) {
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            if (position === 'start') {
+                if (event.relatedTarget === this.element.nativeElement) {
+                    this.focusFirstElement();
+                }
+                else {
+                    this.focusLastElement();
+                }
+            }
+            else {
+                this.focusFirstElement();
+            }
+        });
+    }
+    onEnterEvent(event) {
+        const isTargetCompElement = event.target === this.element.nativeElement;
+        if (this.navigationService.enabled && isTargetCompElement) {
+            event.preventDefault();
+            this.focusRoot.activate();
+            this.focusFirstElement();
+        }
+    }
+    onEscapeEvent() {
+        if (this.navigationService.enabled) {
+            this.focusRoot.deactivate();
+            this.element.nativeElement.focus();
+        }
+    }
+    onArrowEvent(keyCode, target) {
+        const isArrowLeft = keyCode === Keys.ArrowLeft || keyCode === Keys.PageUp;
+        const condition = isArrowLeft ? this.currentPage > 1 : this.currentPage < this.totalPages;
+        if (this.shouldTriggerPageChange(target, condition)) {
+            const pageDir = isArrowLeft ? 'prevPage' : 'nextPage';
+            this.pagerContext[pageDir]();
+        }
+    }
+    onHomeEndEvent(keyCode, target) {
+        const isHome = keyCode === Keys.Home;
+        const condition = isHome ? this.currentPage > 1 : this.currentPage < this.totalPages;
+        if (this.shouldTriggerPageChange(target, condition)) {
+            const pageNumber = isHome ? 0 : this.totalPages - 1;
+            this.pagerContext.changePage(pageNumber);
+        }
+    }
+    onFocusIn(event) {
+        if (this.navigationService.enabled) {
+            const shouldFocusPager = event.target === this.element.nativeElement;
+            if (shouldFocusPager) {
+                this.focusRoot.deactivate();
+            }
+            else {
+                this.focusRoot.activate();
+            }
+        }
+    }
+    focusFirstElement() {
+        const first = findFocusableChild(this.element.nativeElement, true);
+        if (first) {
+            first.focus();
+        }
+    }
+    focusLastElement() {
+        const last = findLastFocusableChild(this.element.nativeElement, true);
+        if (last) {
+            last.focus();
+        }
+    }
+    shouldTriggerPageChange(target, condition) {
+        return this.navigationService.enabled && target === this.element.nativeElement && condition;
+    }
     clearResponsiveClasses() {
         const element = this.element.nativeElement;
         this.renderer.removeClass(element, 'k-pager-mobile-sm');
         this.renderer.removeClass(element, 'k-pager-mobile-md');
     }
 }
-PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerComponent, deps: [{ token: i1.PagerContextService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerComponent, selector: "kendo-treelist-pager", inputs: { allCount: "allCount", total: "total", skip: "skip", pageSize: "pageSize", options: "options", template: "template" }, outputs: { pageChange: "pageChange" }, host: { properties: { "class.k-pager-wrap": "this.pagerWrapClass", "class.k-grid-pager": "this.gridPagerClass", "class.k-pager": "this.pagerClass", "class.k-pager-md": "this.pagerSizingClass" } }, usesOnChanges: true, ngImport: i0, template: `
-        <ng-container
+PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerComponent, deps: [{ token: i1.NavigationService }, { token: i2.LocalizationService }, { token: i3.PagerContextService }, { token: i4.FocusGroup }, { token: i5.FocusRoot }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerComponent, selector: "kendo-treelist-pager", inputs: { allCount: "allCount", total: "total", skip: "skip", navigable: "navigable", pageSize: "pageSize", options: "options", template: "template" }, outputs: { pageChange: "pageChange" }, host: { properties: { "attr.role": "this.pagerRole", "attr.aria-roledescription": "this.pagerRoleDescription", "class.k-pager-wrap": "this.pagerWrapClass", "class.k-grid-pager": "this.gridPagerClass", "class.k-pager": "this.pagerClass", "class.k-pager-md": "this.pagerSizingClass", "attr.tabindex": "this.hostTabindex", "attr.aria-label": "this.hostAriaLabel" } }, providers: [{
+            provide: FOCUS_ROOT_ACTIVE,
+            useValue: true
+        }, {
+            provide: FocusRoot,
+            deps: [FOCUS_ROOT_ACTIVE],
+            useClass: FocusRoot
+        }, {
+            provide: FocusGroup,
+            deps: [FocusRoot],
+            useClass: FocusGroup
+        }], viewQueries: [{ propertyName: "prevButtons", first: true, predicate: ["prevButtons"], descendants: true }, { propertyName: "nextButtons", first: true, predicate: ["nextButtons"], descendants: true }, { propertyName: "numericButtons", first: true, predicate: ["numericButtons"], descendants: true }, { propertyName: "pagerInput", first: true, predicate: ["pagerInput"], descendants: true }, { propertyName: "pageSizes", first: true, predicate: ["pageSizes"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div
+            *ngIf="navigationService.enabled"
+            class="k-sr-only"
+            [tabindex]="focusTrapTabIndex"
+            [attr.aria-hidden]="true"
+            (focusin)="onInnerFocusIn($event, 'start')">
+        </div>
+         <ng-container
             *ngIf="template?.templateRef"
             [ngTemplateOutlet]="template.templateRef"
             [ngTemplateOutletContext]="templateContext">
@@ -123,21 +270,48 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             <kendo-treelist-pager-prev-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-prev-buttons>
             <kendo-treelist-pager-numeric-buttons
                 *ngIf="settings.type === 'numeric'"
-                [buttonCount]="settings.buttonCount">
+                [buttonCount]="settings.buttonCount"
+            >
             </kendo-treelist-pager-numeric-buttons>
             <kendo-treelist-pager-input *ngIf="settings.type === 'input'"></kendo-treelist-pager-input>
             <kendo-treelist-pager-next-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-next-buttons>
             <kendo-treelist-pager-info *ngIf='settings.info'></kendo-treelist-pager-info>
             <kendo-treelist-pager-page-sizes *ngIf="settings.pageSizes" [pageSizes]="$any(settings.pageSizes)"></kendo-treelist-pager-page-sizes>
         </ng-container>
+         <div
+            *ngIf="navigationService.enabled"
+            class="k-sr-only"
+            [tabindex]="focusTrapTabIndex"
+            [attr.aria-hidden]="true"
+            (focusin)="onInnerFocusIn($event, 'end')">
+        </div>
         <kendo-resize-sensor *ngIf="settings.responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
-  `, isInline: true, components: [{ type: i2.PagerPrevButtonsComponent, selector: "kendo-treelist-pager-prev-buttons" }, { type: i3.PagerNumericButtonsComponent, selector: "kendo-treelist-pager-numeric-buttons", inputs: ["buttonCount"] }, { type: i4.PagerInputComponent, selector: "kendo-treelist-pager-input" }, { type: i5.PagerNextButtonsComponent, selector: "kendo-treelist-pager-next-buttons" }, { type: i6.PagerInfoComponent, selector: "kendo-treelist-pager-info" }, { type: i7.PagerPageSizesComponent, selector: "kendo-treelist-pager-page-sizes", inputs: ["pageSizes"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  `, isInline: true, components: [{ type: i6.PagerPrevButtonsComponent, selector: "kendo-treelist-pager-prev-buttons" }, { type: i7.PagerNumericButtonsComponent, selector: "kendo-treelist-pager-numeric-buttons", inputs: ["buttonCount"] }, { type: i8.PagerInputComponent, selector: "kendo-treelist-pager-input" }, { type: i9.PagerNextButtonsComponent, selector: "kendo-treelist-pager-next-buttons", inputs: ["navigable"] }, { type: i10.PagerInfoComponent, selector: "kendo-treelist-pager-info" }, { type: i11.PagerPageSizesComponent, selector: "kendo-treelist-pager-page-sizes", inputs: ["pageSizes"] }, { type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-pager',
+                    providers: [{
+                            provide: FOCUS_ROOT_ACTIVE,
+                            useValue: true
+                        }, {
+                            provide: FocusRoot,
+                            deps: [FOCUS_ROOT_ACTIVE],
+                            useClass: FocusRoot
+                        }, {
+                            provide: FocusGroup,
+                            deps: [FocusRoot],
+                            useClass: FocusGroup
+                        }],
                     template: `
-        <ng-container
+        <div
+            *ngIf="navigationService.enabled"
+            class="k-sr-only"
+            [tabindex]="focusTrapTabIndex"
+            [attr.aria-hidden]="true"
+            (focusin)="onInnerFocusIn($event, 'start')">
+        </div>
+         <ng-container
             *ngIf="template?.templateRef"
             [ngTemplateOutlet]="template.templateRef"
             [ngTemplateOutletContext]="templateContext">
@@ -146,22 +320,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <kendo-treelist-pager-prev-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-prev-buttons>
             <kendo-treelist-pager-numeric-buttons
                 *ngIf="settings.type === 'numeric'"
-                [buttonCount]="settings.buttonCount">
+                [buttonCount]="settings.buttonCount"
+            >
             </kendo-treelist-pager-numeric-buttons>
             <kendo-treelist-pager-input *ngIf="settings.type === 'input'"></kendo-treelist-pager-input>
             <kendo-treelist-pager-next-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-next-buttons>
             <kendo-treelist-pager-info *ngIf='settings.info'></kendo-treelist-pager-info>
             <kendo-treelist-pager-page-sizes *ngIf="settings.pageSizes" [pageSizes]="$any(settings.pageSizes)"></kendo-treelist-pager-page-sizes>
         </ng-container>
+         <div
+            *ngIf="navigationService.enabled"
+            class="k-sr-only"
+            [tabindex]="focusTrapTabIndex"
+            [attr.aria-hidden]="true"
+            (focusin)="onInnerFocusIn($event, 'end')">
+        </div>
         <kendo-resize-sensor *ngIf="settings.responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.PagerContextService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { allCount: [{
+        }], ctorParameters: function () { return [{ type: i1.NavigationService }, { type: i2.LocalizationService }, { type: i3.PagerContextService }, { type: i4.FocusGroup }, { type: i5.FocusRoot }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { prevButtons: [{
+                type: ViewChild,
+                args: ['prevButtons']
+            }], nextButtons: [{
+                type: ViewChild,
+                args: ['nextButtons']
+            }], numericButtons: [{
+                type: ViewChild,
+                args: ['numericButtons']
+            }], pagerInput: [{
+                type: ViewChild,
+                args: ['pagerInput']
+            }], pageSizes: [{
+                type: ViewChild,
+                args: ['pageSizes']
+            }], allCount: [{
                 type: Input
             }], total: [{
                 type: Input
             }], skip: [{
                 type: Input
+            }], navigable: [{
+                type: Input
             }], pageSize: [{
                 type: Input
             }], options: [{
@@ -170,6 +369,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], pageChange: [{
                 type: Output
+            }], pagerRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], pagerRoleDescription: [{
+                type: HostBinding,
+                args: ['attr.aria-roledescription']
             }], pagerWrapClass: [{
                 type: HostBinding,
                 args: ['class.k-pager-wrap']
@@ -182,4 +387,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], pagerSizingClass: [{
                 type: HostBinding,
                 args: ['class.k-pager-md']
+            }], hostTabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
             }] } });

package/esm2020/rendering/cell.component.mjs

@@ -121,6 +121,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 <ng-container *ngIf="column.expandable">
                     <span class="k-icon k-i-none" *ngFor="let item of level | levelItems : hasChildren && expandIcons"></span>
                     <kendo-icon-wrapper
+                        aria-hidden="true"
                         *ngIf="hasChildren && expandIcons && !loading"
                         [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
                         [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
@@ -183,7 +184,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i4.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "levelItems": i9.LevelItemsPipe, "valueOf": i10.FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i4.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "levelItems": i9.LevelItemsPipe, "valueOf": i10.FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
@@ -194,6 +195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <ng-container *ngIf="column.expandable">
                     <span class="k-icon k-i-none" *ngFor="let item of level | levelItems : hasChildren && expandIcons"></span>
                     <kendo-icon-wrapper
+                        aria-hidden="true"
                         *ngIf="hasChildren && expandIcons && !loading"
                         [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
                         [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>

package/esm2020/rendering/common/dom-queries.mjs

@@ -87,8 +87,9 @@ export const isFocusableWithTabKey = (element, checkVisibility = true) => {
         return false;
     }
     const tabIndex = element.getAttribute('tabIndex');
+    const ariaHidden = element.getAttribute('aria-hidden') === 'true';
     const visible = !checkVisibility || isVisible(element);
-    return visible && tabIndex !== '-1';
+    return visible && !ariaHidden && tabIndex !== '-1';
 };
 /**
  * @hidden
@@ -111,6 +112,19 @@ export const findElement = (node, predicate, matchSelf = true) => {
         node = node.nextSibling;
     }
 };
+/**
+ * @hidden
+ */
+export const findLastElement = (node, predicate, matchSelf = true) => {
+    let last = null;
+    findElement(node, (node) => {
+        if (predicate(node)) {
+            last = node;
+        }
+        return false;
+    }, matchSelf);
+    return last;
+};
 /**
  * @hidden
  */
@@ -123,6 +137,12 @@ export const findFocusable = (element, checkVisibility = true) => {
 export const findFocusableChild = (element, checkVisibility = true) => {
     return findElement(element, (node) => isFocusableWithTabKey(node, checkVisibility), false);
 };
+/**
+ * @hidden
+ */
+export const findLastFocusableChild = (element, checkVisibility = true) => {
+    return findLastElement(element, (node) => isFocusableWithTabKey(node, checkVisibility), false);
+};
 /**
  * @hidden
  */

package/esm2020/rendering/header/header.component.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, ChangeDetectorRef, HostBinding, Input, QueryList, ViewChildren, TemplateRef } from '@angular/core';
 import { Subscription, of, merge } from "rxjs";
 import { filter, map, switchMap, tap, takeUntil } from 'rxjs/operators';
@@ -356,7 +357,7 @@ export class HeaderComponent {
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.DragHintService }, { token: i3.DropCueService }, { token: i4.ColumnReorderService }, { token: i5.SortService }, { token: i6.SelectionService }, { token: i7.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-        <tr *ngFor="let i of columnLevels; let levelIndex = index"
+        <tr *ngFor="let i of columnLevels; let levelIndex = index" role="row"
             kendoTreeListLogicalRow
                 [logicalRowIndex]="levelIndex"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
@@ -386,6 +387,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                     }"
                     class="k-header k-table-th"
                     [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
+                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
                     [ngClass]="column.headerClass"
                     [ngStyle]="column.headerStyle"
@@ -494,7 +496,9 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                     }"
                     class="k-header k-table-th"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
+                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
                     [class.k-filterable]="showColumnMenu(column)"
+                    [attr.aria-expanded]="showColumnMenu(column)"
                     [ngClass]="column.headerClass"
                     [ngStyle]="column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
@@ -536,13 +540,13 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             [logicalSlaveCellsCount]="unlockedColumnsCount"
         >
         </tr>
-    `, isInline: true, components: [{ type: i8.FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { type: i9.ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { type: i10.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i11.FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: i15.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i16.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i17.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i18.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i19.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i20.ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: i8.FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { type: i9.ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { type: i10.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i11.FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: i15.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i16.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i17.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i18.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i19.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i20.ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoTreeListHeader]',
                     template: `
-        <tr *ngFor="let i of columnLevels; let levelIndex = index"
+        <tr *ngFor="let i of columnLevels; let levelIndex = index" role="row"
             kendoTreeListLogicalRow
                 [logicalRowIndex]="levelIndex"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
@@ -572,6 +576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     }"
                     class="k-header k-table-th"
                     [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
+                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
                     [ngClass]="column.headerClass"
                     [ngStyle]="column.headerStyle"
@@ -680,7 +685,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     }"
                     class="k-header k-table-th"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
+                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
                     [class.k-filterable]="showColumnMenu(column)"
+                    [attr.aria-expanded]="showColumnMenu(column)"
                     [ngClass]="column.headerClass"
                     [ngStyle]="column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"

package/esm2020/rendering/list.component.mjs

@@ -561,7 +561,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     [columns]="$any(nonLockedColumnsToRender)">
                 </colgroup>
                 <tbody kendoTreeListTableBody
-                    role="presentation"
+                    role="rowgroup"
                     [view]="view"
                     [columns]="$any(nonLockedColumnsToRender)"
                     [allColumns]="$any(nonLockedLeafColumns)"
@@ -646,7 +646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [columns]="$any(nonLockedColumnsToRender)">
                 </colgroup>
                 <tbody kendoTreeListTableBody
-                    role="presentation"
+                    role="rowgroup"
                     [view]="view"
                     [columns]="$any(nonLockedColumnsToRender)"
                     [allColumns]="$any(nonLockedLeafColumns)"

package/esm2020/rendering/table-body.component.mjs

@@ -349,6 +349,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             class="k-table-row{{isOdd(item) ? ' k-alt k-table-alt-row' : ''}}"
             [class.k-grid-edit-row]="isEditingRow(item)"
             [class.k-grid-add-row]="item.isNew"
+            [attr.aria-selected]="item.selected"
             [class.k-selected]="item.selected"
             [attr.data-treelist-view-index]="rowIndex">
 
@@ -384,7 +385,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
             </td>
         </tr>
-        <tr *ngIf="item.type === 'footer' && hasFooter"
+        <tr *ngIf="item.type === 'footer' && hasFooter" role="row"
             class="k-footer"
             [attr.data-treelist-view-index]="rowIndex"
             kendoTreeListLogicalRow
@@ -398,6 +399,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                     [logicalColIndex]="logicalColIndex(column)"
                     [column]="column"
                     [colIndex]="columnIndex"
+                    role="gridcell"
                     class="k-table-td"
                 [ngClass]="column.footerClass"
                 [ngStyle]="column.footerStyle"
@@ -449,6 +451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             class="k-table-row{{isOdd(item) ? ' k-alt k-table-alt-row' : ''}}"
             [class.k-grid-edit-row]="isEditingRow(item)"
             [class.k-grid-add-row]="item.isNew"
+            [attr.aria-selected]="item.selected"
             [class.k-selected]="item.selected"
             [attr.data-treelist-view-index]="rowIndex">
 
@@ -484,7 +487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
             </td>
         </tr>
-        <tr *ngIf="item.type === 'footer' && hasFooter"
+        <tr *ngIf="item.type === 'footer' && hasFooter" role="row"
             class="k-footer"
             [attr.data-treelist-view-index]="rowIndex"
             kendoTreeListLogicalRow
@@ -498,6 +501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [logicalColIndex]="logicalColIndex(column)"
                     [column]="column"
                     [colIndex]="columnIndex"
+                    role="gridcell"
                     class="k-table-td"
                 [ngClass]="column.footerClass"
                 [ngStyle]="column.footerStyle"