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

package/fesm2015/progress-kendo-angular-treelist.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Directive, Optional, EventEmitter, Injectable, QueryList, Input, ContentChildren, ContentChild, InjectionToken, forwardRef, Component, SkipSelf, Host, isDevMode, SecurityContext, Output, Inject, HostBinding, Self, ViewChild, HostListener, ViewChildren, Pipe, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { Directive, Optional, EventEmitter, Injectable, QueryList, Input, ContentChildren, ContentChild, InjectionToken, forwardRef, Component, SkipSelf, Host, isDevMode, SecurityContext, Inject, HostBinding, Output, Self, ViewChild, HostListener, ViewChildren, Pipe, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3$1 from '@angular/forms';
@@ -25,15 +25,15 @@ import * as i3$3 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i3 from '@progress/kendo-angular-dropdowns';
 import { DropDownListModule, AutoCompleteModule, DropDownsModule } from '@progress/kendo-angular-dropdowns';
-import * as i2 from '@progress/kendo-angular-inputs';
+import * as i4$1 from '@progress/kendo-angular-inputs';
 import { NumericTextBoxComponent, InputsModule, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
 import * as i3$2 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i3$4 from '@progress/kendo-angular-buttons';
+import * as i4$2 from '@progress/kendo-angular-buttons';
 import { ButtonModule, Button } from '@progress/kendo-angular-buttons';
 import * as i1$4 from '@progress/kendo-angular-intl';
-import * as i4$1 from '@progress/kendo-angular-label';
+import * as i4$3 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
 import { PDFExportMarginComponent, PDFExportTemplateDirective, PDFExportComponent } from '@progress/kendo-angular-pdf-export';
 import { saveAs } from '@progress/kendo-file-saver';
@@ -46,8 +46,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1683884362,
-    version: '12.0.2-develop.3',
+    publishDate: 1684164986,
+    version: '12.1.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -614,6 +614,10 @@ const cancelAnimationFrame = wnd.cancelAnimationFrame || wnd.msCancelRequestAnim
 /** @hidden */
 const isColumnEditable = (column, formGroup) => column.isEditable !== false &&
     (column.editTemplate || (formGroup && column.field && formGroup.get(column.field)));
+/**
+ * @hidden
+ */
+const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
 
 /**
  * Represents the filter-cell template ([see example]({% slug builtinfiltertemplate_treelist %}#toc-customizing-filter-rows)).
@@ -2643,8 +2647,9 @@ 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
@@ -2667,6 +2672,19 @@ const findElement = (node, predicate, matchSelf = true) => {
         node = node.nextSibling;
     }
 };
+/**
+ * @hidden
+ */
+const findLastElement = (node, predicate, matchSelf = true) => {
+    let last = null;
+    findElement(node, (node) => {
+        if (predicate(node)) {
+            last = node;
+        }
+        return false;
+    }, matchSelf);
+    return last;
+};
 /**
  * @hidden
  */
@@ -2679,6 +2697,12 @@ const findFocusable = (element, checkVisibility = true) => {
 const findFocusableChild = (element, checkVisibility = true) => {
     return findElement(element, (node) => isFocusableWithTabKey(node, checkVisibility), false);
 };
+/**
+ * @hidden
+ */
+const findLastFocusableChild = (element, checkVisibility = true) => {
+    return findLastElement(element, (node) => isFocusableWithTabKey(node, checkVisibility), false);
+};
 /**
  * @hidden
  */
@@ -3244,39 +3268,51 @@ class ColumnReorderEvent extends PreventableEvent {
     }
 }
 
+/**
+ * @hidden
+ */
+const FOCUS_ROOT_ACTIVE = new InjectionToken('focus-root-initial-active-state');
 /**
  * @hidden
  */
 class FocusRoot {
-    constructor() {
+    constructor(active = false) {
+        this.active = active;
         this.groups = new Set();
     }
     registerGroup(group) {
-        if (this.alive) {
+        if (this.active) {
             this.groups.add(group);
         }
     }
     unregisterGroup(group) {
-        if (this.alive) {
+        if (this.active) {
             this.groups.delete(group);
         }
     }
     activate() {
-        if (this.alive) {
+        if (this.active) {
             this.groups.forEach(f => f.activate());
         }
     }
     deactivate() {
-        if (this.alive) {
+        if (this.active) {
             this.groups.forEach(f => f.deactivate());
         }
     }
 }
-FocusRoot.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusRoot, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FocusRoot.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusRoot, deps: [{ token: FOCUS_ROOT_ACTIVE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 FocusRoot.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusRoot });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusRoot, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [FOCUS_ROOT_ACTIVE]
+                    }] }];
+    } });
 
 /**
  * @hidden
@@ -4046,6 +4082,7 @@ class FocusGroup {
     }
     ngOnDestroy() {
         this.root.unregisterGroup(this);
+        this.active = true;
     }
     /**
      * @hidden
@@ -4134,27 +4171,42 @@ class FocusableDirective {
         this.renderer = renderer;
         this.group = group;
         this.active = true;
+        this._enabled = true;
     }
     /**
      * @hidden
      */
-    set addCellContext(value) { this.cellContext = value; }
+    set enabled(value) {
+        if (value !== this.enabled) {
+            this._enabled = value;
+            if (this.element) {
+                this.element.toggle(this.active && value);
+            }
+        }
+    }
+    get enabled() {
+        return this._enabled;
+    }
+    /**
+     * @hidden
+     */
+    set addCellContext(value) { this.cellContext = value; this.enabled = true; }
     /**
      * @hidden
      */
-    set editCellContext(value) { this.cellContext = value; }
+    set editCellContext(value) { this.cellContext = value; this.enabled = true; }
     /**
      * @hidden
      */
-    set removeCellContext(value) { this.cellContext = value; }
+    set removeCellContext(value) { this.cellContext = value; this.enabled = true; }
     /**
      * @hidden
      */
-    set saveCellContext(value) { this.cellContext = value; }
+    set saveCellContext(value) { this.cellContext = value; this.enabled = true; }
     /**
      * @hidden
      */
