@progress/kendo-angular-grid 11.4.0-develop.1 → 11.4.0-develop.10

package/common/provider.service.d.ts

@@ -2,7 +2,9 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { Renderer2 } from '@angular/core';
 import type { GridComponent } from '../grid.component';
+import { GridToolbarNavigationService } from '../rendering/toolbar/toolbar-navigation.service';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -14,7 +16,11 @@ import * as i0 from "@angular/core";
  * and a avoids dependency cycles between components.
  */
 export declare class ContextService {
+    private renderer;
     grid: GridComponent;
+    topToolbarNavigation: GridToolbarNavigationService;
+    bottomToolbarNavigation: GridToolbarNavigationService;
+    constructor(renderer: Renderer2);
     static ɵfac: i0.ɵɵFactoryDeclaration<ContextService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ContextService>;
 }

package/esm2020/column-menu/column-list.component.mjs

@@ -20,7 +20,7 @@ export class ColumnListComponent {
         this.columnChange = new EventEmitter();
         this.autoSync = true;
         this.allowHideAll = false;
-        this.actionsClass = 'k-action-buttons';
+        this.actionsClass = 'k-actions';
         this.unlockedCount = 0;
     }
     get className() {

package/esm2020/column-menu/column-menu-chooser.component.mjs

@@ -69,7 +69,7 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-columnmenu-actions';
+        this.actionsClass = 'k-actions';
         this.columnsIcon = columnsIcon;
     }
     get columns() {

package/esm2020/column-menu/column-menu-filter.component.mjs

@@ -65,7 +65,7 @@ export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-columnmenu-actions';
+        this.actionsClass = 'k-actions';
         this.filterIcon = filterIcon;
     }
     /**

package/esm2020/column-menu/column-menu-position.component.mjs

@@ -63,7 +63,7 @@ export class ColumnMenuPositionComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-columnmenu-actions';
+        this.actionsClass = 'k-actions';
         this.setColumnPositionIcon = setColumnPositionIcon;
         this._isLast = false;
     }

package/esm2020/common/provider.service.mjs

@@ -2,7 +2,8 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Injectable } from '@angular/core';
+import { Injectable, Renderer2 } from '@angular/core';
+import { GridToolbarNavigationService } from '../rendering/toolbar/toolbar-navigation.service';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -14,9 +15,14 @@ import * as i0 from "@angular/core";
  * and a avoids dependency cycles between components.
  */
 export class ContextService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.topToolbarNavigation = new GridToolbarNavigationService(this.renderer);
+        this.bottomToolbarNavigation = new GridToolbarNavigationService(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 }]; } });

package/esm2020/filtering/cell/date-filter-cell.component.mjs

@@ -94,7 +94,7 @@ DateFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </kendo-datepicker-messages>
             </kendo-datepicker>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: i4.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i5.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: i6.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: i7.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
+    `, isInline: true, components: [{ type: i4.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i5.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: i6.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: i7.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterCellComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/filtering/cell/filter-cell.component.mjs

@@ -2,7 +2,7 @@
 * 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';
+import { Component, HostBinding, Input } from '@angular/core';
 import { ColumnComponent } from '../../columns/column.component';
 import { isPresent, isNullOrEmptyString } from '../../utils';
 import { cloneFilters } from '../../common/filter-descriptor-differ';
@@ -14,6 +14,7 @@ import * as i2 from "./filter-cell-host.directive";
  */
 export class FilterCellComponent {
     constructor() {
+        this.hostRole = 'gridcell';
         this.size = 'medium';
         this._templateContext = {};
     }
@@ -37,7 +38,7 @@ export class FilterCellComponent {
     }
 }
 FilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterCellComponent, selector: "[kendoGridFilterCell]", inputs: { column: "column", filter: "filter", size: "size" }, ngImport: i0, template: `
+FilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterCellComponent, selector: "[kendoGridFilterCell]", inputs: { column: "column", filter: "filter", size: "size" }, host: { properties: { "attr.role": "this.hostRole" } }, ngImport: i0, template: `
         <ng-container *ngIf="isFilterable">
             <ng-container [ngSwitch]="hasTemplate">
                 <ng-container *ngSwitchCase="false">
@@ -74,7 +75,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-container>
     `
                 }]
