@progress/kendo-angular-treelist 18.2.1-develop.2 → 18.3.0-develop.1

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

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, SkipSelf, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { Component, Input, SkipSelf, Output, EventEmitter, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core';
 import { NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgClass } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { ColumnComponent } from "../../columns/column.component";
@@ -12,10 +12,12 @@ import { isPresent, isNullOrEmptyString } from "../../utils";
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { cloneFilters } from '../../common/filter-descriptor-differ';
 import { FilterMenuHostDirective } from './filter-menu-host.directive';
+import { MenuTabbingService } from './menu-tabbing.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../filter.service";
 import * as i2 from "@progress/kendo-angular-l10n";
-import * as i3 from "@angular/forms";
+import * as i3 from "./menu-tabbing.service";
+import * as i4 from "@angular/forms";
 const isNoValueOperator = operator => (operator === "isnull"
     || operator === "isnotnull"
     || operator === "isempty"
@@ -57,9 +59,18 @@ export class FilterMenuContainerComponent {
      * @type {ColumnComponent}
      */
     column;
-    get filter() {
-        return this._filter;
-    }
+    /**
+     * @hidden
+     */
+    isLast;
+    /**
+     * @hidden
+     */
+    isExpanded;
+    /**
+     * @hidden
+     */
+    menuTabbingService;
     /**
      * The current root filter.
      * @type {CompositeFilterDescriptor}
@@ -67,6 +78,9 @@ export class FilterMenuContainerComponent {
     set filter(value) {
         this._filter = cloneFilters(value);
     }
+    get filter() {
+        return this._filter;
+    }
     /**
      * @hidden
      */
@@ -80,24 +94,33 @@ export class FilterMenuContainerComponent {
         }
         return this._childFilter;
     }
+    resetButton;
+    filterButton;
     _childFilter;
     subscription;
     _templateContext = {};
     _filter;
-    constructor(parentService, childService, localization, cd) {
+    constructor(parentService, childService, localization, cd, menuTabbingService) {
         this.parentService = parentService;
         this.childService = childService;
         this.localization = localization;
         this.cd = cd;
+        this.menuTabbingService = menuTabbingService;
     }
     ngOnInit() {
         this.subscription = this.childService.changes.subscribe(filter => this._childFilter = filter);
         this.subscription.add(this.localization.changes.subscribe(() => this.cd.markForCheck()));
     }
+    ngAfterViewChecked() {
+        if (!this.menuTabbingService.isColumnMenu || (this.isLast && this.isExpanded)) {
+            this.menuTabbingService.lastFocusable = this.resetButton.nativeElement;
+        }
+    }
     ngOnDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
+        this.menuTabbingService.lastFocusable = undefined;
     }
     get disabled() {
         return !this.childFilter.filters.some(validFilters);
@@ -135,14 +158,28 @@ export class FilterMenuContainerComponent {
         this.parentService.filter(root);
         this.close.emit();
     }
+    onTab(e, buttonType) {
+        if (this.menuTabbingService.firstFocusable && (!this.menuTabbingService.isColumnMenu || this.isLast)) {
+            e.preventDefault();
+            if (buttonType === 'reset') {
+                this.menuTabbingService.firstFocusable.focus();
+            }
+            else {
+                this.disabled ? this.menuTabbingService.firstFocusable.focus() : this.resetButton.nativeElement.focus();
+            }
+        }
+    }
     get clearText() {
         return this.localization.get("filterClearButton");
     }
     get filterText() {
         return this.localization.get("filterFilterButton");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: i1.FilterService, skipSelf: true }, { token: i1.FilterService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuContainerComponent, isStandalone: true, selector: "kendo-treelist-filter-menu-container", inputs: { column: "column", filter: "filter", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [FilterService], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: i1.FilterService, skipSelf: true }, { token: i1.FilterService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.MenuTabbingService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuContainerComponent, isStandalone: true, selector: "kendo-treelist-filter-menu-container", inputs: { column: "column", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", filter: "filter", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
+            FilterService,
+            MenuTabbingService
+        ], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "filterButton", first: true, predicate: ["filterButton"], descendants: true }], ngImport: i0, template: `
         <form (submit)="submit()" (reset)="reset()"
             class="k-filter-menu">
             <div class="k-filter-menu-container">
@@ -152,7 +189,8 @@ export class FilterMenuContainerComponent {
                             kendoFilterMenuHost
                             [filterService]="childService"
                             [column]="column"
-                            [filter]="childFilter">
+                            [filter]="childFilter"
+                            [menuTabbingService]="menuTabbingService">
                         </ng-container>
                     </ng-container>
                     <ng-container *ngSwitchCase="true">
@@ -165,26 +203,28 @@ export class FilterMenuContainerComponent {
                     </ng-container>
                 </ng-container>
                 <div [ngClass]="actionsClass">
-                    <button
-                        type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle">
-                        {{clearText}}
-                    </button>
-                    <button
+                    <button #filterButton
                         type="submit"
                         class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                        [disabled]="disabled">
-                        {{filterText}}
-                    </button>
+                        [disabled]="disabled"
+                        (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                    <button
+                        #resetButton
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
             type: Component,
             args: [{
-                    providers: [FilterService],
+                    providers: [
+                        FilterService,
+                        MenuTabbingService
+                    ],
                     selector: 'kendo-treelist-filter-menu-container',
                     template: `
         <form (submit)="submit()" (reset)="reset()"
@@ -196,7 +236,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             kendoFilterMenuHost
                             [filterService]="childService"
                             [column]="column"
-                            [filter]="childFilter">
+                            [filter]="childFilter"
+                            [menuTabbingService]="menuTabbingService">
                         </ng-container>
                     </ng-container>
                     <ng-container *ngSwitchCase="true">
@@ -209,17 +250,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </ng-container>
                 </ng-container>
                 <div [ngClass]="actionsClass">
-                    <button
-                        type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle">
-                        {{clearText}}
-                    </button>
-                    <button
+                    <button #filterButton
                         type="submit"
                         class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                        [disabled]="disabled">
-                        {{filterText}}
-                    </button>
+                        [disabled]="disabled"
+                        (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                    <button
+                        #resetButton
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
@@ -229,12 +269,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.FilterService, decorators: [{
                     type: SkipSelf
-                }] }, { type: i1.FilterService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { close: [{
+                }] }, { type: i1.FilterService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i3.MenuTabbingService }]; }, propDecorators: { close: [{
                 type: Output
             }], column: [{
                 type: Input
+            }], isLast: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], menuTabbingService: [{
+                type: Input
             }], filter: [{
                 type: Input
             }], actionsClass: [{
                 type: Input
+            }], resetButton: [{
+                type: ViewChild,
+                args: ['resetButton', { static: false }]
+            }], filterButton: [{
+                type: ViewChild,
+                args: ['filterButton', { static: false }]
             }] } });