-    set cancelCellContext(value) { this.cellContext = value; }
+    set cancelCellContext(value) { this.cellContext = value; this.enabled = true; }
     ngOnInit() {
         if (this.cellContext && this.cellContext.focusGroup) {
             this.group = this.cellContext.focusGroup;
@@ -4183,26 +4235,26 @@ class FocusableDirective {
     toggle(active) {
         if (this.element && active !== this.active) {
             this.active = active;
-            this.element.toggle(active);
+            this.element.toggle(this.enabled && active);
         }
     }
     /**
      * @hidden
      */
     canFocus() {
-        return this.element && this.element.canFocus();
+        return this.enabled && this.element && this.element.canFocus();
     }
     /**
      * @hidden
      */
     isNavigable() {
-        return this.element && this.element.isNavigable();
+        return this.enabled && this.element && this.element.isNavigable();
     }
     /**
      * @hidden
      */
     focus() {
-        if (this.element) {
+        if (this.enabled && this.element) {
             this.element.focus();
         }
     }
@@ -4210,7 +4262,7 @@ class FocusableDirective {
      * @hidden
      */
     hasFocus() {
-        return this.element && this.element.hasFocus();
+        return this.enabled && this.element && this.element.hasFocus();
     }
     /**
      * @hidden
@@ -4220,7 +4272,7 @@ class FocusableDirective {
     }
 }
 FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FocusGroup, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: { cellContext: ["kendoTreeListFocusable", "cellContext"], addCellContext: ["kendoTreeListAddCommand", "addCellContext"], editCellContext: ["kendoTreeListEditCommand", "editCellContext"], removeCellContext: ["kendoTreeListRemoveCommand", "removeCellContext"], saveCellContext: ["kendoTreeListSaveCommand", "saveCellContext"], cancelCellContext: ["kendoTreeListCancelCommand", "cancelCellContext"] }, ngImport: i0 });
+FocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: { cellContext: ["kendoTreeListFocusable", "cellContext"], enabled: "enabled", addCellContext: ["kendoTreeListAddCommand", "addCellContext"], editCellContext: ["kendoTreeListEditCommand", "editCellContext"], removeCellContext: ["kendoTreeListRemoveCommand", "removeCellContext"], saveCellContext: ["kendoTreeListSaveCommand", "saveCellContext"], cancelCellContext: ["kendoTreeListCancelCommand", "cancelCellContext"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusableDirective, decorators: [{
             type: Directive,
             args: [{
@@ -4239,6 +4291,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
     }, propDecorators: { cellContext: [{
                 type: Input,
                 args: ['kendoTreeListFocusable']
+            }], enabled: [{
+                type: Input
             }], addCellContext: [{
                 type: Input,
                 args: ['kendoTreeListAddCommand']
@@ -4358,7 +4412,7 @@ class NavigationService {
     }
     init(meta) {
         this.alive = true;
-        this.focusRoot.alive = true;
+        this.focusRoot.active = true;
         this.metadata = meta;
         const onStableSubscriber = (...operators) => (args) => this.zone.isStable ?
             from([true]).pipe(map(() => args)) :
@@ -5028,6 +5082,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type: Injectable
         }] });
 
+/**
+ * @hidden
+ */
+class TreeListToolbarNavigationService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.navigableElements = [];
+        this.currentActiveIndex = 0;
+        this.defaultFocusableSelector = `
+        [kendoTreeListToolbarFocusable],
+        [kendoTreeListAddCommand],
+        [kendoTreeListCancelCommand],
+        [kendoTreeListEditCommand],
+        [kendoTreeListRemoveCommand],
+        [kendoTreeListSaveCommand],
+        [kendoTreeListExcelCommand],
+        [kendoTreeListPDFCommand]
+    `;
+    }
+    notify() {
+        // ensure focusable elements are in the same order as in the DOM
+        this.navigableElements = this.navigableElements.length && Array.from(this.navigableElements[0].parentElement.querySelectorAll(this.defaultFocusableSelector)) || [];
+        this.currentActiveIndex = 0;
+        this.updateFocus();
+    }
+    focus() {
+        var _a;
+        (_a = this.navigableElements[this.currentActiveIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    updateFocus() {
+        if (!this.navigableElements.length) {
+            return;
+        }
+        this.navigableElements.forEach(el => {
+            this.renderer.setAttribute(el, 'tabindex', '-1');
+        });
+        this.renderer.setAttribute(this.navigableElements[this.currentActiveIndex], 'tabindex', '0');
+        if (isDocumentAvailable() && document.activeElement.closest('.k-toolbar')) {
+            this.navigableElements[this.currentActiveIndex].focus();
+        }
+    }
+}
+TreeListToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListToolbarNavigationService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+TreeListToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListToolbarNavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListToolbarNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
+
 /**
  * @hidden
  *
@@ -5038,20 +5140,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * and a avoids dependency cycles between components.
  */
 class ContextService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.topToolbarNavigation = new TreeListToolbarNavigationService(this.renderer);
+        this.bottomToolbarNavigation = new TreeListToolbarNavigationService(this.renderer);
+    }
 }
-ContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
 ContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
 
+/* eslint-disable @typescript-eslint/no-inferrable-types */
 /**
  * @hidden
  */
 class ToolbarComponent {
-    constructor(ctx) {
+    constructor(elem, renderer, ctx) {
+        this.elem = elem;
+        this.renderer = renderer;
         this.ctx = ctx;
+        this.hostRole = 'toolbar';
         this.context = {};
+        this.subs = new Subscription();
+        this.navigationService = this.ctx[`${this.elem.nativeElement.getAttribute('position')}ToolbarNavigation`];
     }
     set position(value) {
         this.context.position = value;
@@ -5059,9 +5172,35 @@ class ToolbarComponent {
     get toolbarTemplateRef() {
         return this.ctx.treelist.toolbarTemplate ? this.ctx.treelist.toolbarTemplate.templateRef : undefined;
     }
+    ngAfterViewInit() {
+        const element = this.elem.nativeElement;
+        this.subs.add(this.renderer.listen(element, 'keydown', event => this.onKeyDown(event)));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    onKeyDown(event) {
+        if (this.navigable && isDocumentAvailable() && this.navigationService.navigableElements.length) {
+            const keyCode = event.keyCode;
+            if (keyCode === Keys.ArrowLeft || keyCode === Keys.ArrowRight) {
+                event.preventDefault();
+                const dir = keyCode === Keys.ArrowLeft ? -1 : 1;
+                this.changeFocusedItem(dir);
+            }
+        }
+    }
+    changeFocusedItem(dir) {
+        this.navigationService.currentActiveIndex += dir;
+        const bottomRange = this.navigationService.currentActiveIndex < 0;
+        const topRange = this.navigationService.currentActiveIndex >= this.navigationService.navigableElements.length;
+        if (bottomRange || topRange) {
+            this.navigationService.currentActiveIndex = bottomRange ? this.navigationService.navigableElements.length - 1 : 0;
+        }
+        this.navigationService.updateFocus();
+    }
 }
-ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: { position: "position" }, ngImport: i0, template: `
+ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: { position: "position", navigable: "navigable" }, host: { properties: { "attr.role": "this.hostRole" } }, ngImport: i0, template: `
         <ng-template
             *ngIf="toolbarTemplateRef"
             [ngTemplateOutlet]="toolbarTemplateRef"
@@ -5082,7 +5221,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { position: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ContextService }]; }, propDecorators: { hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], position: [{
+                type: Input
+            }], navigable: [{
                 type: Input
             }] } });
 
@@ -5908,7 +6052,7 @@ StringFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 [filterDelay]="0"
                 [ngModel]="currentFilter?.value" />
         </kendo-treelist-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }], directives: [{ type: i2.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }], directives: [{ type: i4$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -6206,7 +6350,7 @@ NumericFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 [step]="step">
             </kendo-numerictextbox>
         </kendo-treelist-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }, { type: i2.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"] }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
+    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }, { type: i4$1.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"] }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -6964,7 +7108,7 @@ BooleanFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
             </li>
         </ul>
-    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }] });
+    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -8460,7 +8604,7 @@ FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             (click)="clearClick()"
             (keydown)="clearKeydown($event)">
         </button>
