@progress/kendo-angular-grid 11.4.0-develop.5 → 11.4.0-develop.6

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/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/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/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: 1678461656,
-    version: '11.4.0-develop.5',
+    publishDate: 1678518322,
+    version: '11.4.0-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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']
             }] } });