package/esm2022/filtering/menu/filter-menu-dropdownlist.directive.mjs

@@ -0,0 +1,44 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
+import { Directive, Input } from '@angular/core';
+import { Keys } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dropdowns";
+/**
+ * @hidden
+ */
+export class FilterMenuDropDownListDirective {
+    host;
+    filterMenuDropDownLabel;
+    constructor(host) {
+        this.host = host;
+    }
+    ngAfterViewInit() {
+        const wrapperElement = this.host.wrapper.nativeElement;
+        wrapperElement.setAttribute('aria-label', this.filterMenuDropDownLabel);
+        wrapperElement.addEventListener('keydown', this.keydownHandler, true);
+    }
+    ngOnDestroy() {
+        this.host.wrapper.nativeElement.removeEventListener('keydown', this.keydownHandler);
+    }
+    keydownHandler = (e) => {
+        if (e.keyCode === Keys.Escape && this.host.isOpen) {
+            e.stopPropagation();
+            this.host.toggle(false);
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuDropDownListDirective, deps: [{ token: i1.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuDropDownListDirective, isStandalone: true, selector: "[kendoFilterMenuDropDown]", inputs: { filterMenuDropDownLabel: "filterMenuDropDownLabel" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuDropDownListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoFilterMenuDropDown]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DropDownListComponent }]; }, propDecorators: { filterMenuDropDownLabel: [{
+                type: Input
+            }] } });