-        }], propDecorators: { column: [{
+        }], propDecorators: { hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], column: [{
                 type: Input
             }], filter: [{
                 type: Input

package/esm2020/filtering/menu/date-filter-menu-input.component.mjs

@@ -80,7 +80,7 @@ DateFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </kendo-datepicker-messages>
             </kendo-datepicker>
         </kendo-grid-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: i3.FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { type: i4.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", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i4.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: i5.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, components: [{ type: i3.FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { type: i4.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"] }, { type: i4.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: i5.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/filtering/menu/filter-menu-container.component.mjs

@@ -57,7 +57,7 @@ export class FilterMenuContainerComponent {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-action-buttons';
+        this.actionsClass = 'k-actions';
         this._templateContext = {};
         this.menuTabbingService = menuTabbingService;
     }

package/esm2020/filtering/shared-filtering.module.mjs

@@ -63,7 +63,7 @@ const importedModules = [
     DatePickerModule,
     PopupModule,
     SharedModule,
-    ButtonModule
+    ButtonModule,
 ];
 const COMPONENTS = [
     FilterInputDirective

package/esm2020/grid.component.mjs

@@ -72,6 +72,7 @@ import { CellLoadingTemplateDirective } from './rendering/cell-loading.template.
 import { ContextService } from './common/provider.service';
 import { LoadingTemplateDirective } from './rendering/loading-template.directive';
 import { SizingOptionsService } from './layout/sizing-options.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 "./selection/selection.service";
@@ -446,6 +447,7 @@ export class GridComponent {
         this.hostClass = true;
         this.footer = new QueryList();
         this.selectionDirective = false;
+        this.ariaRootId = `k-${guid()}`;
         this.columnsContainer = new ColumnsContainer(() => this.columnList.filterHierarchy(column => {
             if (!isUniversal()) {
                 column.matchesMedia = this.matchesMedia(column);
@@ -615,7 +617,7 @@ export class GridComponent {
      */
     set navigable(value) {
         if (typeof value === 'boolean') {
-            this._navigable = value ? ['table', 'pager'] : [];
+            this._navigable = value ? ['table', 'pager', 'toolbar'] : [];
             return;
         }
         this._navigable = value;
@@ -1178,6 +1180,12 @@ export class GridComponent {
     get ariaLabel() {
         return this.localization.get('gridLabel');
     }
+    /**
+     * @hidden
+     */
+    messageFor(token) {
+        return this.localization.get(token);
+    }
     /**
      * Switches the specified table row in the edit mode ([see example]({% slug inline_editing_grid %}#toc-editing-records-1)).
      *
@@ -2409,12 +2417,24 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
 
             i18n-selectPage="kendo.grid.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Grid Pager"
             selectPage="Select page"
+
+            i18n-topToolbarLabel="kendo.grid.topToolbarLabel|The label for the Grid top toolbar"
+            topToolbarLabel="Top toolbar"
+
+            i18n-bottomToolbarLabel="kendo.grid.bottomToolbarLabel|The label for the Grid bottom toolbar"
+            bottomToolbarLabel="Bottom toolbar"
+
+            i18n-groupPanelLabel="kendo.grid.groupPanelLabel|The label for the Grid group panel toolbar"
+            groupPanelLabel="Group panel"
         >
         </ng-container>
         <kendo-grid-toolbar
             class="k-toolbar k-grid-toolbar"
             *ngIf="showTopToolbar"
             [size]="size"
+            [attr.aria-label]="messageFor('topToolbarLabel')"
+            [navigable]="navigation.toolbarEnabled"
+            [attr.aria-controls]="ariaRootId"
             position="top"></kendo-grid-toolbar>
         <kendo-pager
             *ngIf="showTopPager"
@@ -2431,13 +2451,18 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </kendo-pager>
         <kendo-grid-group-panel
             *ngIf="showGroupPanel"
+            [navigable]="navigation.toolbarEnabled"
             [text]="groupableEmptyText"
             [groups]="group"
+            role="toolbar"
+            [attr.aria-label]="messageFor('groupPanelLabel')"
+            [attr.aria-controls]="ariaRootId"
             (change)="groupChange.emit($event)">
         </kendo-grid-group-panel>
         <div #ariaRoot
             class="k-grid-aria-root"
             role="grid"
+            [id]="ariaRootId"
             [attr.aria-label]="ariaLabel"
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount">
@@ -2465,6 +2490,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                             [detailTemplate]="detailTemplate">
                         </colgroup>
                         <thead kendoGridHeader
+                            role="rowgroup"
                             [resizable]="resizable"
                             [scrollable]="true"
                             [columns]="$any(lockedColumns)"
@@ -2502,7 +2528,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                         </colgroup>
                         <thead kendoGridHeader
                             [resizable]="resizable"
-                            role="presentation"
+                            role="rowgroup"
                             [scrollable]="true"
                             [columns]="headerColumns"
                             [totalColumnLevels]="totalColumnLevels"
@@ -2689,8 +2715,11 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom"
             *ngIf="showBottomToolbar"
             [size]="size"
+            [navigable]="navigation.toolbarEnabled"
+            [attr.aria-label]="messageFor('bottomToolbarLabel')"
+            [attr.aria-controls]="ariaRootId"
             position="bottom"></kendo-grid-toolbar>
-    `, isInline: true, components: [{ type: i24.ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size"] }, { type: i25.PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: i26.GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "groups"], outputs: ["change"] }, { type: i27.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: i28.HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: i29.ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: i30.FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: i31.TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: i32.LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }], directives: [{ type: i33.LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i34.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i35.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i36.GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: i37.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i38.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i39.GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, components: [{ type: i24.ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: i25.PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: i26.GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: i27.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: i28.HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: i29.ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: i30.FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: i31.TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: i32.LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }], directives: [{ type: i33.LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i34.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i35.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i36.GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: i37.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i38.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i39.GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{
@@ -2957,12 +2986,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-selectPage="kendo.grid.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Grid Pager"
             selectPage="Select page"
+
+            i18n-topToolbarLabel="kendo.grid.topToolbarLabel|The label for the Grid top toolbar"
+            topToolbarLabel="Top toolbar"
+
+            i18n-bottomToolbarLabel="kendo.grid.bottomToolbarLabel|The label for the Grid bottom toolbar"
+            bottomToolbarLabel="Bottom toolbar"
+
+            i18n-groupPanelLabel="kendo.grid.groupPanelLabel|The label for the Grid group panel toolbar"
+            groupPanelLabel="Group panel"
         >
         </ng-container>
         <kendo-grid-toolbar
             class="k-toolbar k-grid-toolbar"
             *ngIf="showTopToolbar"
             [size]="size"
+            [attr.aria-label]="messageFor('topToolbarLabel')"
+            [navigable]="navigation.toolbarEnabled"
+            [attr.aria-controls]="ariaRootId"
             position="top"></kendo-grid-toolbar>
         <kendo-pager
             *ngIf="showTopPager"
@@ -2979,13 +3020,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-pager>
         <kendo-grid-group-panel
             *ngIf="showGroupPanel"
+            [navigable]="navigation.toolbarEnabled"
             [text]="groupableEmptyText"
             [groups]="group"
+            role="toolbar"
+            [attr.aria-label]="messageFor('groupPanelLabel')"
+            [attr.aria-controls]="ariaRootId"
             (change)="groupChange.emit($event)">
         </kendo-grid-group-panel>
         <div #ariaRoot
             class="k-grid-aria-root"
             role="grid"
+            [id]="ariaRootId"
             [attr.aria-label]="ariaLabel"
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount">
@@ -3013,6 +3059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [detailTemplate]="detailTemplate">
                         </colgroup>
                         <thead kendoGridHeader
+                            role="rowgroup"
                             [resizable]="resizable"
                             [scrollable]="true"
                             [columns]="$any(lockedColumns)"
@@ -3050,7 +3097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         </colgroup>
                         <thead kendoGridHeader
                             [resizable]="resizable"
-                            role="presentation"
+                            role="rowgroup"
                             [scrollable]="true"
                             [columns]="headerColumns"
                             [totalColumnLevels]="totalColumnLevels"
@@ -3237,6 +3284,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom"
             *ngIf="showBottomToolbar"
             [size]="size"
+            [navigable]="navigation.toolbarEnabled"
+            [attr.aria-label]="messageFor('bottomToolbarLabel')"
+            [attr.aria-controls]="ariaRootId"
             position="bottom"></kendo-grid-toolbar>
     `
                 }]

package/esm2020/grid.module.mjs

@@ -30,6 +30,7 @@ import { InCellEditingDirective } from './editing-directives/in-cell-editing.dir
 import { GroupBindingDirective } from './grouping/group-scroll-binding.directive';
 import { FilterMenuModule } from "./filtering/menu/filter-menu.module";
 import { ColumnMenuModule } from './column-menu/column-menu.module';
+import { GridToolbarFocusableDirective } from './rendering/toolbar/toolbar-focusable.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "./grouping/group-header-template.directive";
 import * as i2 from "./grouping/group-header-column-template.directive";
@@ -129,6 +130,7 @@ const exportedModules = [
     InCellEditingDirective,
     ExpandDetailsDirective,
     ExpandGroupDirective,
+    GridToolbarFocusableDirective,
     ...GroupModule.exports(),
     ...SharedModule.exports(),
     ...BodyModule.exports(),
@@ -155,7 +157,8 @@ const declarations = [
     ExpandGroupDirective,
     GroupBindingDirective,
     GridMarqueeDirective,
-    GridSpacerComponent
+    GridSpacerComponent,
+    GridToolbarFocusableDirective
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -206,7 +209,8 @@ GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         ExpandGroupDirective,
         GroupBindingDirective,
         GridMarqueeDirective,
-        GridSpacerComponent], imports: [CommonModule,
+        GridSpacerComponent,
+        GridToolbarFocusableDirective], imports: [CommonModule,
         GroupModule,
         SharedModule,
         BodyModule,
@@ -228,7 +232,8 @@ GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         ReactiveEditingDirective,
         InCellEditingDirective,
         ExpandDetailsDirective,
-        ExpandGroupDirective, i1.GroupHeaderTemplateDirective, i2.GroupHeaderColumnTemplateDirective, i3.GroupFooterTemplateDirective, i4.ColumnComponent, i5.SpanColumnComponent, i6.ColumnGroupComponent, i7.FooterTemplateDirective, i8.DetailTemplateDirective, i9.FocusableDirective, i10.GridTableDirective, i11.CommandColumnComponent, i12.CheckboxColumnComponent, i13.SelectionCheckboxDirective, i14.CellTemplateDirective, i15.NoRecordsTemplateDirective, i16.EditTemplateDirective, i17.EditCommandDirective, i18.CancelCommandDirective, i19.SaveCommandDirective, i20.RemoveCommandDirective, i21.AddCommandDirective, i22.CellLoadingTemplateDirective, i23.LoadingTemplateDirective, i24.HeaderTemplateDirective, i25.SelectAllCheckboxDirective, i26.PagerComponent, i27.PagerPrevButtonsComponent, i28.PagerNextButtonsComponent, i29.PagerNumericButtonsComponent, i30.PagerInputComponent, i31.PagerInfoComponent, i32.PagerPageSizesComponent, i33.PagerTemplateDirective, i34.PagerDropDownListDirective, i35.PagerInputDirective, i36.FilterRowComponent, i37.FilterCellComponent, i38.FilterCellTemplateDirective, i39.FilterCellOperatorsComponent, i40.StringFilterCellComponent, i41.NumericFilterCellComponent, i42.AutoCompleteFilterCellComponent, i43.BooleanFilterCellComponent, i44.DateFilterCellComponent, i39.FilterCellOperatorsComponent, i45.ContainsFilterOperatorComponent, i46.DoesNotContainFilterOperatorComponent, i47.EndsWithFilterOperatorComponent, i48.EqualFilterOperatorComponent, i49.IsEmptyFilterOperatorComponent, i50.IsNotEmptyFilterOperatorComponent, i51.IsNotNullFilterOperatorComponent, i52.IsNullFilterOperatorComponent, i53.NotEqualFilterOperatorComponent, i54.StartsWithFilterOperatorComponent, i55.GreaterFilterOperatorComponent, i56.GreaterOrEqualToFilterOperatorComponent, i57.LessFilterOperatorComponent, i58.LessOrEqualToFilterOperatorComponent, i59.AfterFilterOperatorComponent, i60.AfterEqFilterOperatorComponent, i61.BeforeEqFilterOperatorComponent, i62.BeforeFilterOperatorComponent, i63.StringFilterMenuComponent, i64.FilterMenuTemplateDirective, i65.NumericFilterMenuComponent, i66.DateFilterMenuComponent, i67.BooleanFilterMenuComponent, i68.FilterMenuDropDownListDirective, i69.BooleanFilterRadioButtonDirective, i39.FilterCellOperatorsComponent, i45.ContainsFilterOperatorComponent, i46.DoesNotContainFilterOperatorComponent, i47.EndsWithFilterOperatorComponent, i48.EqualFilterOperatorComponent, i49.IsEmptyFilterOperatorComponent, i50.IsNotEmptyFilterOperatorComponent, i51.IsNotNullFilterOperatorComponent, i52.IsNullFilterOperatorComponent, i53.NotEqualFilterOperatorComponent, i54.StartsWithFilterOperatorComponent, i55.GreaterFilterOperatorComponent, i56.GreaterOrEqualToFilterOperatorComponent, i57.LessFilterOperatorComponent, i58.LessOrEqualToFilterOperatorComponent, i59.AfterFilterOperatorComponent, i60.AfterEqFilterOperatorComponent, i61.BeforeEqFilterOperatorComponent, i62.BeforeFilterOperatorComponent, i70.ColumnChooserComponent, i71.ColumnMenuFilterComponent, i72.ColumnMenuItemComponent, i73.ColumnMenuItemContentTemplateDirective, i74.ColumnMenuSortComponent, i75.ColumnMenuLockComponent, i76.ColumnMenuStickComponent, i77.ColumnMenuPositionComponent, i78.ColumnMenuChooserComponent, i79.ColumnMenuTemplateDirective, i80.ColumnMenuContainerComponent, i81.ColumnMenuItemDirective, i82.ColumnMenuComponent, i83.ColumnMenuAutoSizeColumnComponent, i84.ColumnMenuAutoSizeAllColumnsComponent] });
+        ExpandGroupDirective,
+        GridToolbarFocusableDirective, i1.GroupHeaderTemplateDirective, i2.GroupHeaderColumnTemplateDirective, i3.GroupFooterTemplateDirective, i4.ColumnComponent, i5.SpanColumnComponent, i6.ColumnGroupComponent, i7.FooterTemplateDirective, i8.DetailTemplateDirective, i9.FocusableDirective, i10.GridTableDirective, i11.CommandColumnComponent, i12.CheckboxColumnComponent, i13.SelectionCheckboxDirective, i14.CellTemplateDirective, i15.NoRecordsTemplateDirective, i16.EditTemplateDirective, i17.EditCommandDirective, i18.CancelCommandDirective, i19.SaveCommandDirective, i20.RemoveCommandDirective, i21.AddCommandDirective, i22.CellLoadingTemplateDirective, i23.LoadingTemplateDirective, i24.HeaderTemplateDirective, i25.SelectAllCheckboxDirective, i26.PagerComponent, i27.PagerPrevButtonsComponent, i28.PagerNextButtonsComponent, i29.PagerNumericButtonsComponent, i30.PagerInputComponent, i31.PagerInfoComponent, i32.PagerPageSizesComponent, i33.PagerTemplateDirective, i34.PagerDropDownListDirective, i35.PagerInputDirective, i36.FilterRowComponent, i37.FilterCellComponent, i38.FilterCellTemplateDirective, i39.FilterCellOperatorsComponent, i40.StringFilterCellComponent, i41.NumericFilterCellComponent, i42.AutoCompleteFilterCellComponent, i43.BooleanFilterCellComponent, i44.DateFilterCellComponent, i39.FilterCellOperatorsComponent, i45.ContainsFilterOperatorComponent, i46.DoesNotContainFilterOperatorComponent, i47.EndsWithFilterOperatorComponent, i48.EqualFilterOperatorComponent, i49.IsEmptyFilterOperatorComponent, i50.IsNotEmptyFilterOperatorComponent, i51.IsNotNullFilterOperatorComponent, i52.IsNullFilterOperatorComponent, i53.NotEqualFilterOperatorComponent, i54.StartsWithFilterOperatorComponent, i55.GreaterFilterOperatorComponent, i56.GreaterOrEqualToFilterOperatorComponent, i57.LessFilterOperatorComponent, i58.LessOrEqualToFilterOperatorComponent, i59.AfterFilterOperatorComponent, i60.AfterEqFilterOperatorComponent, i61.BeforeEqFilterOperatorComponent, i62.BeforeFilterOperatorComponent, i63.StringFilterMenuComponent, i64.FilterMenuTemplateDirective, i65.NumericFilterMenuComponent, i66.DateFilterMenuComponent, i67.BooleanFilterMenuComponent, i68.FilterMenuDropDownListDirective, i69.BooleanFilterRadioButtonDirective, i39.FilterCellOperatorsComponent, i45.ContainsFilterOperatorComponent, i46.DoesNotContainFilterOperatorComponent, i47.EndsWithFilterOperatorComponent, i48.EqualFilterOperatorComponent, i49.IsEmptyFilterOperatorComponent, i50.IsNotEmptyFilterOperatorComponent, i51.IsNotNullFilterOperatorComponent, i52.IsNullFilterOperatorComponent, i53.NotEqualFilterOperatorComponent, i54.StartsWithFilterOperatorComponent, i55.GreaterFilterOperatorComponent, i56.GreaterOrEqualToFilterOperatorComponent, i57.LessFilterOperatorComponent, i58.LessOrEqualToFilterOperatorComponent, i59.AfterFilterOperatorComponent, i60.AfterEqFilterOperatorComponent, i61.BeforeEqFilterOperatorComponent, i62.BeforeFilterOperatorComponent, i70.ColumnChooserComponent, i71.ColumnMenuFilterComponent, i72.ColumnMenuItemComponent, i73.ColumnMenuItemContentTemplateDirective, i74.ColumnMenuSortComponent, i75.ColumnMenuLockComponent, i76.ColumnMenuStickComponent, i77.ColumnMenuPositionComponent, i78.ColumnMenuChooserComponent, i79.ColumnMenuTemplateDirective, i80.ColumnMenuContainerComponent, i81.ColumnMenuItemDirective, i82.ColumnMenuComponent, i83.ColumnMenuAutoSizeColumnComponent, i84.ColumnMenuAutoSizeAllColumnsComponent] });
 GridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridModule, imports: [[
             CommonModule,
             GroupModule,

package/esm2020/grouping/group-panel.component.mjs

@@ -78,6 +78,12 @@ export class GroupPanelComponent {
             this.targetSubscription.unsubscribe();
         }
     }
+    messageFor(token) {
+        return this.localization.get(token);
+    }
+    getTitle(group) {
+        return this.messageFor(group.dir === 'desc' ? 'sortedDescending' : 'sortedAscending');
+    }
     getDirectionIcon(group) {
         return group.dir === 'desc' ? 'sort-desc-sm' : 'sort-asc-sm';
     }
@@ -143,7 +149,7 @@ export class GroupPanelComponent {
     }
 }
 GroupPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupPanelComponent, deps: [{ token: i1.DragHintService }, { token: i2.DropCueService }, { token: i3.GroupInfoService }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: { text: "text", groups: "groups" }, outputs: { change: "change" }, host: { properties: { "class.k-grouping-header": "this.groupHeaderClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], ngImport: i0, template: `
+GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: { text: "text", navigable: "navigable", groups: "groups" }, outputs: { change: "change" }, host: { properties: { "class.k-grouping-header": "this.groupHeaderClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], ngImport: i0, template: `
         <div
             *ngIf="groups.length === 0"
             class="k-grouping-drop-container"
@@ -157,12 +163,14 @@ GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
 
         <kendo-chiplist
             *ngIf="groups.length !== 0"
-        >
+            [navigable]="navigable"
+            role="none">
             <kendo-chip
                 *ngFor="let group of groups; let index = index;"
                 kendoDropTarget
                 kendoDraggableColumn
                 kendoDraggable
+                [title]="getTitle(group)"
                 [enableDrag]="true"
                 [context]="{
                     field: group.field,
@@ -187,7 +195,7 @@ GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             }"
             kendoDropTarget
         >&nbsp;</div>
-    `, isInline: true, components: [{ type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i9.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i9.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -207,12 +215,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
         <kendo-chiplist
             *ngIf="groups.length !== 0"
-        >
+            [navigable]="navigable"
+            role="none">
             <kendo-chip
                 *ngFor="let group of groups; let index = index;"
                 kendoDropTarget
                 kendoDraggableColumn
                 kendoDraggable
+                [title]="getTitle(group)"
                 [enableDrag]="true"
                 [context]="{
                     field: group.field,
@@ -246,6 +256,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ["class.k-grouping-header"]
             }], text: [{
                 type: Input
+            }], navigable: [{
+                type: Input
             }], groups: [{
                 type: Input
             }], dropTargets: [{

package/esm2020/index.mjs

@@ -14,6 +14,8 @@ export { ColumnGroupComponent } from './columns/column-group.component';
 export { CheckboxColumnComponent } from './columns/checkbox-column.component';
 export { ToolbarComponent } from './rendering/toolbar/toolbar.component';
 export { ToolbarTemplateDirective } from './rendering/toolbar/toolbar-template.directive';
+export { GridToolbarFocusableDirective } from './rendering/toolbar/toolbar-focusable.directive';
+export { GridToolbarNavigationService } from './rendering/toolbar/toolbar-navigation.service';
 export { CellTemplateDirective } from './rendering/cell-template.directive';
 export { CellLoadingTemplateDirective } from './rendering/cell-loading.template.directive';
 export { LoadingTemplateDirective } from './rendering/loading-template.directive';

package/esm2020/localization/messages.mjs

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class GridMessages extends ComponentMessages {
 }
 GridMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", selectPage: "selectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", 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", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand" }, usesInheritance: true, ngImport: i0 });
+GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", selectPage: "selectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", 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", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", groupPanelLabel: "groupPanelLabel" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMessages, decorators: [{
             type: Directive,
             args: [{
@@ -162,4 +162,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], groupExpand: [{
                 type: Input
+            }], topToolbarLabel: [{
+                type: Input
+            }], bottomToolbarLabel: [{
+                type: Input
+            }], groupPanelLabel: [{
+                type: Input
             }] } });

package/esm2020/navigation/navigation.service.mjs

@@ -105,6 +105,7 @@ export class NavigationService {
         this.cursor = new NavigationCursor(this.model);
         this.pagerIsNavigable = false;
         this.tableIsNavigable = false;
+        this.toolbarIsNavigable = false;
         this.changes = this.cursor.changes;
     }
     set metadata(value) {
@@ -123,6 +124,9 @@ export class NavigationService {
     get tableEnabled() {
         return this.alive && this.tableIsNavigable;
     }
+    get toolbarEnabled() {
+        return this.alive && this.toolbarIsNavigable;
+    }
     get activeCell() {
         if (this.mode !== 0 /* Standby */) {
             return this.cursor.cell;
@@ -318,6 +322,7 @@ export class NavigationService {
     setActiveSections(navigableOptions) {
         this.pagerIsNavigable = navigableOptions.includes('pager');
         this.tableIsNavigable = navigableOptions.includes('table');
+        this.toolbarIsNavigable = navigableOptions.includes('toolbar');
     }
     focusAdjacentCell(fwd, wrap) {
         this.focusCell();

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1678093026,
-    version: '11.4.0-develop.1',
+    publishDate: 1678804365,
+    version: '11.4.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/rendering/cell.component.mjs

@@ -213,7 +213,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i4.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i8.SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i9.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: { "valueOf": i10.FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i4.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i8.SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i9.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: { "valueOf": i10.FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{