@progress/kendo-angular-grid 13.4.0-develop.8 → 13.4.0

package/fesm2020/progress-kendo-angular-grid.mjs

@@ -34,7 +34,7 @@ import * as i3$1 from '@progress/kendo-angular-inputs';
 import { NumericTextBoxComponent, InputsModule, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
 import * as i4$3 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
-import * as i16 from '@progress/kendo-angular-layout';
+import * as i17 from '@progress/kendo-angular-layout';
 import { TabStripComponent, TabStripModule } from '@progress/kendo-angular-layout';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { getter } from '@progress/kendo-common';
@@ -4442,8 +4442,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1692881884,
-    version: '13.4.0-develop.8',
+    publishDate: 1693305612,
+    version: '13.4.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -11097,10 +11097,10 @@ 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();
             }
         }
     }
@@ -11224,15 +11224,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['filterButton', { static: false }]
             }] } });
 
+let id$3 = 0;
+const getId$1 = (gridId) => `${gridId}-filter-menu-${id$3++}`;
 /**
  * @hidden
  */
 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';
     }
@@ -11247,9 +11252,35 @@ 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$1(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);
             }
@@ -11261,6 +11292,8 @@ class FilterMenuComponent {
     }
     close() {
         this.popupService.destroy();
+        this.popupRef = null;
+        this.cdr.markForCheck();
         if (this.navigationService.tableEnabled) {
             this.navigationService.focusCell(0, this.column.leafIndex);
         }
@@ -11269,7 +11302,7 @@ class FilterMenuComponent {
         }
     }
 }
-FilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: FilterService }, { token: SinglePopupService }, { token: ContextService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: FilterService }, { token: SinglePopupService }, { token: ContextService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: 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"
@@ -11278,7 +11311,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>
@@ -11306,7 +11341,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>
@@ -11323,7 +11360,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: SinglePopupService }, { type: ContextService }, { type: NavigationService }]; }, propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: SinglePopupService }, { type: ContextService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: IdService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { column: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -11381,7 +11420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * @hidden
  */
-const ColunnMenuErrorMessages = {
+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'
 };
@@ -11487,6 +11526,9 @@ class ColumnMenuItemComponent {
         this.collapse = new EventEmitter();
         this.contentState = 'collapsed';
     }
+    ngAfterViewInit() {
+        this.contentTemplate && (this.contentId = `k-${guid()}`);
+    }
     ngOnChanges(changes) {
         if (changes.expanded) {
             this.updateContentState();
@@ -11521,13 +11563,14 @@ ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [class.k-selected]="selected"
             [class.k-disabled]="disabled"
             role="button"
-            [attr.aria-expanded]="expanded">
+            [attr.aria-expanded]="expanded"
+            [attr.aria-controls]="expanded ? contentId : undefined">
             <kendo-icon-wrapper
                 [name]="icon"
                 [svgIcon]="svgIcon"></kendo-icon-wrapper>
             {{ text }}
         </div>
-        <div *ngIf="contentTemplate" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
+        <div *ngIf="contentTemplate" [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
             </ng-container>
         <div>
@@ -11589,13 +11632,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [class.k-selected]="selected"
             [class.k-disabled]="disabled"
             role="button"
-            [attr.aria-expanded]="expanded">
+            [attr.aria-expanded]="expanded"
+            [attr.aria-controls]="expanded ? contentId : undefined">
             <kendo-icon-wrapper
                 [name]="icon"
                 [svgIcon]="svgIcon"></kendo-icon-wrapper>
             {{ text }}
         </div>
-        <div *ngIf="contentTemplate" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
+        <div *ngIf="contentTemplate" [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
             </ng-container>
         <div>
@@ -11971,14 +12015,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+class ColumnListKeyboardNavigation {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.activeIndex = 0;
+    }
+    next() {
+        this.toggle(this.activeIndex, false);
+        this.activeIndex = Math.min(this.activeIndex + 1, this.items.length - 1);
+        this.toggle(this.activeIndex, true);
+    }
+    prev() {
+        this.toggle(this.activeIndex, false);
+        this.activeIndex = Math.max(this.activeIndex - 1, 0);
+        this.toggle(this.activeIndex, true);
+    }
+    toggle(index, active) {
+        const element = this.items[index]?.host.nativeElement;
+        element && this.renderer.setAttribute(this.items[index].host.nativeElement, 'tabindex', active ? '0' : '-1');
+        active && element && element.focus();
+    }
+    toggleCheckedState() {
+        this.items[this.activeIndex].host.nativeElement.firstElementChild.click();
+    }
+}
+ColumnListKeyboardNavigation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListKeyboardNavigation, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+ColumnListKeyboardNavigation.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListKeyboardNavigation });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListKeyboardNavigation, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
+
+/**
+ * @hidden
+ */
+class ColumnMenuChooserItemCheckedDirective {
+    constructor(host, renderer) {
+        this.host = host;
+        this.renderer = renderer;
+        this.checkedChangeSub = new Subscription();
+    }
+    ngAfterViewInit() {
+        this.checkedChangeSub.add(this.renderer.listen(this.host.nativeElement.firstElementChild, 'change', (e) => {
+            this.kendoColumnMenuChooserItemChecked = e.target.checked;
+        }));
+    }
+    ngOnDestroy() {
+        this.checkedChangeSub.unsubscribe();
+    }
+}
+ColumnMenuChooserItemCheckedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuChooserItemCheckedDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+ColumnMenuChooserItemCheckedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuChooserItemCheckedDirective, selector: "[kendoColumnMenuChooserItemChecked]", inputs: { kendoColumnMenuChooserItemChecked: "kendoColumnMenuChooserItemChecked" }, host: { properties: { "attr.aria-checked": "this.kendoColumnMenuChooserItemChecked" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuChooserItemCheckedDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoColumnMenuChooserItemChecked]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { kendoColumnMenuChooserItemChecked: [{
+                type: HostBinding,
+                args: ['attr.aria-checked']
+            }, {
+                type: Input
+            }] } });
+
 /**
  * @hidden
  */
 class ColumnListComponent {
-    constructor(element, ngZone, renderer) {
+    constructor(element, ngZone, renderer, listNavigationService) {
         this.element = element;
         this.ngZone = ngZone;
         this.renderer = renderer;
+        this.listNavigationService = listNavigationService;
         this.reset = new EventEmitter();
         this.apply = new EventEmitter();
         this.columnChange = new EventEmitter();
@@ -11986,10 +12094,28 @@ class ColumnListComponent {
         this.allowHideAll = false;
         this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.unlockedCount = 0;
+        this.domSubscriptions = new Subscription();
+        this.onKeydown = (e) => {
+            if (e.keyCode !== Keys.Tab) {
+                e.preventDefault();
+            }
+            if (e.keyCode === Keys.ArrowDown) {
+                this.listNavigationService.next();
+            }
+            else if (e.keyCode === Keys.ArrowUp) {
+                this.listNavigationService.prev();
+            }
+            else if (e.keyCode === Keys.Space && e.target.classList.contains('k-column-list-item')) {
+                this.listNavigationService.toggleCheckedState();
+            }
+        };
     }
     get className() {
         return true;
     }
+    isChecked(checkbox) {
+        return checkbox.checked;
+    }
     set columns(value) {
         this._columns = value.filter(column => column.includeInChooser !== false);
         this.allColumns = value;
@@ -12007,12 +12133,21 @@ class ColumnListComponent {
             return;
         }
         this.ngZone.runOutsideAngular(() => {
-            this.domSubscriptions = this.renderer.listen(this.element.nativeElement, 'click', (e) => {
-                if (hasClasses(e.target, 'k-checkbox')) {
+            this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'click', (e) => {
+                const closestItem = e.target.closest('.k-column-list-item');
+                if (closestItem) {
+                    const checkbox = closestItem.querySelector('.k-checkbox');
+                    const index = parseInt(checkbox.getAttribute('data-index'), 10);
+                    if (e.target === checkbox) {
+                        closestItem.focus();
+                    }
+                    else {
+                        e.preventDefault();
+                        checkbox.checked = !checkbox.checked;
+                    }
                     if (this.autoSync) {
-                        const index = parseInt(e.target.getAttribute('data-index'), 10);
                         const column = this.columns[index];
-                        const hidden = !e.target.checked;
+                        const hidden = !checkbox.checked;
                         if (Boolean(column.hidden) !== hidden) {
                             this.ngZone.run(() => {
                                 column.hidden = hidden;
@@ -12023,10 +12158,20 @@ class ColumnListComponent {
                     else {
                         this.updateDisabled();
                     }
+                    if (index !== this.listNavigationService.activeIndex) {
+                        this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
+                        this.listNavigationService.activeIndex = index;
+                        this.listNavigationService.toggle(index, true);
+                    }
                 }
-            });
+            }));
+            this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'keydown', this.onKeydown));
         });
     }
+    ngAfterViewInit() {
+        this.listNavigationService.items = this.options.toArray();
+        this.listNavigationService.toggle(0, true);
+    }
     ngOnChanges(changes) {
         if (!this.service) {
             return;
@@ -12039,9 +12184,7 @@ class ColumnListComponent {
         }
     }
     ngOnDestroy() {
-        if (this.domSubscriptions) {
-            this.domSubscriptions();
-        }
+        this.domSubscriptions.unsubscribe();
     }
     cancelChanges() {
         this.forEachCheckBox((element, index) => {
@@ -12069,6 +12212,9 @@ class ColumnListComponent {
             if (this.service) {
                 this.service.menuTabbingService.firstFocusable.focus();
             }
+            else {
+                this.listNavigationService.toggle(this.listNavigationService.activeIndex, true);
+            }
         }
     }
     forEachCheckBox(callback) {
@@ -12115,35 +12261,94 @@ class ColumnListComponent {
         }
     }
 }
-ColumnListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, viewQueries: [{ propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-        <div class="k-column-list">
-            <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
-                <input class="k-checkbox k-checkbox-md k-rounded-md" type="checkbox" [attr.data-index]="index" [checked]="!column.hidden" [disabled]="isDisabled(column)" /><span class="k-checkbox-label">{{ column.displayTitle }}</span>
+ColumnListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ColumnListKeyboardNavigation }], target: i0.ɵɵFactoryTarget.Component });
+ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div 
+            class="k-column-list"
+            role="listbox"
+            aria-multiselectable="true"
+            [attr.aria-label]="ariaLabel">
+            <label 
+                *ngFor="let column of columns; let index = index;" 
+                class='k-column-list-item'
+                [kendoColumnMenuChooserItemChecked]="!column.hidden"
+                role="option">
+                <input 
+                    class="k-checkbox k-checkbox-md k-rounded-md" 
+                    type="checkbox" 
+                    [attr.data-index]="index" 
+                    [checked]="!column.hidden" 
+                    tabindex="-1"
+                    [attr.aria-hidden]="true"
+                    [disabled]="isDisabled(column)" />
+                <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
+            <button
+                #applyButton
+                type="button"
+                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="applyChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation; applyChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation; applyChanges();">{{ applyText }}</button>
+            <button
+                #resetButton
+                type="button"
+                (keydown.tab)="onTab($event)"
+                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="cancelChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation; cancelChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation; cancelChanges();">{{ resetText }}</button>
         </div>
-    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ColumnMenuChooserItemCheckedDirective, selector: "[kendoColumnMenuChooserItemChecked]", inputs: ["kendoColumnMenuChooserItemChecked"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnlist',
+                    providers: [ColumnListKeyboardNavigation],
                     template: `
-        <div class="k-column-list">
-            <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
-                <input class="k-checkbox k-checkbox-md k-rounded-md" type="checkbox" [attr.data-index]="index" [checked]="!column.hidden" [disabled]="isDisabled(column)" /><span class="k-checkbox-label">{{ column.displayTitle }}</span>
+        <div 
+            class="k-column-list"
+            role="listbox"
+            aria-multiselectable="true"
+            [attr.aria-label]="ariaLabel">
+            <label 
+                *ngFor="let column of columns; let index = index;" 
+                class='k-column-list-item'
+                [kendoColumnMenuChooserItemChecked]="!column.hidden"
+                role="option">
+                <input 
+                    class="k-checkbox k-checkbox-md k-rounded-md" 
+                    type="checkbox" 
+                    [attr.data-index]="index" 
+                    [checked]="!column.hidden" 
+                    tabindex="-1"
+                    [attr.aria-hidden]="true"
+                    [disabled]="isDisabled(column)" />
+                <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
+            <button
+                #applyButton
+                type="button"
+                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="applyChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation; applyChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation; applyChanges();">{{ applyText }}</button>
+            <button
+                #resetButton
+                type="button"
+                (keydown.tab)="onTab($event)"
+                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="cancelChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation; cancelChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation; cancelChanges();">{{ resetText }}</button>
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { className: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ColumnListKeyboardNavigation }]; }, propDecorators: { className: [{
                 type: HostBinding,
                 args: ["class.k-column-list-wrapper"]
             }], reset: [{
@@ -12156,6 +12361,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], autoSync: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], allowHideAll: [{
                 type: Input
             }], applyText: [{
@@ -12170,9 +12377,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], service: [{
                 type: Input
+            }], resetButton: [{
+                type: ViewChild,
+                args: ['resetButton', { static: false }]
             }], applyButton: [{
                 type: ViewChild,
                 args: ['applyButton', { static: false }]
+            }], options: [{
+                type: ViewChildren,
+                args: [ColumnMenuChooserItemCheckedDirective]
             }] } });
 
 /**
@@ -12265,6 +12478,7 @@ ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 <kendo-grid-columnlist
                     [applyText]="ctx.localization.get('columnsApply')"
                     [resetText]="ctx.localization.get('columnsReset')"
+                    [ariaLabel]="ctx.localization.get('columns')"
                     [columns]="columns"
                     [autoSync]="false"
                     [allowHideAll]="false"
@@ -12276,7 +12490,7 @@ ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-grid-columnlist>
             </ng-template>
         </kendo-grid-columnmenu-item>
-    `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
             type: Component,
             args: [{
@@ -12293,6 +12507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <kendo-grid-columnlist
                     [applyText]="ctx.localization.get('columnsApply')"
                     [resetText]="ctx.localization.get('columnsReset')"
+                    [ariaLabel]="ctx.localization.get('columns')"
                     [columns]="columns"
                     [autoSync]="false"
                     [allowHideAll]="false"
@@ -12696,7 +12911,7 @@ class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
     ngOnInit() {
         const isVirtualColumns = this.ctx.grid.columnMenuTemplate && this.ctx.grid.virtualColumns;
         if (isVirtualColumns && isDevMode()) {
-            console.warn(ColunnMenuErrorMessages.autoSizeColumn);
+            console.warn(ColumnMenuErrorMessages.autoSizeColumn);
         }
     }
     /**
@@ -12763,7 +12978,7 @@ class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
     ngOnInit() {
         const isVirtualColumns = this.ctx.grid.columnMenuTemplate && this.ctx.grid.virtualColumns;
         if (isVirtualColumns && isDevMode()) {
-            console.warn(ColunnMenuErrorMessages.autoSizeAllColumns);
+            console.warn(ColumnMenuErrorMessages.autoSizeAllColumns);
         }
     }
     /**
@@ -12800,6 +13015,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 const POPUP_CLASS = 'k-grid-columnmenu-popup';
+let id$2 = 0;
+const getId = (gridId) => `${gridId}-column-menu-${id$2++}`;
 /**
  * Represents the [column menu](slug:columnmenu_grid#toc-customizing-the-position) component.
  *
@@ -12812,7 +13029,7 @@ const POPUP_CLASS = 'k-grid-columnmenu-popup';
  * </kendo-grid>
  */
 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;
@@ -12820,6 +13037,7 @@ class ColumnMenuComponent {
         this.renderer = renderer;
         this.cdr = cdr;
         this.columnInfoService = columnInfoService;
+        this.idService = idService;
         /**
          * @hidden
          */
@@ -12865,7 +13083,7 @@ 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
@@ -12891,6 +13109,12 @@ class ColumnMenuComponent {
     get hasFilter() {
         return hasFilter(this.settings, this.column);
     }
+    /**
+     * @hidden
+     */
+    get isNavigable() {
+        return this.navigationService.tableEnabled;
+    }
     /**
      * @hidden
      */
@@ -12907,7 +13131,7 @@ class ColumnMenuComponent {
      * @hidden
      */
     onApply(changed) {
-        this.close();
+        this.close(true);
         if (changed.length) {
             this.cdr.markForCheck();
             this.columnInfoService.changeVisibility(changed);
@@ -12953,11 +13177,11 @@ 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;
@@ -12984,12 +13208,32 @@ 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);
             }
@@ -13001,9 +13245,13 @@ 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);
         }
@@ -13023,7 +13271,7 @@ 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: NavigationService }, { token: SinglePopupService }, { token: ColumnMenuService }, { token: ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: NavigationService }, { token: SinglePopupService }, { token: ColumnMenuService }, { token: ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ColumnInfoService }, { token: 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
@@ -13035,7 +13283,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>
@@ -13048,7 +13298,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>
@@ -13100,7 +13350,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
@@ -13187,7 +13437,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-tabstrip-tab>
             </kendo-tabstrip>
         </ng-template>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: 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: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { type: i16.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i16.TabContentDirective, selector: "[kendoTabContent]" }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: 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: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: 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: [{
@@ -13204,7 +13454,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>
@@ -13217,7 +13469,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>
@@ -13269,7 +13521,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
@@ -13358,7 +13610,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: NavigationService }, { type: SinglePopupService }, { type: ColumnMenuService }, { type: ContextService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ColumnInfoService }]; }, propDecorators: { standalone: [{
+        }], ctorParameters: function () { return [{ type: NavigationService }, { type: SinglePopupService }, { type: ColumnMenuService }, { type: ContextService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ColumnInfoService }, { type: IdService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { standalone: [{
                 type: HostBinding,
                 args: ['class.k-grid-column-menu-standalone']
             }, {
@@ -14301,7 +14555,7 @@ class LogicalCellDirective {
                 this.renderer.addClass(el, 'k-focus');
             }
             if (this.headerLabelText) {
-                el.setAttribute('aria-label', '');
+                el.removeAttribute('aria-label');
             }
         }
         else {
@@ -14993,7 +15247,7 @@ const modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
  * @hidden
  */
 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;
@@ -15003,6 +15257,7 @@ class HeaderComponent {
         this.columnInfoService = columnInfoService;
         this.cd = cd;
         this.contextService = contextService;
+        this.navigationService = navigationService;
         this.columns = [];
         this.groups = [];
         this.sort = new Array();
@@ -15137,6 +15392,9 @@ class HeaderComponent {
             return 'descending';
         }
     }
+    get isNavigable() {
+        return this.navigationService.tableEnabled;
+    }
     /**
      *
      * @param column
@@ -15364,7 +15622,7 @@ class HeaderComponent {
         });
     }
 }
-HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: SinglePopupService }, { token: DragHintService }, { token: DropCueService }, { token: ColumnReorderService }, { token: IdService }, { token: SortService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
+HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: SinglePopupService }, { token: DragHintService }, { token: DropCueService }, { token: ColumnReorderService }, { token: IdService }, { token: SortService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: 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"
@@ -15416,7 +15674,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">
@@ -15638,7 +15898,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">
@@ -15806,7 +16068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
     </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: DragHintService }, { type: DropCueService }, { type: ColumnReorderService }, { type: IdService }, { type: SortService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: ContextService }]; }, propDecorators: { totalColumnLevels: [{
+        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: DragHintService }, { type: DropCueService }, { type: ColumnReorderService }, { type: IdService }, { type: SortService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: ContextService }, { type: NavigationService }]; }, propDecorators: { totalColumnLevels: [{
                 type: Input
             }], columns: [{
                 type: Input
@@ -24133,13 +24395,30 @@ class ColumnChooserComponent {
                 anchorAlign: { vertical: 'bottom', horizontal: direction },
                 popupAlign: { vertical: 'top', horizontal: direction }
             });
-            this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
+            const popupElement = this.popupRef?.popupElement;
+            if (popupElement) {
+                const popupId = `k-${guid()}`;
+                const popupAriaElement = popupElement.querySelector('.k-popup');
+                this.ngZone.runOutsideAngular(() => {
+                    this.escapeListener = this.renderer.listen(popupAriaElement, 'keydown', (e) => {
+                        if (e.keyCode === Keys.Escape) {
+                            this.close(true);
+                        }
+                    });
+                });
+                this.renderer.setAttribute(popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
+                this.renderer.setAttribute(popupAriaElement, 'id', popupId);
+                this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
+                this.popupId = popupId;
+            }
             if (!isDocumentAvailable()) {
                 return;
             }
             this.ngZone.runOutsideAngular(() => this.closeClick = this.renderer.listen('document', 'click', ({ target }) => {
                 if (!closest(target, node => node === this.popupRef.popupElement || node === anchor.element)) {
-                    this.close();
+                    this.ngZone.run(() => {
+                        this.close();
+                    });
                 }
             }));
         }
@@ -24151,7 +24430,7 @@ class ColumnChooserComponent {
      * @hidden
      */
     onApply(changed) {
-        this.close();
+        this.close(true);
         if (changed.length) {
             this.changeDetector.markForCheck();
             this.columnInfoService.changeVisibility(changed);
@@ -24164,12 +24443,24 @@ class ColumnChooserComponent {
         this.changeDetector.markForCheck();
         this.columnInfoService.changeVisibility(changed);
     }
-    close() {
+    /**
+     * @hidden
+     */
+    onShiftTab(e) {
+        if (e.target.matches('.k-column-list-item')) {
+            e.preventDefault();
+            this.columnList.resetButton.nativeElement.focus();
+        }
+    }
+    close(focusAnchor = false) {
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
+            this.changeDetector.markForCheck();
+            this.escapeListener && this.escapeListener();
         }
         this.detachClose();
+        focusAnchor && this.anchor.element.focus();
     }
     detachClose() {
         if (this.closeClick) {
@@ -24179,7 +24470,7 @@ class ColumnChooserComponent {
     }
 }
 ColumnChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnChooserComponent, deps: [{ token: ContextService }, { token: ColumnInfoService }, { token: i1$2.PopupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnChooserComponent, selector: "kendo-grid-column-chooser", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, ngImport: i0, template: `
+ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnChooserComponent, selector: "kendo-grid-column-chooser", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true }, { propertyName: "columnList", first: true, predicate: ["columnList"], descendants: true }], ngImport: i0, template: `
         <button #anchor
             kendoButton
             type="button"
@@ -24187,20 +24478,27 @@ ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             fillMode="flat"
             [attr.title]="ctx.localization.get('columns')"
             icon="columns"
-            [svgIcon]="columnsIcon"></button>
+            [svgIcon]="columnsIcon"
+            [attr.aria-haspopup]="'dialog'"
+            [attr.aria-expanded]="!!(popupRef)"
+            [attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
         <ng-template #template>
             <span class='k-column-chooser-title'>{{ ctx.localization.get('columns') }}</span>
             <kendo-grid-columnlist
+                #columnList
                 [columns]="columns"
+                [ariaLabel]="ctx.localization.get('columns')"
+                [isLast]="true"
                 [applyText]="ctx.localization.get('columnsApply')"
                 [resetText]="ctx.localization.get('columnsReset')"
                 [autoSync]="autoSync"
                 [allowHideAll]="allowHideAll"
                 (apply)="onApply($event)"
-                (columnChange)="onChange($event)">
+                (columnChange)="onChange($event)"
+                (keydown.shift.tab)="onShiftTab($event)">
             </kendo-grid-columnlist>
         </ng-template>
-    `, isInline: true, components: [{ type: i4$1.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"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, components: [{ type: i4$1.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"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnChooserComponent, decorators: [{
             type: Component,
             args: [{
@@ -24213,17 +24511,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             fillMode="flat"
             [attr.title]="ctx.localization.get('columns')"
             icon="columns"
-            [svgIcon]="columnsIcon"></button>
+            [svgIcon]="columnsIcon"
+            [attr.aria-haspopup]="'dialog'"
+            [attr.aria-expanded]="!!(popupRef)"
+            [attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
         <ng-template #template>
             <span class='k-column-chooser-title'>{{ ctx.localization.get('columns') }}</span>
             <kendo-grid-columnlist
+                #columnList
                 [columns]="columns"
+                [ariaLabel]="ctx.localization.get('columns')"
+                [isLast]="true"
                 [applyText]="ctx.localization.get('columnsApply')"
                 [resetText]="ctx.localization.get('columnsReset')"
                 [autoSync]="autoSync"
                 [allowHideAll]="allowHideAll"
                 (apply)="onApply($event)"
-                (columnChange)="onChange($event)">
+                (columnChange)="onChange($event)"
+                (keydown.shift.tab)="onShiftTab($event)">
             </kendo-grid-columnlist>
         </ng-template>
     `
@@ -24232,9 +24537,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], allowHideAll: [{
                 type: Input
+            }], anchor: [{
+                type: ViewChild,
+                args: ['anchor']
+            }], columnList: [{
+                type: ViewChild,
+                args: ['columnList']
             }] } });
 
 const COMPONENTS = [
+    ColumnMenuChooserItemCheckedDirective,
     ColumnListComponent,
     ColumnChooserComponent,
     ColumnMenuChooserComponent,
@@ -24277,7 +24589,8 @@ 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,
@@ -24292,7 +24605,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,