package/esm2022/filtering/menu/filter-menu-host.directive.mjs

@@ -8,12 +8,14 @@ import { isNullOrEmptyString, isPresent } from "../../utils";
 import { filterMenuComponentFactory } from "./filter-menu-component.factory";
 import { StringFilterMenuComponent } from "./string-filter-menu.component";
 import { FilterService } from "../filter.service";
+import { MenuTabbingService } from "./menu-tabbing.service";
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
 export class FilterMenuHostDirective extends FilterHostDirective {
     filterService;
+    menuTabbingService;
     constructor(host, resolver) {
         super(host, resolver);
     }
@@ -26,9 +28,10 @@ export class FilterMenuHostDirective extends FilterHostDirective {
     initComponent(ctx) {
         super.initComponent(ctx);
         this.component.instance.filterService = this.filterService;
+        this.component.instance.menuTabbingService = this.menuTabbingService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuHostDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuHostDirective, isStandalone: true, selector: "[kendoFilterMenuHost]", inputs: { filterService: "filterService" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuHostDirective, isStandalone: true, selector: "[kendoFilterMenuHost]", inputs: { filterService: "filterService", menuTabbingService: "menuTabbingService" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuHostDirective, decorators: [{
             type: Directive,
@@ -38,4 +41,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { filterService: [{
                 type: Input
+            }], menuTabbingService: [{
+                type: Input
             }] } });

package/esm2022/filtering/menu/filter-menu-input-wrapper.component.mjs

@@ -2,16 +2,25 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import { FilterService } from '../filter.service';
 import { FilterInputWrapperComponent } from "../filter-input-wrapper.component";
+import { MenuTabbingService } from './menu-tabbing.service';
+import { FilterMenuDropDownListDirective } from './filter-menu-dropdownlist.directive';
+import { replaceMessagePlaceholder } from '../../utils';
+import { ContextService } from '../../common/provider.service';
 import * as i0 from "@angular/core";
+import * as i1 from "../../common/provider.service";
 /**
  * @hidden
  */
 export class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent {
+    ctx;
     filterService;
+    isFirstDropDown;
+    menuTabbingService;
+    firstOperatorDropDown;
     _currentFilter;
     /**
      * @hidden
@@ -19,8 +28,17 @@ export class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent
     get hostClasses() {
         return false;
     }
-    constructor() {
+    constructor(ctx) {
         super(null);
+        this.ctx = ctx;
+    }
+    ngAfterViewInit() {
+        const shouldFocusFirstFocusable = this.isFirstDropDown && this.filterService?.menuTabbingService;
+        const isTabbedInterface = this.menuTabbingService?.isTabbedInterface;
+        if (shouldFocusFirstFocusable && !isTabbedInterface) {
+            this.filterService.menuTabbingService.firstFocusable = this.firstOperatorDropDown;
+            this.firstOperatorDropDown.focus();
+        }
     }
     operatorChange(dataItem) {
         this.currentOperator = dataItem;
@@ -55,18 +73,33 @@ export class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent
             value: value
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuInputWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuInputWrapperComponent, isStandalone: true, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: { filterService: "filterService", currentFilter: "currentFilter" }, usesInheritance: true, ngImport: i0, template: `
+    onShiftTab(e) {
+        e.stopImmediatePropagation();
+        if (!this.menuTabbingService?.isColumnMenu && this.isFirstDropDown && this.filterService.menuTabbingService.lastFocusable) {
+            e.preventDefault();
+            this.filterService.menuTabbingService.lastFocusable.focus();
+        }
+    }
+    get filterMenuDropDownLabel() {
+        const localizationMsg = this.ctx.localization.get('filterMenuOperatorsDropDownLabel') || '';
+        const columnName = this.column ? this.column.title || this.column.field : '';
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuInputWrapperComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuInputWrapperComponent, isStandalone: true, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: { filterService: "filterService", isFirstDropDown: "isFirstDropDown", menuTabbingService: "menuTabbingService", currentFilter: "currentFilter" }, viewQueries: [{ propertyName: "firstOperatorDropDown", first: true, predicate: DropDownListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
+            kendoFilterMenuDropDown
+            [filterMenuDropDownLabel]="filterMenuDropDownLabel"
             [data]="operators"
             (valueChange)="operatorChange($event)"
             [value]="currentOperator"
             [valuePrimitive]="true"
             textField="text"
-            valueField="value">
+            valueField="value"
+            (keydown.shift.tab)="onShiftTab($event)">
         </kendo-dropdownlist>
         <ng-content></ng-content>
-    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuInputWrapperComponent, decorators: [{
             type: Component,
@@ -74,20 +107,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-treelist-filter-menu-input-wrapper',
                     template: `
         <kendo-dropdownlist
+            kendoFilterMenuDropDown
+            [filterMenuDropDownLabel]="filterMenuDropDownLabel"
             [data]="operators"
             (valueChange)="operatorChange($event)"
             [value]="currentOperator"
             [valuePrimitive]="true"
             textField="text"
-            valueField="value">
+            valueField="value"
+            (keydown.shift.tab)="onShiftTab($event)">
         </kendo-dropdownlist>
         <ng-content></ng-content>
     `,
                     standalone: true,
-                    imports: [DropDownListComponent]
+                    imports: [DropDownListComponent, FilterMenuDropDownListDirective]
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { filterService: [{
+        }], ctorParameters: function () { return [{ type: i1.ContextService }]; }, propDecorators: { filterService: [{
+                type: Input
+            }], isFirstDropDown: [{
+                type: Input
+            }], menuTabbingService: [{
                 type: Input
+            }], firstOperatorDropDown: [{
+                type: ViewChild,
+                args: [DropDownListComponent, { static: false }]
             }], currentFilter: [{
                 type: Input
             }] } });

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

@@ -2,8 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input } from '@angular/core';
-import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { ChangeDetectorRef, Component, ElementRef, Input, Optional, Renderer2, TemplateRef, ViewChild } from '@angular/core';
 import { filterIcon } from '@progress/kendo-svg-icons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { FilterService } from "../filter.service";
@@ -11,17 +10,29 @@ import { ColumnComponent } from '../../columns/column.component';
 import { SinglePopupService } from '../../common/single-popup.service';
 import { filtersByField } from '../base-filter-cell.component';
 import { FilterMenuContainerComponent } from './filter-menu-container.component';
+import { ContextService } from '../../common/provider.service';
+import { NavigationService } from '../../navigation/navigation.service';
+import { IdService } from '../../common/id.service';
+import { replaceMessagePlaceholder } from '../../utils';
 import * as i0 from "@angular/core";
 import * as i1 from "../filter.service";
 import * as i2 from "../../common/single-popup.service";
-import * as i3 from "@progress/kendo-angular-l10n";
+import * as i3 from "../../common/provider.service";
+import * as i4 from "../../navigation/navigation.service";
+import * as i5 from "../../common/id.service";
+let id = 0;
+const getId = (gridId) => `${gridId}-filter-menu-${id++}`;
 /**
  * @hidden
  */
 export class FilterMenuComponent {
     filterService;
     popupService;
-    localization;
+    ctx;
+    navigationService;
+    renderer;
+    cdr;
+    idService;
     filterIcon = filterIcon;
     /**
      * The column with which the filter is associated.
@@ -33,32 +44,100 @@ export class FilterMenuComponent {
      * @type {CompositeFilterDescriptor}
      */
     filter;
-    filterLabel;
+    anchor;
+    template;
+    tabIndex = '-1';
     popupRef;
-    constructor(filterService, popupService, localization) {
+    popupSubs;
+    constructor(filterService, popupService, ctx, navigationService, renderer, cdr, idService) {
         this.filterService = filterService;
         this.popupService = popupService;
-        this.localization = localization;
-        this.filterLabel = this.localization.get('filter');
+        this.ctx = ctx;
+        this.navigationService = navigationService;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.idService = idService;
+    }
+    ngOnDestroy() {
+        this.cleanUp();
     }
     get hasFilters() {
         return filtersByField(this.filter, (this.column || {}).field).length > 0;
     }
+    /**
+     * @hidden
+     */
+    get filterLabel() {
+        const localizationMsg = this.ctx.localization.get('filterMenuTitle') || '';
+        const columnName = this.column.title || this.column.field;
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+    }
+    /**
+     * @hidden
+     */
+    get isNavigable() {
+        return this.navigationService.enabled;
+    }
     toggle(anchor, template) {
         this.popupRef = this.popupService.open(anchor, template, 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.popupSubs?.unsubscribe();
+            this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
+                this.close();
+                this.updateAria(ariaRoot);
+            });
+            this.popupSubs.add(() => this.popupRef.popup.instance.close.subscribe(() => {
+                this.popupRef = null;
+                this.updateAria(ariaRoot);
+            }));
+            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 {
+            this.focusRoot();
+        }
         return false;
     }
     close() {
+        this.cleanUp();
+        this.focusRoot();
+    }
+    updateAria(ariaRoot) {
+        ariaRoot && this.renderer.removeAttribute(ariaRoot, 'aria-controls');
+        ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
+    }
+    cleanUp() {
         this.popupService.destroy();
+        this.popupRef = null;
+        this.popupSubs?.unsubscribe();
+        this.popupSubs = null;
+        this.cdr.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: i1.FilterService }, { token: i2.SinglePopupService }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuComponent, isStandalone: true, selector: "kendo-treelist-filter-menu", inputs: { column: "column", filter: "filter" }, ngImport: i0, template: `
+    focusRoot() {
+        this.isNavigable ? this.navigationService.focusCell(0, this.column.leafIndex) : this.anchor.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuComponent, isStandalone: true, selector: "kendo-treelist-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"
             [class.k-active]="hasFilters"
+            [tabindex]="tabIndex"
             (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>
@@ -68,10 +147,11 @@ export class FilterMenuComponent {
                 [column]="column"
                 [filter]="filter"
                 (close)="close()"
-                >
+                (keydown.escape)="close()"
+                (keydown.enter)="$event.stopImmediatePropagation()">
             </kendo-treelist-filter-menu-container>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuComponent, decorators: [{
             type: Component,
@@ -81,9 +161,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <a #anchor
             class="k-grid-filter-menu k-grid-header-menu"
             [class.k-active]="hasFilters"
+            [tabindex]="tabIndex"
             (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>
@@ -93,15 +177,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [column]="column"
                 [filter]="filter"
                 (close)="close()"
-                >
+                (keydown.escape)="close()"
+                (keydown.enter)="$event.stopImmediatePropagation()">
             </kendo-treelist-filter-menu-container>
         </ng-template>
     `,
                     standalone: true,
                     imports: [IconWrapperComponent, FilterMenuContainerComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.SinglePopupService }, { type: i3.LocalizationService }]; }, 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
+            }], anchor: [{
+                type: ViewChild,
+                args: ['anchor', { static: true }]
+            }], template: [{
+                type: ViewChild,
+                args: ['template', { static: true, read: TemplateRef }]
+            }], tabIndex: [{
+                type: Input
             }] } });