-    `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i3$4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }] });
+    `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellOperatorsComponent, decorators: [{
             type: Component,
             args: [{
@@ -8623,7 +8767,7 @@ StringFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 [filterDelay]="filterDelay"
                 [ngModel]="currentFilter?.value" />
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }], directives: [{ type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }], directives: [{ type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -8705,7 +8849,7 @@ NumericFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 [step]="step">
             </kendo-numerictextbox>
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i2.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"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
+    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i4$1.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"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -9174,7 +9318,7 @@ class FilterRowComponent {
 }
 FilterRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterRowComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 FilterRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: { columns: "columns", filter: "filter", logicalRowIndex: "logicalRowIndex", lockedColumnsCount: "lockedColumnsCount" }, host: { properties: { "class.k-filter-row": "this.filterRowClass" } }, ngImport: i0, template: `
-      <td *ngFor="let column of columns; let columnIndex = index"
+      <td *ngFor="let column of columns; let columnIndex = index" role="gridcell"
           [attr.aria-label]="filterLabel"
           kendoTreeListFilterCell
             [column]="$any(column)"
@@ -9192,7 +9336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             args: [{
                     selector: '[kendoTreeListFilterRow]',
                     template: `
-      <td *ngFor="let column of columns; let columnIndex = index"
+      <td *ngFor="let column of columns; let columnIndex = index" role="gridcell"
           [attr.aria-label]="filterLabel"
           kendoTreeListFilterCell
             [column]="$any(column)"
@@ -9664,6 +9808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['dblclick']
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const mergeObjects = (...args) => Object.assign.apply(null, [{}].concat(args));
 const directions = initialDirection => initialDirection === "asc" ? ["asc", "desc"] : ["desc", "asc"];
 /**
@@ -9976,7 +10121,7 @@ class HeaderComponent {
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: SinglePopupService }, { token: DragHintService }, { token: DropCueService }, { token: ColumnReorderService }, { token: SortService }, { token: SelectionService }, { token: i1$1.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"
@@ -10006,6 +10151,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"
@@ -10114,7 +10260,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)"
@@ -10156,13 +10304,13 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             [logicalSlaveCellsCount]="unlockedColumnsCount"
         >
         </tr>
-    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { type: i3$3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { type: i3$3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: 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"
@@ -10192,6 +10340,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"
@@ -10300,7 +10449,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)"
@@ -10686,6 +10837,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>
@@ -10748,7 +10900,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i3$3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i2.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: i3$2.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: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3$1.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": LevelItemsPipe, "valueOf": FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i3$3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i4$1.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: i3$2.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: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3$1.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": LevelItemsPipe, "valueOf": FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
@@ -10759,6 +10911,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>
@@ -11172,6 +11325,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">
 
@@ -11207,7 +11361,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
@@ -11221,6 +11375,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"
@@ -11272,6 +11427,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">
 
@@ -11307,7 +11463,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
@@ -11321,6 +11477,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"
@@ -12099,7 +12256,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)"
@@ -12184,7 +12341,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)"
@@ -12382,8 +12539,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Displays buttons for navigating to the first and to the previous page ([see example]({% slug paging_treelist %}#toc-pager-templates)).
  */
 class PagerPrevButtonsComponent extends PagerElementComponent {
-    constructor(localization, pagerContext, cd) {
+    constructor(localization, pagerContext, cd, navigationService) {
         super(localization, pagerContext, cd);
+        this.navigationService = navigationService;
         this.caretAltLeftIcon = caretAltLeftIcon;
         this.caretAltToLeftIcon = caretAltToLeftIcon;
     }
@@ -12397,6 +12555,15 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
     get disabled() {
         return this.currentPage === 1 || !this.total;
     }
+    /**
+     * @hidden
+     */
+    onButtonClick(buttonName) {
+        if (this.currentPage !== 1) {
+            const skipToPage = buttonName === 'prevPage' ? this.currentPage - 2 : 0;
+            this.changePage(skipToPage);
+        }
+    }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
         this.skip = skip;
@@ -12404,15 +12571,16 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1$1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1$1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPrevButtonsComponent, selector: "kendo-treelist-pager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
         <button
-            [tabIndex]="-1"
             kendoButton
             type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             [title]="textFor('pagerFirstPage')"
             [attr.aria-label]="textFor('pagerFirstPage')"
-            (click)="currentPage !== 1 ? changePage(0) : false"
+            (click)="onButtonClick('firstPage')"
             role="button"
             icon="caret-alt-to-left"
             [svgIcon]="caretAltToLeftIcon"
@@ -12423,8 +12591,9 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
         </button>
         <button
             kendoButton
-            [tabIndex]="-1"
             type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             class="k-pager-nav"
             [disabled]="disabled"
             icon="caret-alt-left"
@@ -12433,9 +12602,9 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             rounded="none"
             [title]="textFor('pagerPreviousPage')"
             [attr.aria-label]="textFor('pagerPreviousPage')"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+            (click)="onButtonClick('prevPage')">
         </button>
-    `, isInline: true, components: [{ type: i3$4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -12443,12 +12612,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-treelist-pager-prev-buttons',
                     template: `
         <button
-            [tabIndex]="-1"
             kendoButton
             type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             [title]="textFor('pagerFirstPage')"
             [attr.aria-label]="textFor('pagerFirstPage')"
-            (click)="currentPage !== 1 ? changePage(0) : false"
+            (click)="onButtonClick('firstPage')"
             role="button"
             icon="caret-alt-to-left"
             [svgIcon]="caretAltToLeftIcon"
@@ -12459,8 +12629,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </button>
         <button
             kendoButton
-            [tabIndex]="-1"
             type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             class="k-pager-nav"
             [disabled]="disabled"
             icon="caret-alt-left"
@@ -12469,12 +12640,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             rounded="none"
             [title]="textFor('pagerPreviousPage')"
             [attr.aria-label]="textFor('pagerPreviousPage')"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+            (click)="onButtonClick('prevPage')">
         </button>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
 
+/* eslint-disable @typescript-eslint/no-inferrable-types */
 /**
  * Displays numeric buttons to enable navigation between the pages.
  */
@@ -12555,6 +12727,7 @@ PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0
 PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNumericButtonsComponent, selector: "kendo-treelist-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
         <select
             class="k-dropdown-list k-dropdown k-picker k-picker-solid k-picker-md k-rounded-md"
+            kendoTreeListFocusable
             [attr.title]="textFor('selectPage')"
             [attr.aria-label]="textFor('selectPage')"
             (change)="onSelectChange($event)">
@@ -12580,7 +12753,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
         <div class="k-pager-numbers">
             <button *ngIf="start > 1"
                 type="button"
-                [tabIndex]="-1"
+                kendoTreeListFocusable
                 kendoButton
                 fillMode="flat"
                 themeColor="primary"
@@ -12591,7 +12764,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 (click)="changePage(start - 2)">...</button>
             <button *ngFor="let num of buttons"
                 type="button"
-                [tabIndex]="-1"
+                kendoTreeListFocusable
                 kendoButton
                 fillMode="flat"
                 themeColor="primary"
@@ -12606,7 +12779,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             </button>
             <button *ngIf="end < totalPages"
                 type="button"
-                [tabIndex]="-1"
+                kendoTreeListFocusable
                 kendoButton
                 class="k-pager-nav"
                 fillMode="flat"
@@ -12616,7 +12789,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 [attr.title]="pageLabel(end + 1)"
                 (click)="changePage(end)">...</button>
         </div>
-    `, isInline: true, components: [{ type: i3$4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -12625,6 +12798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     template: `
         <select
             class="k-dropdown-list k-dropdown k-picker k-picker-solid k-picker-md k-rounded-md"
+            kendoTreeListFocusable
             [attr.title]="textFor('selectPage')"
             [attr.aria-label]="textFor('selectPage')"
             (change)="onSelectChange($event)">
@@ -12650,7 +12824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <div class="k-pager-numbers">
             <button *ngIf="start > 1"
                 type="button"
-                [tabIndex]="-1"
+                kendoTreeListFocusable
                 kendoButton
                 fillMode="flat"
                 themeColor="primary"
@@ -12661,7 +12835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 (click)="changePage(start - 2)">...</button>
             <button *ngFor="let num of buttons"
                 type="button"
-                [tabIndex]="-1"
+                kendoTreeListFocusable
                 kendoButton
                 fillMode="flat"
                 themeColor="primary"
@@ -12676,7 +12850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </button>
             <button *ngIf="end < totalPages"
                 type="button"
-                [tabIndex]="-1"
+                kendoTreeListFocusable
                 kendoButton
                 class="k-pager-nav"
                 fillMode="flat"
@@ -12699,9 +12873,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Displays an input element which allows the typing and rendering of page numbers.
  */
 class PagerInputComponent extends PagerElementComponent {
-    constructor(localization, pagerContext, zone, cd) {
+    constructor(localization, pagerContext, navigationService, zone, cd) {
         super(localization, pagerContext, cd);
         this.pagerContext = pagerContext;
+        this.navigationService = navigationService;
         this.zone = zone;
         /**
          * @hidden
@@ -12757,11 +12932,13 @@ class PagerInputComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1$1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1$1.LocalizationService }, { token: PagerContextService }, { token: NavigationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerInputComponent, selector: "kendo-treelist-pager-input", viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
         <span class="k-pager-input k-label">
             {{textFor('pagerPage')}}
             <kendo-numerictextbox
+                kendoTreeListFocusable
+                [enabled]="hasPages"
                 [style.margin]="'0 1ex'"
                 [style.width]="'3em'"
                 [spinners]="false"
@@ -12773,6 +12950,7 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [max]="totalPages"
                 [autoCorrect]="true"
                 [title]="textFor('pagerPageNumberInputTitle')"
+                [attr.aria-label]="textFor('pagerPageNumberInputTitle')"
                 [kendoEventsOutsideAngular]="{
                     keydown: handleKeyDown,
                     focusout: handleBlur
@@ -12780,7 +12958,7 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </kendo-numerictextbox>
                 {{textFor('pagerOf')}} {{totalPages}}
         </span>
-    `, isInline: true, components: [{ type: i2.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"] }], directives: [{ type: i1$3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, components: [{ type: i4$1.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"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i1$3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -12789,6 +12967,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <span class="k-pager-input k-label">
             {{textFor('pagerPage')}}
             <kendo-numerictextbox
+                kendoTreeListFocusable
+                [enabled]="hasPages"
                 [style.margin]="'0 1ex'"
                 [style.width]="'3em'"
                 [spinners]="false"
@@ -12800,6 +12980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [max]="totalPages"
                 [autoCorrect]="true"
                 [title]="textFor('pagerPageNumberInputTitle')"
+                [attr.aria-label]="textFor('pagerPageNumberInputTitle')"
                 [kendoEventsOutsideAngular]="{
                     keydown: handleKeyDown,
                     focusout: handleBlur
@@ -12809,7 +12990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </span>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { numericInput: [{
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: NavigationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { numericInput: [{
                 type: ViewChild,
                 args: [NumericTextBoxComponent, { static: true }]
             }] } });
@@ -12819,8 +13000,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Displays buttons for navigating to the next and to the last page ([see example]({% slug paging_treelist %}#toc-pager-templates)).
  */
 class PagerNextButtonsComponent extends PagerElementComponent {
-    constructor(localization, pagerContext, cd) {
+    constructor(localization, pagerContext, cd, navigationService) {
         super(localization, pagerContext, cd);
+        this.navigationService = navigationService;
         this.caretAltRightIcon = caretAltRightIcon;
         this.caretAltToRightIcon = caretAltToRightIcon;
     }
@@ -12834,6 +13016,15 @@ class PagerNextButtonsComponent extends PagerElementComponent {
     get disabled() {
         return this.currentPage === this.totalPages || !this.total;
     }
+    /**
+     * @hidden
+     */
+    onButtonClick(buttonName) {
+        if (this.currentPage !== this.totalPages) {
+            const skipToPage = buttonName === 'nextPage' ? this.currentPage : this.totalPages - 1;
+            this.changePage(skipToPage);
+        }
+    }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
         this.skip = skip;
@@ -12841,26 +13032,28 @@ class PagerNextButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1$1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNextButtonsComponent, selector: "kendo-treelist-pager-next-buttons", usesInheritance: true, ngImport: i0, template: `
+PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1$1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNextButtonsComponent, selector: "kendo-treelist-pager-next-buttons", inputs: { navigable: "navigable" }, usesInheritance: true, ngImport: i0, template: `
         <button
             kendoButton
             type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             icon="caret-alt-right"
             [svgIcon]="caretAltRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
-            [tabIndex]="-1"
             [disabled]="disabled"
             [title]="textFor('pagerNextPage')"
             [attr.aria-label]="textFor('pagerNextPage')"
-            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
+            (click)="onButtonClick('nextPage')">
         </button>
         <button
             kendoButton
             type="button"
-            [tabIndex]="-1"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             icon="caret-alt-to-right"
             [svgIcon]="caretAltToRightIcon"
             fillMode="flat"
@@ -12869,9 +13062,9 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [disabled]="disabled"
             [title]="textFor('pagerLastPage')"
             [attr.aria-label]="textFor('pagerLastPage')"
-            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
+            (click)="onButtonClick('lastPage')">
         </button>
-    `, isInline: true, components: [{ type: i3$4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -12881,21 +13074,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <button
             kendoButton
             type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             icon="caret-alt-right"
             [svgIcon]="caretAltRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
-            [tabIndex]="-1"
             [disabled]="disabled"
             [title]="textFor('pagerNextPage')"
             [attr.aria-label]="textFor('pagerNextPage')"
-            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
+            (click)="onButtonClick('nextPage')">
         </button>
         <button
             kendoButton
             type="button"
-            [tabIndex]="-1"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             icon="caret-alt-to-right"
             [svgIcon]="caretAltToRightIcon"
             fillMode="flat"
@@ -12904,11 +13099,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [disabled]="disabled"
             [title]="textFor('pagerLastPage')"
             [attr.aria-label]="textFor('pagerLastPage')"
-            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
+            (click)="onButtonClick('lastPage')">
         </button>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; }, propDecorators: { navigable: [{
+                type: Input
+            }] } });
 
 // eslint-disable no-access-missing-member
 /**
@@ -12979,8 +13176,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Displays a drop-down list for the page size selection ([see example]({% slug paging_treelist %}#toc-pager-templates)).
  */
 class PagerPageSizesComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext) {
+    constructor(elem, localization, cd, pagerContext) {
         super(localization, pagerContext, cd);
+        this.elem = elem;
         this.pagerContext = pagerContext;
         this._pageSizes = [];
     }
@@ -13052,7 +13250,7 @@ class PagerPageSizesComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
 PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPageSizesComponent, selector: "kendo-treelist-pager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
             #dropdownlist
@@ -13060,11 +13258,13 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [data]="pageSizes"
             textField="text"
             valueField="value"
+            kendoTreeListFocusable
             [valuePrimitive]="true"
             [value]="pageSize"
+            [attr.aria-label]="textFor('pagerItemsPerPage')"
             (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4$3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
@@ -13077,13 +13277,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [data]="pageSizes"
             textField="text"
             valueField="value"
+            kendoTreeListFocusable
             [valuePrimitive]="true"
             [value]="pageSize"
+            [attr.aria-label]="textFor('pagerItemsPerPage')"
             (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { pageSizes: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { pageSizes: [{
                 type: Input
             }], classes: [{
                 type: HostBinding,
@@ -13097,14 +13299,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 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;
@@ -13134,6 +13343,12 @@ 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);
     }
@@ -13151,7 +13366,13 @@ 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)) {
@@ -13177,18 +13398,135 @@ 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: 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: NavigationService }, { token: i1$1.LocalizationService }, { token: PagerContextService }, { token: FocusGroup }, { token: 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">
@@ -13197,21 +13535,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: PagerPrevButtonsComponent, selector: "kendo-treelist-pager-prev-buttons" }, { type: PagerNumericButtonsComponent, selector: "kendo-treelist-pager-numeric-buttons", inputs: ["buttonCount"] }, { type: PagerInputComponent, selector: "kendo-treelist-pager-input" }, { type: PagerNextButtonsComponent, selector: "kendo-treelist-pager-next-buttons" }, { type: PagerInfoComponent, selector: "kendo-treelist-pager-info" }, { type: PagerPageSizesComponent, selector: "kendo-treelist-pager-page-sizes", inputs: ["pageSizes"] }, { type: i1$3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  `, isInline: true, components: [{ type: PagerPrevButtonsComponent, selector: "kendo-treelist-pager-prev-buttons" }, { type: PagerNumericButtonsComponent, selector: "kendo-treelist-pager-numeric-buttons", inputs: ["buttonCount"] }, { type: PagerInputComponent, selector: "kendo-treelist-pager-input" }, { type: PagerNextButtonsComponent, selector: "kendo-treelist-pager-next-buttons", inputs: ["navigable"] }, { type: PagerInfoComponent, selector: "kendo-treelist-pager-info" }, { type: PagerPageSizesComponent, selector: "kendo-treelist-pager-page-sizes", inputs: ["pageSizes"] }, { type: i1$3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.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">
@@ -13220,22 +13585,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: PagerContextService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { allCount: [{
+        }], ctorParameters: function () { return [{ type: NavigationService }, { type: i1$1.LocalizationService }, { type: PagerContextService }, { type: FocusGroup }, { type: 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: [{
@@ -13244,6 +13634,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']
@@ -13256,6 +13652,12 @@ 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']
             }] } });
 
 /**
@@ -13264,7 +13666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class Messages extends ComponentMessages {
 }
 Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItemsTotal: "pagerItemsTotal", selectPage: "selectPage", filter: "filter", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset" }, usesInheritance: true, ngImport: i0 });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItemsTotal: "pagerItemsTotal", selectPage: "selectPage", filter: "filter", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{}]
@@ -13272,6 +13674,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], noRecords: [{
                 type: Input
+            }], pagerLabel: [{
+                type: Input
             }], pagerFirstPage: [{
                 type: Input
             }], pagerLastPage: [{
@@ -13370,6 +13774,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], columnsReset: [{
                 type: Input
+            }], topToolbarLabel: [{
+                type: Input
+            }], bottomToolbarLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -13666,6 +14074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['style.user-select']
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const createControl = (source) => (acc, key) => {
     acc[key] = new FormControl(source[key]);
     return acc;
@@ -13714,6 +14123,7 @@ class TreeListComponent {
         this.expandStateService = expandStateService;
         this.optionChanges = optionChanges;
         this.selectionService = selectionService;
+        this.localization = localization;
         this.ctx = ctx;
         /**
          * Defines the page size used by the TreeList when [paging]({% slug paging_treelist %}) is enabled.
@@ -13969,6 +14379,7 @@ class TreeListComponent {
         this.idGetter = getter(undefined);
         this.localEditService = new LocalEditService();
         this.view = new ViewCollection(this.viewFieldAccessor.bind(this), this.expandStateService, this.editService, this.selectionService);
+        this.ariaRootId = `k-${guid()}`;
         this.dataChanged = false;
         this._hasChildren = (() => false);
         this.subscriptions = new Subscription();
@@ -14319,6 +14730,9 @@ class TreeListComponent {
             return this.selectionService.enableMultiple;
         }
     }
+    get navigation() {
+        return this.navigationService;
+    }
     get isVirtual() {
         return this.scrollable === 'virtual';
     }
@@ -14810,6 +15224,12 @@ class TreeListComponent {
         this.changeDetectorRef.markForCheck();
         this.pageChange.emit(event);
     }
+    /**
+     * @hidden
+     */
+    messageFor(token) {
+        return this.localization.get(token);
+    }
     /**
      * @hidden
      */
@@ -15495,6 +15915,9 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             i18n-noRecords="kendo.treelist.noRecords|The label visible in the TreeList when there are no records"
             noRecords="No records available."
 
+            i18n-pagerLabel="kendo.treelist.pagerLabel|The label for the TreeList pager"
+            pagerLabel="{{ 'Page navigation, page {currentPage} of {totalPages}' }}"
+
             i18n-pagerFirstPage="kendo.treelist.pagerFirstPage|The label for the first page button in TreeList pager"
             pagerFirstPage="Go to the first page"
 
@@ -15641,15 +16064,26 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 
             i18n-selectPage="kendo.treelist.selectPage|The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager"
             selectPage="Select page"
+
+            i18n-topToolbarLabel="kendo.treelist.topToolbarLabel|The label of the TreeList top toolbar"
+            topToolbarLabel="Top toolbar"
+
+            i18n-bottomToolbarLabel="kendo.treelist.bottomToolbarLabel|The label of the TreeList bottom toolbar"
+            bottomToolbarLabel="Bottom toolbar"
          >
         </ng-container>
         <kendo-treelist-toolbar
             *ngIf="showTopToolbar"
-            position="top" 
-            class="k-toolbar k-grid-toolbar k-toolbar-md"></kendo-treelist-toolbar>
+            position="top"
+            [navigable]="navigable"
+            class="k-toolbar k-grid-toolbar k-toolbar-md"
+            [attr.aria-label]="messageFor('topToolbarLabel')"
+            [attr.aria-controls]="ariaRootId">
+        </kendo-treelist-toolbar>
         <div #ariaRoot
             class="k-grid-aria-root"
             role="treegrid"
+            [id]="ariaRootId"
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount"
             [attr.aria-multiselectable]="ariaMultiselectable"
@@ -15703,7 +16137,7 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                             </colgroup>
                             <thead kendoTreeListHeader
                                 [resizable]="resizable"
-                                role="presentation"
+                                role="rowgroup"
                                 [scrollable]="true"
                                 [columns]="headerColumns"
                                 [totalColumnLevels]="totalColumnLevels"
@@ -15792,14 +16226,20 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [total]="view.totalVisible"
             [allCount]="view.total"
             [skip]="skip"
+            [navigable]="navigable"
+            [attr.aria-controls]="ariaRootId"
             [options]="pageable"
             (pageChange)="notifyPageChange('pager', $event)">
         </kendo-treelist-pager>
         <kendo-treelist-toolbar
             *ngIf="showBottomToolbar"
             class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom k-toolbar-md"
-            position="bottom"></kendo-treelist-toolbar>
-    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position"] }, { type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount"] }, { type: ListComponent, selector: "kendo-treelist-list", inputs: ["view", "total", "rowHeight", "take", "skip", "columns", "noRecordsTemplate", "filterable", "rowClass", "loading", "trackBy", "virtualColumns", "isVirtual", "expandIcons"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "pageSize", "options", "template"], outputs: ["pageChange"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+            position="bottom"
+            [navigable]="navigable"
+            [attr.aria-label]="messageFor('bottomToolbarLabel')"
+            [attr.aria-controls]="ariaRootId">
+        </kendo-treelist-toolbar>
+    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position", "navigable"] }, { type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount"] }, { type: ListComponent, selector: "kendo-treelist-list", inputs: ["view", "total", "rowHeight", "take", "skip", "columns", "noRecordsTemplate", "filterable", "rowClass", "loading", "trackBy", "virtualColumns", "isVirtual", "expandIcons"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "navigable", "pageSize", "options", "template"], outputs: ["pageChange"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListComponent, decorators: [{
             type: Component,
             args: [{
@@ -15856,6 +16296,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             i18n-noRecords="kendo.treelist.noRecords|The label visible in the TreeList when there are no records"
             noRecords="No records available."
 
+            i18n-pagerLabel="kendo.treelist.pagerLabel|The label for the TreeList pager"
+            pagerLabel="{{ 'Page navigation, page {currentPage} of {totalPages}' }}"
+
             i18n-pagerFirstPage="kendo.treelist.pagerFirstPage|The label for the first page button in TreeList pager"
             pagerFirstPage="Go to the first page"
 
@@ -16002,15 +16445,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-selectPage="kendo.treelist.selectPage|The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager"
             selectPage="Select page"
+
+            i18n-topToolbarLabel="kendo.treelist.topToolbarLabel|The label of the TreeList top toolbar"
+            topToolbarLabel="Top toolbar"
+
+            i18n-bottomToolbarLabel="kendo.treelist.bottomToolbarLabel|The label of the TreeList bottom toolbar"
+            bottomToolbarLabel="Bottom toolbar"
          >
         </ng-container>
         <kendo-treelist-toolbar
             *ngIf="showTopToolbar"
-            position="top" 
-            class="k-toolbar k-grid-toolbar k-toolbar-md"></kendo-treelist-toolbar>
+            position="top"
+            [navigable]="navigable"
+            class="k-toolbar k-grid-toolbar k-toolbar-md"
+            [attr.aria-label]="messageFor('topToolbarLabel')"
+            [attr.aria-controls]="ariaRootId">
+        </kendo-treelist-toolbar>
         <div #ariaRoot
             class="k-grid-aria-root"
             role="treegrid"
+            [id]="ariaRootId"
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount"
             [attr.aria-multiselectable]="ariaMultiselectable"
@@ -16064,7 +16518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             </colgroup>
                             <thead kendoTreeListHeader
                                 [resizable]="resizable"
-                                role="presentation"
+                                role="rowgroup"
                                 [scrollable]="true"
                                 [columns]="headerColumns"
                                 [totalColumnLevels]="totalColumnLevels"
@@ -16153,13 +16607,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [total]="view.totalVisible"
             [allCount]="view.total"
             [skip]="skip"
+            [navigable]="navigable"
+            [attr.aria-controls]="ariaRootId"
             [options]="pageable"
             (pageChange)="notifyPageChange('pager', $event)">
         </kendo-treelist-pager>
         <kendo-treelist-toolbar
             *ngIf="showBottomToolbar"
             class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom k-toolbar-md"
-            position="bottom"></kendo-treelist-toolbar>
+            position="bottom"
+            [navigable]="navigable"
+            [attr.aria-label]="messageFor('bottomToolbarLabel')"
+            [attr.aria-controls]="ariaRootId">
+        </kendo-treelist-toolbar>
     `
                 }]
         }], ctorParameters: function () { return [{ type: BrowserSupportService }, { type: i0.ElementRef }, { type: ChangeNotificationService }, { type: EditService }, { type: FilterService }, { type: PDFService }, { type: ResponsiveService }, { type: i0.Renderer2 }, { type: ExcelService }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: DomEventsService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: ColumnReorderService }, { type: ColumnInfoService }, { type: NavigationService }, { type: SortService }, { type: ScrollRequestService }, { type: ExpandStateService }, { type: OptionChangesService }, { type: SelectionService }, { type: i1$1.LocalizationService }, { type: ContextService }]; }, propDecorators: { ariaLabel: [{
@@ -16304,10 +16764,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: [ColumnMenuTemplateDirective]
             }], lockedHeader: [{
                 type: ViewChild,
-                args: ['lockedHeader', { static: false }]
+                args: ['lockedHeader']
             }], header: [{
                 type: ViewChild,
-                args: ['header', { static: false }]
+                args: ['header']
             }], footer: [{
                 type: ViewChildren,
                 args: ['footer']
@@ -17618,7 +18078,7 @@ ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 (columnChange)="onChange($event)">
             </kendo-treelist-columnlist>
         </ng-template>
-    `, isInline: true, components: [{ type: i3$4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, components: [{ type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnChooserComponent, decorators: [{
             type: Component,
             args: [{
@@ -18339,6 +18799,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
+/**
+ * A directive applied to all toolbar elements that need to be a part of the TreeList
+ * keyboard navigation.
+ */
+class TreeListToolbarFocusableDirective {
+    constructor(host, ctx) {
+        this.host = host;
+        this.ctx = ctx;
+    }
+    /**
+     * @hidden
+     */
+    get element() {
+        return this.host.nativeElement;
+    }
+    /**
+     * @hidden
+     */
+    get toolbarPosition() {
+        var _a;
+        return isDocumentAvailable() && ((_a = this.host.nativeElement.closest('.k-toolbar')) === null || _a === void 0 ? void 0 : _a.getAttribute('position'));
+    }
+    ngAfterViewInit() {
+        var _a, _b;
+        if (!isDocumentAvailable() || !this.toolbarPosition) {
+            return;
+        }
+        (_a = this.ctx[`${this.toolbarPosition}ToolbarNavigation`]) === null || _a === void 0 ? void 0 : _a.navigableElements.push(this.element);
+        (_b = this.ctx[`${this.toolbarPosition}ToolbarNavigation`]) === null || _b === void 0 ? void 0 : _b.notify();
+    }
+    ngOnDestroy() {
+        if (!isDocumentAvailable() || !this.toolbarPosition) {
+            return;
+        }
+        const elements = this.ctx[`${this.toolbarPosition}ToolbarNavigation`].navigableElements;
+        this.ctx[`${this.toolbarPosition}ToolbarNavigation`].navigableElements = elements.filter(el => el !== this.element);
+        this.ctx[`${this.toolbarPosition}ToolbarNavigation`].notify();
+    }
+}
+TreeListToolbarFocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListToolbarFocusableDirective, deps: [{ token: i0.ElementRef }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Directive });
+TreeListToolbarFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: TreeListToolbarFocusableDirective, selector: "\n        [kendoTreeListToolbarFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListCancelCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListExcelCommand],\n        [kendoTreeListPDFCommand]\n    ", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListToolbarFocusableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+        [kendoTreeListToolbarFocusable],
+        [kendoTreeListAddCommand],
+        [kendoTreeListCancelCommand],
+        [kendoTreeListEditCommand],
+        [kendoTreeListRemoveCommand],
+        [kendoTreeListSaveCommand],
+        [kendoTreeListExcelCommand],
+        [kendoTreeListPDFCommand]
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ContextService }]; } });
+
 /**
  * @hidden
  */
@@ -19346,6 +19863,7 @@ const exportedModules$1 = [
     FlatBindingDirective,
     ExpandableDirective,
     SelectableDirective,
+    TreeListToolbarFocusableDirective,
     ...SharedModule.exports(),
     ...BodyModule.exports(),
     ...HeaderModule.exports(),
@@ -19369,7 +19887,8 @@ const declarations$2 = [
     ExpandableDirective,
     SelectableDirective,
     MarqueeDirective,
-    TreeListSpacerComponent
+    TreeListSpacerComponent,
+    TreeListToolbarFocusableDirective
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -19409,7 +19928,8 @@ TreeListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         ExpandableDirective,
         SelectableDirective,
         MarqueeDirective,
-        TreeListSpacerComponent], imports: [CommonModule,
+        TreeListSpacerComponent,
+        TreeListToolbarFocusableDirective], imports: [CommonModule,
         SharedModule,
         BodyModule,
         HeaderModule,
@@ -19428,7 +19948,8 @@ TreeListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         HierarchyBindingDirective,
         FlatBindingDirective,
         ExpandableDirective,
-        SelectableDirective, ColumnComponent, SpanColumnComponent, CheckboxColumnComponent, ColumnGroupComponent, FocusableDirective, CommandColumnComponent, CellTemplateDirective, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, FooterTemplateDirective, HeaderTemplateDirective, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, FilterCellOperatorsComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, ColumnChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuComponent] });
+        SelectableDirective,
+        TreeListToolbarFocusableDirective, ColumnComponent, SpanColumnComponent, CheckboxColumnComponent, ColumnGroupComponent, FocusableDirective, CommandColumnComponent, CellTemplateDirective, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, FooterTemplateDirective, HeaderTemplateDirective, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, FilterCellOperatorsComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, ColumnChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuComponent] });
 TreeListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListModule, imports: [[
             CommonModule,
             SharedModule,
@@ -20333,5 +20854,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseCommandDirective, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, CancelCommandDirective, CellCloseEvent, CellComponent, CellTemplateDirective, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuLockComponent, ColumnMenuSortComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, CustomMessagesComponent, DataBoundTreeComponent, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DoesNotContainFilterOperatorComponent, EditCommandDirective, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandEvent, ExpandableDirective, ExpandableTreeComponent, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FlatBindingDirective, FocusableDirective, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, HeaderComponent, HeaderModule, HeaderTemplateDirective, HierarchyBindingDirective, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, LevelItemsPipe, ListComponent, LoadingComponent, LogicalCellDirective, LogicalRowDirective, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerInfoComponent, PagerInputComponent, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, SelectableDirective, SelectionChangeEvent, SharedFilterModule, SharedModule, SinglePopupService, Skip, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, TreeListComponent, TreeListModule, TreeListSpacerComponent };
+export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseCommandDirective, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, CancelCommandDirective, CellCloseEvent, CellComponent, CellTemplateDirective, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuLockComponent, ColumnMenuSortComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, CustomMessagesComponent, DataBoundTreeComponent, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DoesNotContainFilterOperatorComponent, EditCommandDirective, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandEvent, ExpandableDirective, ExpandableTreeComponent, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FlatBindingDirective, FocusableDirective, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, HeaderComponent, HeaderModule, HeaderTemplateDirective, HierarchyBindingDirective, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, LevelItemsPipe, ListComponent, LoadingComponent, LogicalCellDirective, LogicalRowDirective, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerInfoComponent, PagerInputComponent, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, SelectableDirective, SelectionChangeEvent, SharedFilterModule, SharedModule, SinglePopupService, Skip, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, TreeListComponent, TreeListModule, TreeListSpacerComponent, TreeListToolbarFocusableDirective };