@progress/kendo-angular-grid 13.4.0-develop.9 → 13.4.1-develop.1

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

@@ -4,39 +4,44 @@
 *-------------------------------------------------------------------------------------------*/
 import { MenuTabbingService } from './../filtering/menu/menu-tabbing.service';
 import { NavigationService } from './../navigation/navigation.service';
-import { Component, Renderer2, Input, TemplateRef, HostBinding, ElementRef, ViewChild, isDevMode, ChangeDetectorRef } from '@angular/core';
+import { Component, Renderer2, Input, TemplateRef, HostBinding, ElementRef, ViewChild, isDevMode, ChangeDetectorRef, Optional } from '@angular/core';
 import { SinglePopupService } from '../common/single-popup.service';
 import { ColumnMenuService } from './column-menu.service';
 import { filtersByField } from '../filtering/base-filter-cell.component';
 import { hasFilter, hasSort, hasLock, hasStick, hasColumnChooser, hasAutoSizeColumn, hasPosition, hasAutoSizeAllColumns } from './utils';
 import { replaceMessagePlaceholder } from '../utils';
 import { ContextService } from '../common/provider.service';
-import { ColunnMenuErrorMessages } from '../common/error-messages';
+import { ColumnMenuErrorMessages } from '../common/error-messages';
 import { moreVerticalIcon, columnsIcon, filterIcon, slidersIcon } from '@progress/kendo-svg-icons';
 import { TabStripComponent } from '@progress/kendo-angular-layout';
 import { ColumnInfoService } from '../common/column-info.service';
+import { IdService } from '../common/id.service';
+import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "./../navigation/navigation.service";
 import * as i2 from "../common/single-popup.service";
 import * as i3 from "./column-menu.service";
 import * as i4 from "../common/provider.service";
 import * as i5 from "../common/column-info.service";
-import * as i6 from "@progress/kendo-angular-icons";
-import * as i7 from "./column-menu-container.component";
-import * as i8 from "./column-menu-sort.component";
-import * as i9 from "./column-menu-lock.component";
-import * as i10 from "./column-menu-stick.component";
-import * as i11 from "./column-menu-position.component";
-import * as i12 from "./column-menu-chooser.component";
-import * as i13 from "./column-menu-autosize.component";
-import * as i14 from "./column-menu-autosize-all.component";
-import * as i15 from "./column-menu-filter.component";
-import * as i16 from "@progress/kendo-angular-layout";
-import * as i17 from "../filtering/menu/filter-menu-container.component";
-import * as i18 from "./column-list.component";
-import * as i19 from "@angular/common";
-import * as i20 from "./column-menu-item.directive";
+import * as i6 from "../common/id.service";
+import * as i7 from "@progress/kendo-angular-icons";
+import * as i8 from "./column-menu-container.component";
+import * as i9 from "./column-menu-sort.component";
+import * as i10 from "./column-menu-lock.component";
+import * as i11 from "./column-menu-stick.component";
+import * as i12 from "./column-menu-position.component";
+import * as i13 from "./column-menu-chooser.component";
+import * as i14 from "./column-menu-autosize.component";
+import * as i15 from "./column-menu-autosize-all.component";
+import * as i16 from "./column-menu-filter.component";
+import * as i17 from "@progress/kendo-angular-layout";
+import * as i18 from "../filtering/menu/filter-menu-container.component";
+import * as i19 from "./column-list.component";
+import * as i20 from "@angular/common";
+import * as i21 from "./column-menu-item.directive";
 const POPUP_CLASS = 'k-grid-columnmenu-popup';
