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

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.firstChild, '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/cell/autocomplete-filter-cell.component.mjs

@@ -75,7 +75,7 @@ AutoCompleteFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 [value]="currentFilter?.value">
             </kendo-autocomplete>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: i5.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i6.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoAutoComplete"] }], directives: [{ type: i7.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, components: [{ type: i5.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i6.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "showStickyHeader", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoAutoComplete"] }], directives: [{ type: i7.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteFilterCellComponent, decorators: [{
             type: Component,
             args: [{

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

@@ -80,7 +80,7 @@ BooleanFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 [value]="currentFilter?.value">
             </kendo-dropdownlist>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: i4.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i5.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i6.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: i7.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
+    `, isInline: true, components: [{ type: i4.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i5.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i6.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: i7.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterCellComponent, decorators: [{
             type: Component,
             args: [{

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

@@ -151,7 +151,7 @@ FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             [size]="size"
             (click)="clearClick()"
             (keydown)="clearKeydown($event)"></button>
-    `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
+    `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellOperatorsComponent, decorators: [{
             type: Component,
             args: [{

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

@@ -124,7 +124,7 @@ DateFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [menuTabbingService]="menuTabbingService"
             >
         </kendo-grid-date-filter-menu-input>
-    `, isInline: true, components: [{ type: i2.DateFilterMenuInputComponent, selector: "kendo-grid-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
+    `, isInline: true, components: [{ type: i2.DateFilterMenuInputComponent, selector: "kendo-grid-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterMenuComponent, decorators: [{
             type: Component,
             args: [{

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-input-wrapper.component.mjs

@@ -95,7 +95,7 @@ FilterMenuInputWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             (keydown.shift.tab)="onShiftTab($event)">
         </kendo-dropdownlist>
         <ng-content></ng-content>
-    `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i3.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
+    `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i3.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuInputWrapperComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/filtering/menu/filter-menu-template.directive.mjs

@@ -5,8 +5,28 @@
 import { Directive, TemplateRef, Optional } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents the filter-menu template
+ * Represents the filter-menu template.
+ * Helps to customize the content of the filter menu. To define the filter menu template, nest an `<ng-template>` tag with the
+ * `kendoGridFilterMenuTemplate` directive inside a `<kendo-grid-column>` tag
  * ([see example]({% slug filter_menu %}#toc-custom-filters)).
+ *
+ * The template context is set to the current data item and the following additional fields are passed:
+ * - `column`&mdash;Defines an instance of the [`ColumnComponent`]({% slug api_grid_columncomponent %}) option.. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
+ * - `filter`&mdash;The provided filter descriptors. Use it as an alias for a template variable by utilizing the `let-filter="filter"` syntax.
+ * - `filterService`&mdash;Represents the [`FilterService`]({% slug api_grid_filterservice %}). Use it as an alias for a template variable by utilizing the `let-filterService="filterService"` syntax.
+ *
+ * ```html
+ * <kendo-grid-column field="CategoryID" title="Category">
+ *     <ng-template kendoGridFilterMenuTemplate
+ *         let-column="column"
+ *         let-filter="filter"
+ *         let-filterService="filterService"
+ *         >
+ *         ...
+ *    </ng-template>
+ *    ...
+ * </kendo-grid-column>
+ * ```
  */
 export class FilterMenuTemplateDirective {
     constructor(templateRef) {

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/filtering/menu/numeric-filter-menu.component.mjs

@@ -125,7 +125,7 @@ NumericFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             [menuTabbingService]="menuTabbingService"
             >
         </kendo-grid-numeric-filter-menu-input>
-    `, isInline: true, components: [{ type: i2.NumericFilterMenuInputComponent, selector: "kendo-grid-numeric-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "filterDelay", "isFirstDropDown", "menuTabbingService", "step", "min", "max", "spinners", "decimals", "format"] }, { type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
+    `, isInline: true, components: [{ type: i2.NumericFilterMenuInputComponent, selector: "kendo-grid-numeric-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "filterDelay", "isFirstDropDown", "menuTabbingService", "step", "min", "max", "spinners", "decimals", "format"] }, { type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterMenuComponent, decorators: [{
             type: Component,
             args: [{

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

@@ -103,7 +103,7 @@ StringFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [filter]="filter"
             [menuTabbingService]="menuTabbingService">
         </kendo-grid-string-filter-menu-input>
-    `, isInline: true, components: [{ type: i2.StringFilterMenuInputComponent, selector: "kendo-grid-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "isFirstDropDown", "menuTabbingService"] }, { type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
+    `, isInline: true, components: [{ type: i2.StringFilterMenuInputComponent, selector: "kendo-grid-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "isFirstDropDown", "menuTabbingService"] }, { type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
             type: Component,
             args: [{

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 {