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

package/esm2020/rendering/toolbar/toolbar-focusable.directive.mjs

@@ -0,0 +1,63 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, ElementRef } from '@angular/core';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { ContextService } from '../../common/provider.service';
+import * as i0 from "@angular/core";
+import * as i1 from "../../common/provider.service";
+/**
+ * A directive applied to all toolbar elements that need to be a part of the TreeList
+ * keyboard navigation.
+ */
+export class TreeListToolbarFocusableDirective {
+    constructor(host, ctx) {
+        this.host = host;
+        this.ctx = ctx;
+    }
+    /**
+     * @hidden
+     */
+    get element() {
+        return this.host.nativeElement;
+    }
+    /**
+     * @hidden
+     */
+    get toolbarPosition() {
+        return isDocumentAvailable() && this.host.nativeElement.closest('.k-toolbar')?.getAttribute('position');
+    }
+    ngAfterViewInit() {
+        if (!isDocumentAvailable() || !this.toolbarPosition) {
+            return;
+        }
+        this.ctx[`${this.toolbarPosition}ToolbarNavigation`]?.navigableElements.push(this.element);
+        this.ctx[`${this.toolbarPosition}ToolbarNavigation`]?.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: i1.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: i1.ContextService }]; } });

package/esm2020/rendering/toolbar/toolbar-navigation.service.mjs

@@ -0,0 +1,53 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable, Renderer2 } from '@angular/core';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export 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() {
+        this.navigableElements[this.currentActiveIndex]?.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 }]; } });

package/esm2020/rendering/toolbar/toolbar.component.mjs

@@ -2,8 +2,11 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input } from '@angular/core';
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+import { Component, Input, HostBinding, Renderer2, ElementRef } from '@angular/core';
 import { ContextService } from './../../common/provider.service';
+import { Subscription } from 'rxjs';
+import { Keys, isDocumentAvailable } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "./../../common/provider.service";
 import * as i2 from "@angular/common";
@@ -11,9 +14,14 @@ import * as i2 from "@angular/common";
  * @hidden
  */
 export 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;
@@ -21,9 +29,35 @@ export 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: i1.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: i1.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"
@@ -44,6 +78,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ContextService }]; }, propDecorators: { position: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ContextService }]; }, propDecorators: { hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], position: [{
+                type: Input
+            }], navigable: [{
                 type: Input
             }] } });

package/esm2020/treelist.component.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, QueryList, ViewChild, isDevMode, NgZone, ViewChildren, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, forwardRef } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { Subscription, merge, isObservable } from 'rxjs';
@@ -64,6 +65,7 @@ import { SelectionService } from './selection/selection.service';
 import { DataBoundTreeComponent } from './binding-directives/data-bound-tree-component';
 import { ExpandableTreeComponent } from './expand-state/expandable-tree-component';
 import { ContextService } from './common/provider.service';
+import { guid } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "./layout/browser-support.service";
 import * as i2 from "./data/change-notification.service";
@@ -146,6 +148,7 @@ export 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.
@@ -401,6 +404,7 @@ export 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();
@@ -751,6 +755,9 @@ export class TreeListComponent {
             return this.selectionService.enableMultiple;
         }
     }
+    get navigation() {
+        return this.navigationService;
+    }
     get isVirtual() {
         return this.scrollable === 'virtual';
     }
@@ -1242,6 +1249,12 @@ export class TreeListComponent {
         this.changeDetectorRef.markForCheck();
         this.pageChange.emit(event);
     }
+    /**
+     * @hidden
+     */
+    messageFor(token) {
+        return this.localization.get(token);
+    }
     /**
      * @hidden
      */
@@ -1927,6 +1940,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"
 