+let id = 0;
+const getId = (gridId) => `${gridId}-column-menu-${id++}`;
 /**
  * Represents the [column menu](slug:columnmenu_grid#toc-customizing-the-position) component.
  *
@@ -49,7 +54,7 @@ const POPUP_CLASS = 'k-grid-columnmenu-popup';
  * </kendo-grid>
  */
 export class ColumnMenuComponent {
-    constructor(navigationService, popupService, service, ctx, renderer, cdr, columnInfoService) {
+    constructor(navigationService, popupService, service, ctx, renderer, cdr, columnInfoService, idService) {
         this.navigationService = navigationService;
         this.popupService = popupService;
         this.service = service;
@@ -57,6 +62,7 @@ export class ColumnMenuComponent {
         this.renderer = renderer;
         this.cdr = cdr;
         this.columnInfoService = columnInfoService;
+        this.idService = idService;
         /**
          * @hidden
          */
@@ -102,7 +108,7 @@ export class ColumnMenuComponent {
          */
         this.expandedPosition = false;
         this.moreVerticalIcon = moreVerticalIcon;
-        this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
+        this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this, true));
     }
     /**
      * @hidden
@@ -128,6 +134,12 @@ export class ColumnMenuComponent {
     get hasFilter() {
         return hasFilter(this.settings, this.column);
     }
+    /**
+     * @hidden
+     */
+    get isNavigable() {
+        return this.navigationService.tableEnabled;
+    }
     /**
      * @hidden
      */
@@ -144,7 +156,7 @@ export class ColumnMenuComponent {
      * @hidden
      */
     onApply(changed) {
-        this.close();
+        this.close(true);
         if (changed.length) {
             this.cdr.markForCheck();
             this.columnInfoService.changeVisibility(changed);
@@ -190,11 +202,11 @@ export class ColumnMenuComponent {
         if (this.ctx.grid.virtualColumns && isDevMode()) {
             if (this.settings.autoSizeAllColumns) {
                 this.settings.autoSizeAllColumns = false;
-                console.warn(ColunnMenuErrorMessages.autoSizeAllColumns);
+                console.warn(ColumnMenuErrorMessages.autoSizeAllColumns);
             }
             if (this.settings.autoSizeColumn) {
                 this.settings.autoSizeColumn = false;
-                console.warn(ColunnMenuErrorMessages.autoSizeColumn);
+                console.warn(ColumnMenuErrorMessages.autoSizeColumn);
             }
         }
         this.service.menuTabbingService.isTabbedInterface = this.settings.view === 'tabbed' ? true : false;
@@ -221,12 +233,32 @@ export class ColumnMenuComponent {
         this.expandedColumns = this.getExpandedState(this.settings.columnChooser);
         this.expandedPosition = this.getExpandedState(this.settings.setColumnPosition);
         this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
-        if (this.popupRef && this.settings.view === 'tabbed') {
-            this.renderer.addClass(this.popupRef.popupElement.querySelector('.k-grid-columnmenu-popup'), 'k-column-menu-tabbed');
-            this.cdr.detectChanges();
-            this.tabStrip?.selectTab(0);
+        // Needed as changes to 'popupRef' and 'popupId' are not reflected
+        // automatically when the Popup is closed by clicking outside the anchor
+        const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
+        if (this.popupRef) {
+            this.popupRef.popup.instance.close.pipe(take(1)).subscribe(() => {
+                this.popupRef = null;
+                const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
+                ariaRoot && this.renderer.removeAttribute(ariaRoot, 'aria-controls');
+                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
+            });
+            const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-columnmenu-popup');
+            if (popupAriaElement) {
+                const popupId = getId(this.idService?.gridId());
+                this.renderer.setAttribute(popupAriaElement, 'id', popupId);
+                this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
+                this.renderer.setAttribute(popupAriaElement, 'aria-label', this.columnMenuTitle);
+                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-controls', popupId);
+                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'true');
+            }
+            if (this.settings.view === 'tabbed') {
+                this.renderer.addClass(this.popupRef.popupElement.querySelector('.k-grid-columnmenu-popup'), 'k-column-menu-tabbed');
+                this.cdr.detectChanges();
+                this.tabStrip?.selectTab(0);
+            }
         }
-        if (!this.popupRef) {
+        else {
             if (this.navigationService.tableEnabled) {
                 this.navigationService.focusCell(0, this.column.leafIndex);
             }
@@ -238,9 +270,13 @@ export class ColumnMenuComponent {
     /**
      * @hidden
      */
-    close() {
+    close(triggerFocus = false) {
         this.popupService.destroy();
         this.popupRef = null;
+        this.cdr.markForCheck();
+        if (!triggerFocus) {
+            return;
+        }
         if (this.navigationService.tableEnabled) {
             this.navigationService.focusCell(0, this.column.leafIndex);
         }
@@ -260,7 +296,7 @@ export class ColumnMenuComponent {
         return typeof (menuItemSettings) === 'object' ? menuItemSettings.expanded : false;
     }
 }
-ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.NavigationService }, { token: i2.SinglePopupService }, { token: i3.ColumnMenuService }, { token: i4.ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.NavigationService }, { token: i2.SinglePopupService }, { token: i3.ColumnMenuService }, { token: i4.ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ColumnInfoService }, { token: i6.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate", tabIndex: "tabIndex" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [
         ColumnMenuService,
         MenuTabbingService
@@ -272,7 +308,9 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             (keydown.enter)="$event.stopImmediatePropagation()"
             href="#"
             [tabindex]="tabIndex"
-            [attr.title]="columnMenuTitle">
+            [attr.title]="columnMenuTitle"
+            [attr.aria-expanded]="isNavigable ? undefined: false"
+            [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'">
             <kendo-icon-wrapper
                 name="more-vertical"
                 [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
@@ -285,7 +323,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </ng-template>
         <ng-template #defaultTemplate>
             <kendo-grid-columnmenu-container
-                (keydown.escape)="close()"
+                (keydown.escape)="close(true)"
                 (keydown.enter)="$event.stopImmediatePropagation()">
                 <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
                 </kendo-grid-columnmenu-sort>
@@ -337,7 +375,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </kendo-grid-columnmenu-container>
         </ng-template>
         <ng-template #tabbedInterfaceTemplate>
-            <kendo-tabstrip #tabstrip (keydown.escape)="close()">
+            <kendo-tabstrip #tabstrip (keydown.escape)="close(true)">
                 <kendo-tabstrip-tab *ngIf="hasFilter">
                     <ng-template kendoTabTitle>
                         <kendo-icon-wrapper
@@ -424,7 +462,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-tabstrip-tab>
             </kendo-tabstrip>
         </ng-template>
-    `, isInline: true, components: [{ type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i7.ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: i8.ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: i9.ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: i10.ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: i11.ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: i12.ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i13.ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: i14.ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: i15.ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i16.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i16.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { type: i17.FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { type: i18.ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i19.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i19.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i19.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i20.ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { type: i16.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i16.TabContentDirective, selector: "[kendoTabContent]" }] });
+    `, isInline: true, components: [{ type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: i9.ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: i10.ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: i11.ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: i12.ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: i13.ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i14.ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: i15.ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: i16.ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i17.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i17.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { type: i18.FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { type: i19.ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i20.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i20.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i20.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i21.ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { type: i17.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i17.TabContentDirective, selector: "[kendoTabContent]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -441,7 +479,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (keydown.enter)="$event.stopImmediatePropagation()"
             href="#"
             [tabindex]="tabIndex"
-            [attr.title]="columnMenuTitle">
+            [attr.title]="columnMenuTitle"
+            [attr.aria-expanded]="isNavigable ? undefined: false"
+            [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'">
             <kendo-icon-wrapper
                 name="more-vertical"
                 [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
@@ -454,7 +494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
         <ng-template #defaultTemplate>
             <kendo-grid-columnmenu-container
-                (keydown.escape)="close()"
+                (keydown.escape)="close(true)"
                 (keydown.enter)="$event.stopImmediatePropagation()">
                 <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
                 </kendo-grid-columnmenu-sort>
@@ -506,7 +546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </kendo-grid-columnmenu-container>
         </ng-template>
         <ng-template #tabbedInterfaceTemplate>
-            <kendo-tabstrip #tabstrip (keydown.escape)="close()">
+            <kendo-tabstrip #tabstrip (keydown.escape)="close(true)">
                 <kendo-tabstrip-tab *ngIf="hasFilter">
                     <ng-template kendoTabTitle>
                         <kendo-icon-wrapper
@@ -595,7 +635,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.NavigationService }, { type: i2.SinglePopupService }, { type: i3.ColumnMenuService }, { type: i4.ContextService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.ColumnInfoService }]; }, propDecorators: { standalone: [{
+        }], ctorParameters: function () { return [{ type: i1.NavigationService }, { type: i2.SinglePopupService }, { type: i3.ColumnMenuService }, { type: i4.ContextService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.ColumnInfoService }, { type: i6.IdService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { standalone: [{
                 type: HostBinding,
                 args: ['class.k-grid-column-menu-standalone']
             }, {

package/esm2020/column-menu/column-menu.module.mjs

@@ -23,8 +23,10 @@ import { ColumnMenuAutoSizeColumnComponent } from './column-menu-autosize.compon
 import { ColumnMenuAutoSizeAllColumnsComponent } from './column-menu-autosize-all.component';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
 import { TabStripModule } from '@progress/kendo-angular-layout';
+import { ColumnMenuChooserItemCheckedDirective } from './column-chooser-item-checked.directive';
 import * as i0 from "@angular/core";
 const COMPONENTS = [
+    ColumnMenuChooserItemCheckedDirective,
     ColumnListComponent,
     ColumnChooserComponent,
     ColumnMenuChooserComponent,
@@ -67,7 +69,8 @@ export class ColumnMenuModule {
     }
 }
 ColumnMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuModule, declarations: [ColumnListComponent,
+ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuModule, declarations: [ColumnMenuChooserItemCheckedDirective,
+        ColumnListComponent,
         ColumnChooserComponent,
         ColumnMenuChooserComponent,
         ColumnMenuFilterComponent,
@@ -82,7 +85,8 @@ ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         ColumnMenuStickComponent,
         ColumnMenuPositionComponent,
         ColumnMenuAutoSizeColumnComponent,
-        ColumnMenuAutoSizeAllColumnsComponent], imports: [CommonModule, FilterMenuModule, ButtonModule, TabStripModule], exports: [ColumnListComponent,
+        ColumnMenuAutoSizeAllColumnsComponent], imports: [CommonModule, FilterMenuModule, ButtonModule, TabStripModule], exports: [ColumnMenuChooserItemCheckedDirective,
+        ColumnListComponent,
         ColumnChooserComponent,
         ColumnMenuChooserComponent,
         ColumnMenuFilterComponent,

package/esm2020/common/error-messages.mjs

@@ -5,7 +5,7 @@
 /**
  * @hidden
  */
-export const ColunnMenuErrorMessages = {
+export const ColumnMenuErrorMessages = {
     autoSizeColumn: 'The auto size column does not work with enabled virtual columns',
     autoSizeAllColumns: 'The auto size all columns does not work with enabled virtual columns'
 };

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

@@ -137,10 +137,10 @@ export class FilterMenuContainerComponent {
             e.preventDefault();
             if (buttonType === 'reset') {
                 // eslint-disable-next-line no-unused-expressions
-                this.disabled ? this.menuTabbingService.firstFocusable.focus() : this.filterButton.nativeElement.focus();
+                this.menuTabbingService.firstFocusable.focus();
             }
             else {
-                this.menuTabbingService.firstFocusable.focus();
+                this.disabled ? this.menuTabbingService.firstFocusable.focus() : this.resetButton.nativeElement.focus();
             }
         }
     }

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { NavigationService } from './../../navigation/navigation.service';
-import { Component, ElementRef, Input, TemplateRef, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, Input, Optional, Renderer2, TemplateRef, ViewChild } from '@angular/core';
 import { FilterService } from "../filter.service";
 import { ColumnComponent } from '../../columns/column.component';
 import { SinglePopupService } from '../../common/single-popup.service';
@@ -11,22 +11,30 @@ import { filtersByField } from '../base-filter-cell.component';
 import { replaceMessagePlaceholder } from '../../utils';
 import { filterIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../../common/provider.service';
+import { IdService } from '../../common/id.service';
+import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "../filter.service";
 import * as i2 from "../../common/single-popup.service";
 import * as i3 from "../../common/provider.service";
 import * as i4 from "./../../navigation/navigation.service";
-import * as i5 from "@progress/kendo-angular-icons";
-import * as i6 from "./filter-menu-container.component";
+import * as i5 from "../../common/id.service";
+import * as i6 from "@progress/kendo-angular-icons";
+import * as i7 from "./filter-menu-container.component";
+let id = 0;
+const getId = (gridId) => `${gridId}-filter-menu-${id++}`;
 /**
  * @hidden
  */
 export class FilterMenuComponent {
-    constructor(filterService, popupService, ctx, navigationService) {
+    constructor(filterService, popupService, ctx, navigationService, renderer, cdr, idService) {
         this.filterService = filterService;
         this.popupService = popupService;
         this.ctx = ctx;
         this.navigationService = navigationService;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.idService = idService;
         this.filterIcon = filterIcon;
         this.tabIndex = '-1';
     }
@@ -41,9 +49,35 @@ export class FilterMenuComponent {
         const columnName = this.column.title || this.column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
+    /**
+     * @hidden
+     */
+    get isNavigable() {
+        return this.navigationService.tableEnabled;
+    }
     toggle(anchor, template) {
         this.popupRef = this.popupService.open(anchor, template, this.popupRef);
-        if (!this.popupRef) {
+        // Needed as changes to 'popupRef' are not reflected
+        // automatically when the Popup is closed by clicking outside the anchor
+        const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
+        if (this.popupRef) {
+            this.popupRef.popup.instance.close.pipe(take(1)).subscribe(() => {
+                this.popupRef = null;
+                const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
+                ariaRoot && this.renderer.removeAttribute(ariaRoot, 'aria-controls');
+                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
+            });
+            const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-filter-popup');
+            if (popupAriaElement) {
+                const popupId = getId(this.idService?.gridId());
+                this.renderer.setAttribute(popupAriaElement, 'id', popupId);
+                this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
+                this.renderer.setAttribute(popupAriaElement, 'aria-label', this.filterLabel);
+                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-controls', popupId);
+                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'true');
+            }
+        }
+        else {
             if (this.navigationService.tableEnabled) {
                 this.navigationService.focusCell(0, this.column.leafIndex);
             }
@@ -55,6 +89,8 @@ export class FilterMenuComponent {
     }
     close() {
         this.popupService.destroy();
+        this.popupRef = null;
+        this.cdr.markForCheck();
         if (this.navigationService.tableEnabled) {
             this.navigationService.focusCell(0, this.column.leafIndex);
         }
@@ -63,7 +99,7 @@ export class FilterMenuComponent {
         }
     }
 }
-FilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: i1.FilterService }, { token: i2.SinglePopupService }, { token: i3.ContextService }, { token: i4.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: i1.FilterService }, { token: i2.SinglePopupService }, { token: i3.ContextService }, { token: i4.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: { column: "column", filter: "filter", tabIndex: "tabIndex" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
         <a #anchor
             class="k-grid-filter-menu k-grid-header-menu"
@@ -72,7 +108,9 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             (click)="toggle(anchor, template)"
             (keydown.enter)="$event.stopImmediatePropagation()"
             href="#"
-            [attr.title]="filterLabel">
+            [attr.title]="filterLabel"
+            [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'"
+            [attr.aria-expanded]="isNavigable ? undefined : false">
             <kendo-icon-wrapper
                 name="filter"
                 [svgIcon]="filterIcon"></kendo-icon-wrapper>
@@ -87,7 +125,7 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 >
             </kendo-grid-filter-menu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i5.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i6.FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
+    `, isInline: true, components: [{ type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i7.FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -100,7 +138,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (click)="toggle(anchor, template)"
             (keydown.enter)="$event.stopImmediatePropagation()"
             href="#"
-            [attr.title]="filterLabel">
+            [attr.title]="filterLabel"
+            [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'"
+            [attr.aria-expanded]="isNavigable ? undefined : false">
             <kendo-icon-wrapper
                 name="filter"
                 [svgIcon]="filterIcon"></kendo-icon-wrapper>
@@ -117,7 +157,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.SinglePopupService }, { type: i3.ContextService }, { type: i4.NavigationService }]; }, propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.SinglePopupService }, { type: i3.ContextService }, { type: i4.NavigationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.IdService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { column: [{
                 type: Input
             }], filter: [{
                 type: Input

package/esm2020/navigation/logical-cell.directive.mjs

@@ -108,7 +108,7 @@ export class LogicalCellDirective {
                 this.renderer.addClass(el, 'k-focus');
             }
             if (this.headerLabelText) {
-                el.setAttribute('aria-label', '');
+                el.removeAttribute('aria-label');
             }
         }
         else {

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: 1692905626,
-    version: '13.4.0-develop.9',
+    publishDate: 1693335897,
+    version: '13.4.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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

@@ -31,6 +31,7 @@ import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../../common/provider.service';
 import { ColumnReorderEvent } from '../../dragdrop/column-reorder-event';
 import { ColumnsContainer } from '../../columns/columns-container';
+import { NavigationService } from '../../navigation/navigation.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/single-popup.service";
 import * as i2 from "../../dragdrop/drag-hint.service";
@@ -40,20 +41,21 @@ import * as i5 from "../../common/id.service";
 import * as i6 from "../../common/sort.service";
 import * as i7 from "./../../common/column-info.service";
 import * as i8 from "../../common/provider.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 "../../navigation/navigation.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"];
 /**
@@ -79,7 +81,7 @@ const modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
  * @hidden
  */
 export class HeaderComponent {
-    constructor(popupService, hint, cue, reorderService, idService, sortService, columnInfoService, cd, contextService) {
+    constructor(popupService, hint, cue, reorderService, idService, sortService, columnInfoService, cd, contextService, navigationService) {
         this.popupService = popupService;
         this.hint = hint;
         this.cue = cue;
@@ -89,6 +91,7 @@ export class HeaderComponent {
         this.columnInfoService = columnInfoService;
         this.cd = cd;
         this.contextService = contextService;
+        this.navigationService = navigationService;
         this.columns = [];
         this.groups = [];
         this.sort = new Array();
@@ -223,6 +226,9 @@ export class HeaderComponent {
             return 'descending';
         }
     }
+    get isNavigable() {
+        return this.navigationService.tableEnabled;
+    }
     /**
      *
      * @param column
@@ -450,7 +456,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.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i8.ContextService }], 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.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i8.ContextService }, { token: i9.NavigationService }], 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", totalColumns: "totalColumns", 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"
@@ -502,7 +508,9 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                     [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
                     [attr.colspan]="column.colspan"
-                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined">
+                    [attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
+                    [attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
+                    [attr.aria-keyshortcuts]="isNavigable ? 'Alt + ArrowDown' : undefined">
 
                     <ng-container *ngIf="!isSortable(getColumnComponent(column))">
                         <span class="k-cell-inner">
@@ -668,7 +676,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [totalColumns]="totalColumns"
         ></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", "size"], 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", "totalColumns"] }, { 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", "size"], 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", "totalColumns"] }, { 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: [{
@@ -724,7 +732,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
                     [attr.colspan]="column.colspan"
-                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined">
+                    [attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
+                    [attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
+                    [attr.aria-keyshortcuts]="isNavigable ? 'Alt + ArrowDown' : undefined">
 
                     <ng-container *ngIf="!isSortable(getColumnComponent(column))">
                         <span class="k-cell-inner">
@@ -892,7 +902,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.ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i8.ContextService }]; }, 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.ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i8.ContextService }, { type: i9.NavigationService }]; }, propDecorators: { totalColumnLevels: [{
                 type: Input
             }], columns: [{
                 type: Input