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

package/esm2020/rendering/footer/footer.component.mjs

@@ -24,6 +24,7 @@ export class FooterComponent {
         this.lockedColumnsCount = 0;
         this.logicalRowIndex = 0;
         this.hostClass = true;
+        this.hostRole = 'rowgroup';
     }
     get footerClass() {
         return !this.scrollable;
@@ -44,7 +45,7 @@ export class FooterComponent {
     }
 }
 FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterComponent, deps: [{ token: i1.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FooterComponent, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass" } }, ngImport: i0, template: `
+FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FooterComponent, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
     <ng-container>
         <tr
             [class.k-footer-template]="true"
@@ -70,7 +71,7 @@ FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 class="k-table-td"
                     [logicalRowIndex]="logicalRowIndex"
                     [logicalColIndex]="logicalColumnIndex(column)"
-                    role="columnfooter"
+                    role="gridcell"
                     aria-selected="false"
                 [class.k-grid-footer-sticky]="column.sticky"
                 [ngClass]="column.footerClass"
@@ -117,7 +118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 class="k-table-td"
                     [logicalRowIndex]="logicalRowIndex"
                     [logicalColIndex]="logicalColumnIndex(column)"
-                    role="columnfooter"
+                    role="gridcell"
                     aria-selected="false"
                 [class.k-grid-footer-sticky]="column.sticky"
                 [ngClass]="column.footerClass"
@@ -153,4 +154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-table-tfoot']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
             }] } });

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

@@ -29,6 +29,8 @@ import { closestInScope, isFocusable } from '../common/dom-queries';
 import { FilterMenuComponent } from '../../filtering/menu/filter-menu.component';
 import { ColumnMenuComponent } from '../../column-menu/column-menu.component';
 import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
+import { ContextService } from '../../common/provider.service';
+import { ColumnReorderEvent } from '../../dragdrop/column-reorder-event';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/single-popup.service";
 import * as i2 from "../../dragdrop/drag-hint.service";
@@ -38,20 +40,21 @@ import * as i5 from "../../common/id.service";
 import * as i6 from "../../common/sort.service";
 import * as i7 from "@progress/kendo-angular-l10n";
 import * as i8 from "./../../common/column-info.service";