@@ -2073,15 +2089,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"
@@ -2135,7 +2162,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"
@@ -2224,14 +2251,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: i21.ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position"] }, { type: i22.ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: i23.HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount"] }, { type: i24.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: i25.TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: i26.LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: i27.PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "pageSize", "options", "template"], outputs: ["pageChange"] }], directives: [{ type: i28.LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i29.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i30.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i31.ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i32.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i33.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: i21.ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position", "navigable"] }, { type: i22.ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: i23.HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount"] }, { type: i24.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: i25.TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: i26.LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: i27.PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "navigable", "pageSize", "options", "template"], outputs: ["pageChange"] }], directives: [{ type: i28.LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i29.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i30.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i31.ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i32.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i33.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: [{
@@ -2288,6 +2321,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"
 
@@ -2434,15 +2470,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"
@@ -2496,7 +2543,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"
@@ -2585,13 +2632,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: i1.BrowserSupportService }, { type: i0.ElementRef }, { type: i2.ChangeNotificationService }, { type: i3.EditService }, { type: i4.FilterService }, { type: i5.PDFService }, { type: i6.ResponsiveService }, { type: i0.Renderer2 }, { type: i7.ExcelService }, { type: i0.NgZone }, { type: i8.ScrollSyncService }, { type: i9.DomEventsService }, { type: i10.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i11.ColumnReorderService }, { type: i12.ColumnInfoService }, { type: i13.NavigationService }, { type: i14.SortService }, { type: i15.ScrollRequestService }, { type: i16.ExpandStateService }, { type: i17.OptionChangesService }, { type: i18.SelectionService }, { type: i19.LocalizationService }, { type: i20.ContextService }]; }, propDecorators: { ariaLabel: [{
@@ -2736,10 +2789,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']

package/esm2020/treelist.module.mjs

@@ -15,6 +15,7 @@ import { BodyModule } from "./rendering/body.module";
 import { SharedModule } from './shared.module';
 import { ToolbarTemplateDirective } from "./rendering/toolbar/toolbar-template.directive";
 import { ToolbarComponent } from "./rendering/toolbar/toolbar.component";
+import { TreeListToolbarFocusableDirective } from './rendering/toolbar/toolbar-focusable.directive';
 import { ResizeSensorModule } from '@progress/kendo-angular-common';
 import { TemplateEditingDirective } from './editing-directives/template-editing.directive';
 import { ReactiveEditingDirective } from './editing-directives/reactive-editing.directive';
@@ -106,6 +107,7 @@ const exportedModules = [
     FlatBindingDirective,
     ExpandableDirective,
     SelectableDirective,
+    TreeListToolbarFocusableDirective,
     ...SharedModule.exports(),
     ...BodyModule.exports(),
     ...HeaderModule.exports(),
@@ -129,7 +131,8 @@ const declarations = [
     ExpandableDirective,
     SelectableDirective,
     MarqueeDirective,
-    TreeListSpacerComponent
+    TreeListSpacerComponent,
+    TreeListToolbarFocusableDirective
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -169,7 +172,8 @@ TreeListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         ExpandableDirective,
         SelectableDirective,
         MarqueeDirective,
-        TreeListSpacerComponent], imports: [CommonModule,
+        TreeListSpacerComponent,
+        TreeListToolbarFocusableDirective], imports: [CommonModule,
         SharedModule,
         BodyModule,
         HeaderModule,
@@ -188,7 +192,8 @@ TreeListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         HierarchyBindingDirective,
         FlatBindingDirective,
         ExpandableDirective,
-        SelectableDirective, i1.ColumnComponent, i2.SpanColumnComponent, i3.CheckboxColumnComponent, i4.ColumnGroupComponent, i5.FocusableDirective, i6.CommandColumnComponent, i7.CellTemplateDirective, i8.NoRecordsTemplateDirective, i9.EditTemplateDirective, i10.EditCommandDirective, i11.CancelCommandDirective, i12.SaveCommandDirective, i13.RemoveCommandDirective, i14.AddCommandDirective, i15.FooterTemplateDirective, i16.HeaderTemplateDirective, i17.PagerComponent, i18.PagerPrevButtonsComponent, i19.PagerNextButtonsComponent, i20.PagerNumericButtonsComponent, i21.PagerInputComponent, i22.PagerInfoComponent, i23.PagerPageSizesComponent, i24.PagerTemplateDirective, i25.FilterRowComponent, i26.FilterCellComponent, i27.FilterCellTemplateDirective, i28.FilterCellOperatorsComponent, i29.StringFilterCellComponent, i30.NumericFilterCellComponent, i31.AutoCompleteFilterCellComponent, i32.BooleanFilterCellComponent, i33.DateFilterCellComponent, i28.FilterCellOperatorsComponent, i34.ContainsFilterOperatorComponent, i35.DoesNotContainFilterOperatorComponent, i36.EndsWithFilterOperatorComponent, i37.EqualFilterOperatorComponent, i38.IsEmptyFilterOperatorComponent, i39.IsNotEmptyFilterOperatorComponent, i40.IsNotNullFilterOperatorComponent, i41.IsNullFilterOperatorComponent, i42.NotEqualFilterOperatorComponent, i43.StartsWithFilterOperatorComponent, i44.GreaterFilterOperatorComponent, i45.GreaterOrEqualToFilterOperatorComponent, i46.LessFilterOperatorComponent, i47.LessOrEqualToFilterOperatorComponent, i48.AfterFilterOperatorComponent, i49.AfterEqFilterOperatorComponent, i50.BeforeEqFilterOperatorComponent, i51.BeforeFilterOperatorComponent, i52.StringFilterMenuComponent, i53.FilterMenuTemplateDirective, i54.NumericFilterMenuComponent, i55.DateFilterMenuComponent, i56.BooleanFilterMenuComponent, i28.FilterCellOperatorsComponent, i34.ContainsFilterOperatorComponent, i35.DoesNotContainFilterOperatorComponent, i36.EndsWithFilterOperatorComponent, i37.EqualFilterOperatorComponent, i38.IsEmptyFilterOperatorComponent, i39.IsNotEmptyFilterOperatorComponent, i40.IsNotNullFilterOperatorComponent, i41.IsNullFilterOperatorComponent, i42.NotEqualFilterOperatorComponent, i43.StartsWithFilterOperatorComponent, i44.GreaterFilterOperatorComponent, i45.GreaterOrEqualToFilterOperatorComponent, i46.LessFilterOperatorComponent, i47.LessOrEqualToFilterOperatorComponent, i48.AfterFilterOperatorComponent, i49.AfterEqFilterOperatorComponent, i50.BeforeEqFilterOperatorComponent, i51.BeforeFilterOperatorComponent, i57.ColumnChooserComponent, i58.ColumnMenuFilterComponent, i59.ColumnMenuItemComponent, i60.ColumnMenuItemContentTemplateDirective, i61.ColumnMenuSortComponent, i62.ColumnMenuLockComponent, i63.ColumnMenuChooserComponent, i64.ColumnMenuTemplateDirective, i65.ColumnMenuComponent] });
+        SelectableDirective,
+        TreeListToolbarFocusableDirective, i1.ColumnComponent, i2.SpanColumnComponent, i3.CheckboxColumnComponent, i4.ColumnGroupComponent, i5.FocusableDirective, i6.CommandColumnComponent, i7.CellTemplateDirective, i8.NoRecordsTemplateDirective, i9.EditTemplateDirective, i10.EditCommandDirective, i11.CancelCommandDirective, i12.SaveCommandDirective, i13.RemoveCommandDirective, i14.AddCommandDirective, i15.FooterTemplateDirective, i16.HeaderTemplateDirective, i17.PagerComponent, i18.PagerPrevButtonsComponent, i19.PagerNextButtonsComponent, i20.PagerNumericButtonsComponent, i21.PagerInputComponent, i22.PagerInfoComponent, i23.PagerPageSizesComponent, i24.PagerTemplateDirective, i25.FilterRowComponent, i26.FilterCellComponent, i27.FilterCellTemplateDirective, i28.FilterCellOperatorsComponent, i29.StringFilterCellComponent, i30.NumericFilterCellComponent, i31.AutoCompleteFilterCellComponent, i32.BooleanFilterCellComponent, i33.DateFilterCellComponent, i28.FilterCellOperatorsComponent, i34.ContainsFilterOperatorComponent, i35.DoesNotContainFilterOperatorComponent, i36.EndsWithFilterOperatorComponent, i37.EqualFilterOperatorComponent, i38.IsEmptyFilterOperatorComponent, i39.IsNotEmptyFilterOperatorComponent, i40.IsNotNullFilterOperatorComponent, i41.IsNullFilterOperatorComponent, i42.NotEqualFilterOperatorComponent, i43.StartsWithFilterOperatorComponent, i44.GreaterFilterOperatorComponent, i45.GreaterOrEqualToFilterOperatorComponent, i46.LessFilterOperatorComponent, i47.LessOrEqualToFilterOperatorComponent, i48.AfterFilterOperatorComponent, i49.AfterEqFilterOperatorComponent, i50.BeforeEqFilterOperatorComponent, i51.BeforeFilterOperatorComponent, i52.StringFilterMenuComponent, i53.FilterMenuTemplateDirective, i54.NumericFilterMenuComponent, i55.DateFilterMenuComponent, i56.BooleanFilterMenuComponent, i28.FilterCellOperatorsComponent, i34.ContainsFilterOperatorComponent, i35.DoesNotContainFilterOperatorComponent, i36.EndsWithFilterOperatorComponent, i37.EqualFilterOperatorComponent, i38.IsEmptyFilterOperatorComponent, i39.IsNotEmptyFilterOperatorComponent, i40.IsNotNullFilterOperatorComponent, i41.IsNullFilterOperatorComponent, i42.NotEqualFilterOperatorComponent, i43.StartsWithFilterOperatorComponent, i44.GreaterFilterOperatorComponent, i45.GreaterOrEqualToFilterOperatorComponent, i46.LessFilterOperatorComponent, i47.LessOrEqualToFilterOperatorComponent, i48.AfterFilterOperatorComponent, i49.AfterEqFilterOperatorComponent, i50.BeforeEqFilterOperatorComponent, i51.BeforeFilterOperatorComponent, i57.ColumnChooserComponent, i58.ColumnMenuFilterComponent, i59.ColumnMenuItemComponent, i60.ColumnMenuItemContentTemplateDirective, i61.ColumnMenuSortComponent, i62.ColumnMenuLockComponent, i63.ColumnMenuChooserComponent, i64.ColumnMenuTemplateDirective, i65.ColumnMenuComponent] });
 TreeListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListModule, imports: [[
             CommonModule,
             SharedModule,

package/esm2020/utils.mjs

@@ -111,3 +111,7 @@ export const cancelAnimationFrame = wnd.cancelAnimationFrame || wnd.msCancelRequ
 /** @hidden */
 export const isColumnEditable = (column, formGroup) => column.isEditable !== false &&
     (column.editTemplate || (formGroup && column.field && formGroup.get(column.field)));
+/**
+ * @hidden
+ */
+export const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);