-import * as i9 from "../../filtering/menu/filter-menu.component";
-import * as i10 from "../../column-menu/column-menu.component";
-import * as i11 from "@progress/kendo-angular-icons";
-import * as i12 from "../../filtering/filter-row.component";
-import * as i13 from "@angular/common";
-import * as i14 from "../../navigation/logical-row.directive";
-import * as i15 from "../../navigation/logical-cell.directive";
-import * as i16 from "../../dragdrop/drop-target.directive";
-import * as i17 from "@progress/kendo-angular-common";
-import * as i18 from "../../dragdrop/draggable-column.directive";
-import * as i19 from "../common/template-context.directive";
-import * as i20 from "../../selection/selectall-checkbox.directive";
-import * as i21 from "../../navigation/focusable.directive";
-import * as i22 from "../../column-resizing/column-handle.directive";
+import * as i9 from "../../common/provider.service";
+import * as i10 from "../../filtering/menu/filter-menu.component";
+import * as i11 from "../../column-menu/column-menu.component";
+import * as i12 from "@progress/kendo-angular-icons";
+import * as i13 from "../../filtering/filter-row.component";
+import * as i14 from "@angular/common";
+import * as i15 from "../../navigation/logical-row.directive";
+import * as i16 from "../../navigation/logical-cell.directive";
+import * as i17 from "../../dragdrop/drop-target.directive";
+import * as i18 from "@progress/kendo-angular-common";
+import * as i19 from "../../dragdrop/draggable-column.directive";
+import * as i20 from "../common/template-context.directive";
+import * as i21 from "../../selection/selectall-checkbox.directive";
+import * as i22 from "../../navigation/focusable.directive";
+import * as i23 from "../../column-resizing/column-handle.directive";
 const mergeObjects = (...args) => Object.assign.apply(null, [{}].concat(args));
 const directions = initialDirection => initialDirection === "asc" ? ["asc", "desc"] : ["desc", "asc"];
 /**
@@ -77,7 +80,7 @@ const modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
  * @hidden
  */
 export class HeaderComponent {
-    constructor(popupService, hint, cue, reorderService, idService, sortService, localization, columnInfoService, cd) {
+    constructor(popupService, hint, cue, reorderService, idService, sortService, localization, columnInfoService, cd, contextService) {
         this.popupService = popupService;
         this.hint = hint;
         this.cue = cue;
@@ -87,6 +90,7 @@ export class HeaderComponent {
         this.localization = localization;
         this.columnInfoService = columnInfoService;
         this.cd = cd;
+        this.contextService = contextService;
         this.columns = [];
         this.groups = [];
         this.sort = new Array();
@@ -143,12 +147,50 @@ export class HeaderComponent {
             args.stopImmediatePropagation();
             const filterMenu = this.filterMenus.find(fm => fm.column === column);
             filterMenu.toggle(filterMenu.anchor.nativeElement, filterMenu.template);
+            return;
         }
         if (args.keyCode === Keys.ArrowDown && args.altKey && this.showColumnMenu(column)) {
             args.preventDefault();
             args.stopImmediatePropagation();
             const columnMenu = this.columnMenus.find(cm => cm.column === column);
             columnMenu.toggle(null, columnMenu.anchor.nativeElement, columnMenu.template);
+            return;
+        }
+        const isCtrlOrMeta = args.ctrlKey || args.metaKey;
+        const isGroupingKeyShortcut = (args.keyCode === Keys.Enter || args.keyCode === Keys.Space) && isCtrlOrMeta;
+        if (isGroupingKeyShortcut && this.isGroupable(column)) {
+            args.preventDefault();
+            args.stopImmediatePropagation();
+            const isGroupedByField = this.groups.some(gr => gr.field === column.field);
+            if (isGroupedByField) {
+                this.groups = this.groups.filter(gr => gr.field !== column.field);
+            }
+            else {
+                this.groups.push({
+                    field: column.field
+                });
+            }
+            this.contextService.grid.groupChange.emit(this.groups);
+            return;
+        }
+        const isLeftOrRightArrow = args.keyCode === Keys.ArrowLeft || args.keyCode === Keys.ArrowRight;
+        const isReorderingKeyShortcut = isLeftOrRightArrow && isCtrlOrMeta;
+        if (isReorderingKeyShortcut && this.isReorderable(column)) {
+            args.preventDefault();
+            const columnsCount = this.columnInfoService.leafNamedColumns.length;
+            const reorderDirection = args.keyCode === Keys.ArrowLeft ? -1 : 1;
+            const rtlMultiplier = this.localization.rtl ? -1 : 1;
+            const reorderDirectionOffset = reorderDirection * rtlMultiplier;
+            const newIndex = column.leafIndex + reorderDirectionOffset;
+            const normalizedNewIndex = Math.min(Math.max(0, newIndex), columnsCount - 1);
+            const gridInstance = this.contextService.grid;
+            gridInstance.reorderColumn(column, normalizedNewIndex, { before: reorderDirectionOffset < 0 });
+            gridInstance.columnReorder.emit(new ColumnReorderEvent({
+                column,
+                newIndex: normalizedNewIndex,
+                oldIndex: column.leafIndex
+            }));
+            return;
         }
         if (!this.sortable || args.defaultPrevented || column.sortable === false) {
             return;
@@ -288,11 +330,11 @@ export class HeaderComponent {
         return this.reorderable && rules({ draggable, target });
     }
     shouldActivate(column) {
-        const canReorder = this.reorderable && column.reorderable;
+        const canReorder = this.isReorderable(column);
         if (!canReorder && !isColumnComponent(column)) {
             return false;
         }
-        const groupable = this.groupable && isColumnComponent(column) && column.groupable !== false;
+        const groupable = this.isGroupable(column);
         return groupable || canReorder;
     }
     isSortable(column) {
@@ -337,6 +379,12 @@ export class HeaderComponent {
     get leafColumns() {
         return this._leafColumns;
     }
+    isReorderable(column) {
+        return this.reorderable && column.reorderable;
+    }
+    isGroupable(column) {
+        return this.groupable && isColumnComponent(column) && column.groupable !== false;
+    }
     attachTargets() {
         if (this.targetSubscription) {
             this.targetSubscription.unsubscribe();
@@ -418,7 +466,7 @@ export class HeaderComponent {
         });
     }
 }
-HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.DragHintService }, { token: i3.DropCueService }, { token: i4.ColumnReorderService }, { token: i5.IdService }, { token: i6.SortService }, { token: i7.LocalizationService }, { token: i8.ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.DragHintService }, { token: i3.DropCueService }, { token: i4.ColumnReorderService }, { token: i5.IdService }, { token: i6.SortService }, { token: i7.LocalizationService }, { token: i8.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i9.ContextService }], target: i0.ɵɵFactoryTarget.Component });
 HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-container>
         <tr *ngFor="let i of columnLevels; let levelIndex = index"
@@ -472,7 +520,8 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                     [ngClass]="column.headerClass"
                     [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
-                    [attr.colspan]="column.colspan">
+                    [attr.colspan]="column.colspan"
+                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined">
 
                     <ng-container *ngIf="!isSortable(getColumnComponent(column))">
                         <span class="k-cell-inner">
@@ -643,7 +692,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
         ></tr>
     </ng-container>
-    `, isInline: true, components: [{ type: i9.FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: i10.ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i11.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i12.FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i16.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i17.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i18.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i19.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i20.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: i21.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i22.ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: i10.FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: i11.ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i12.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i13.FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i14.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i15.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i17.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i18.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i19.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i20.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i21.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: i22.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i23.ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -701,7 +750,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [ngClass]="column.headerClass"
                     [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
-                    [attr.colspan]="column.colspan">
+                    [attr.colspan]="column.colspan"
+                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined">
 
                     <ng-container *ngIf="!isSortable(getColumnComponent(column))">
                         <span class="k-cell-inner">
@@ -874,7 +924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
     </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.DragHintService }, { type: i3.DropCueService }, { type: i4.ColumnReorderService }, { type: i5.IdService }, { type: i6.SortService }, { type: i7.LocalizationService }, { type: i8.ColumnInfoService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { totalColumnLevels: [{
+        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.DragHintService }, { type: i3.DropCueService }, { type: i4.ColumnReorderService }, { type: i5.IdService }, { type: i6.SortService }, { type: i7.LocalizationService }, { type: i8.ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i9.ContextService }]; }, propDecorators: { totalColumnLevels: [{
                 type: Input
             }], columns: [{
                 type: Input

package/esm2020/rendering/list.component.mjs

@@ -121,6 +121,8 @@ export class ListComponent {
         this.changeDetector = changeDetector;
         this.pdfService = pdfService;
         this.columnInfo = columnInfo;
+        this.hostClass = true;
+        this.hostRole = 'presentation';
         this.groups = [];
         this.skip = 0;
         this.columns = new ColumnsContainer(() => []);
@@ -142,12 +144,6 @@ export class ListComponent {
         this.subscriptions = detailsService.changes.subscribe(x => this.detailExpand(x));
         this.subscriptions.add(scrollRequestService.requests.subscribe(x => this.scrollTo(x)));
     }
-    get hostClass() {
-        return true;
-    }
-    get hostRole() {
-        return 'presentation';
-    }
     get showFooter() {
         return this.groupable && this.groupable.showFooter;
     }
@@ -211,7 +207,7 @@ export class ListComponent {
             this.skipScroll = true;
             this.container.nativeElement.scrollTop = this.rowHeightService.offset(this.skip);
         }
-        if (anyChanged(["total", "take"], changes)) {
+        if (anyChanged(['total', 'take'], changes)) {
             this.init();
         }
         this.rebind = false;
@@ -319,7 +315,7 @@ export class ListComponent {
                 });
             })).subscribe(this.dispatcher));
         });
-        this.scrollSyncService.registerEmitter(this.container.nativeElement, "body");
+        this.scrollSyncService.registerEmitter(this.container.nativeElement, 'body');
     }
     createScroller() {
         this.cleanupScroller();
@@ -672,7 +668,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     [sort]="sort">
                 </colgroup>
                 <tbody kendoGridTableBody
-                    role="presentation"
+                    role="rowgroup"
                     [skipGroupDecoration]="isLocked"
                     [data]="data"
                     [groups]="groups"
@@ -791,7 +787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [sort]="sort">
                 </colgroup>
                 <tbody kendoGridTableBody
-                    role="presentation"
+                    role="rowgroup"
                     [skipGroupDecoration]="isLocked"
                     [data]="data"
                     [groups]="groups"
@@ -831,10 +827,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     args: [SCROLLER_FACTORY_TOKEN]
                 }] }, { type: i1.DetailsService }, { type: i2.ChangeNotificationService }, { type: i3.SuspendService }, { type: i4.GroupsService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i5.ScrollSyncService }, { type: i6.ResizeService }, { type: i7.EditService }, { type: i8.BrowserSupportService }, { type: i9.NavigationService }, { type: i10.ScrollRequestService }, { type: i11.LocalizationService }, { type: i12.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i13.PDFService }, { type: i14.ColumnInfoService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
-                args: ["class.k-grid-container"]
+                args: ['class.k-grid-container']
             }], hostRole: [{
                 type: HostBinding,
-                args: ["attr.role"]
+                args: ['attr.role']
             }], data: [{
                 type: Input
             }], groups: [{

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

@@ -429,7 +429,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             </td>
         </tr>
     </ng-container>
-    <tr *ngIf="data?.length === 0 || data === null" class="k-grid-norecords">
+    <tr *ngIf="data?.length === 0 || data === null" class="k-grid-norecords" role="row">
         <td [attr.colspan]="colSpan" class="k-table-td">
             <ng-template
                 *ngIf="noRecordsTemplate?.templateRef"
@@ -475,6 +475,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
+            [attr.aria-selected]="isSelectable() && isRowSelected(item)"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable() && isRowSelected(item)">
             <ng-container *ngIf="!skipGroupDecoration">
@@ -654,7 +655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </td>
         </tr>
     </ng-container>
-    <tr *ngIf="data?.length === 0 || data === null" class="k-grid-norecords">
+    <tr *ngIf="data?.length === 0 || data === null" class="k-grid-norecords" role="row">
         <td [attr.colspan]="colSpan" class="k-table-td">
             <ng-template
                 *ngIf="noRecordsTemplate?.templateRef"
@@ -700,6 +701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
+            [attr.aria-selected]="isSelectable() && isRowSelected(item)"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable() && isRowSelected(item)">
             <ng-container *ngIf="!skipGroupDecoration">

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 Grid
+ * keyboard navigation.
+ */
+export class GridToolbarFocusableDirective {
+    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();
+    }
+}
+GridToolbarFocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarFocusableDirective, deps: [{ token: i0.ElementRef }, { token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Directive });
+GridToolbarFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridToolbarFocusableDirective, selector: "\n        [kendoGridToolbarFocusable],\n        [kendoGridAddCommand],\n        [kendoGridCancelCommand],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridExcelCommand],\n        [kendoGridPDFCommand]\n    ", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarFocusableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+        [kendoGridToolbarFocusable],
+        [kendoGridAddCommand],
+        [kendoGridCancelCommand],
+        [kendoGridEditCommand],
+        [kendoGridRemoveCommand],
+        [kendoGridSaveCommand],
+        [kendoGridExcelCommand],
+        [kendoGridPDFCommand]
+    `
+                }]
+        }], 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 GridToolbarNavigationService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.navigableElements = [];
+        this.currentActiveIndex = 0;
+        this.defaultFocusableSelector = `
+        [kendogridtoolbarfocusable],
+        [kendogridaddcommand],
+        [kendogridcancelcommand],
+        [kendogrideditcommand],
+        [kendogridremovecommand],
+        [kendogridsavecommand],
+        [kendogridexcelcommand],
+        [kendogridpdfcommand]
+    `;
+    }
+    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();
+        }
+    }
+}
+GridToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+GridToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });

package/esm2020/rendering/toolbar/toolbar-position.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

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

@@ -66,7 +66,7 @@ import * as i0 from "@angular/core";
 export class ToolbarTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
-        this._position = "top";
+        this._position = 'top';
     }
     /**
      * The position of the toolbar ([see example]({% slug toolbartemplate_grid %})).

package/esm2020/rendering/toolbar/toolbar.component.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 { Component, Input, ElementRef, HostBinding } from '@angular/core';
+import { Component, Input, ElementRef, HostBinding, HostListener } from '@angular/core';
+import { closest, isDocumentAvailable, isFocusable } from '@progress/kendo-angular-common';
 import { ContextService } from './../../common/provider.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./../../common/provider.service";
@@ -15,7 +16,9 @@ export class ToolbarComponent {
         this.ctx = ctx;
         this.wrapper = wrapper;
         this.context = {};
+        this.role = 'toolbar';
         this._size = 'medium';
+        this.navigationService = this.ctx[`${this.wrapper.nativeElement.getAttribute('position')}ToolbarNavigation`];
     }
     get sizeSmallClass() {
         return this.size === 'small';
@@ -36,18 +39,62 @@ export class ToolbarComponent {
     get size() {
         return this._size;
     }
+    clickHandler(ev) {
+        if (this.navigable && isDocumentAvailable()) {
+            const closestFocusable = closest(ev.target, isFocusable);
+            const targetIndex = this.navigationService.navigableElements.indexOf(closestFocusable);
+            if (targetIndex > -1) {
+                this.navigationService.currentActiveIndex = targetIndex;
+            }
+            this.navigationService.updateFocus();
+            if (ev.target === this.wrapper.nativeElement) {
+                this.navigationService.focus();
+            }
+        }
+    }
+    ;
+    arrowLeftListener() {
+        if (this.navigable && isDocumentAvailable() && this.navigationService.navigableElements.length) {
+            this.navigationService.currentActiveIndex--;
+            if (this.navigationService.currentActiveIndex < 0) {
+                this.navigationService.currentActiveIndex = this.navigationService.navigableElements.length - 1;
+            }
+            this.navigationService.updateFocus();
+        }
+    }
+    arrowRightListener() {
+        if (this.navigable && isDocumentAvailable() && this.navigationService.navigableElements.length) {
+            this.navigationService.currentActiveIndex++;
+            if (this.navigationService.currentActiveIndex >= this.navigationService.navigableElements.length) {
+                this.navigationService.currentActiveIndex = 0;
+            }
+            this.navigationService.updateFocus();
+        }
+    }
+    homeKeyListener(e) {
+        if (this.navigable && isDocumentAvailable() && this.navigationService.navigableElements.length) {
+            e.preventDefault();
+            this.navigationService.currentActiveIndex = 0;
+            this.navigationService.updateFocus();
+        }
+    }
+    endKeyListener(e) {
+        if (this.navigable && isDocumentAvailable() && this.navigationService.navigableElements.length) {
+            e.preventDefault();
+            this.navigationService.currentActiveIndex = this.navigationService.navigableElements.length - 1;
+            this.navigationService.updateFocus();
+        }
+    }
     get toolbarTemplateRef() {
         return this.ctx.grid.toolbarTemplate ? this.ctx.grid.toolbarTemplate.templateRef : undefined;
     }
 }
 ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: { position: "position", size: "size" }, host: { properties: { "class.k-toolbar-sm": "this.sizeSmallClass", "class.k-toolbar-md": "this.sizeMediumClass" } }, ngImport: i0, template: `
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: { position: "position", size: "size", navigable: "navigable" }, host: { listeners: { "click": "clickHandler($event)", "keydown.arrowleft": "arrowLeftListener($event)", "keydown.arrowright": "arrowRightListener($event)", "keydown.home": "homeKeyListener($event)", "keydown.end": "endKeyListener($event)" }, properties: { "attr.role": "this.role", "class.k-toolbar-sm": "this.sizeSmallClass", "class.k-toolbar-md": "this.sizeMediumClass" } }, ngImport: i0, template: `
         <ng-template
             *ngIf="toolbarTemplateRef"
             [ngTemplateOutlet]="toolbarTemplateRef"
-            [ngTemplateOutletContext]="context"
-            >
-        </ng-template>
+            [ngTemplateOutletContext]="context"></ng-template>
     `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
@@ -57,12 +104,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-template
             *ngIf="toolbarTemplateRef"
             [ngTemplateOutlet]="toolbarTemplateRef"
-            [ngTemplateOutletContext]="context"
-            >
-        </ng-template>
+            [ngTemplateOutletContext]="context"></ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i0.ElementRef }]; }, propDecorators: { sizeSmallClass: [{
+        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i0.ElementRef }]; }, propDecorators: { role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], sizeSmallClass: [{
                 type: HostBinding,
                 args: ['class.k-toolbar-sm']
             }], sizeMediumClass: [{
@@ -72,4 +120,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], clickHandler: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], arrowLeftListener: [{
+                type: HostListener,
+                args: ['keydown.arrowleft', ['$event']]
+            }], arrowRightListener: [{
+                type: HostListener,
+                args: ['keydown.arrowright', ['$event']]
+            }], homeKeyListener: [{
+                type: HostListener,
+                args: ['keydown.home', ['$event']]
+            }], endKeyListener: [{
+                type: HostListener,
+                args: ['keydown.end', ['$event']]
+            }], navigable: [{
+                type: Input
             }] } });