@progress/kendo-angular-dropdowns 16.3.0-develop.1 → 16.3.0-develop.11

package/common/util.d.ts

@@ -210,7 +210,7 @@ export declare const updateActionSheetAdaptiveAppearance: (actionSheet: ActionSh
 /**
  * @hidden
  */
-export declare const setListBoxAriaLabelLebBy: (optionsList: any, element: ElementRef, renderer: Renderer2) => void;
+export declare const setListBoxAriaLabelledBy: (optionsList: any, element: ElementRef, renderer: Renderer2) => void;
 /**
  * @hidden
  */

package/dropdowntrees/dropdowntree.component.d.ts

@@ -507,7 +507,7 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
     /**
      * @hidden
      */
-    handleKeydown(event: any): void;
+    handleKeydown(event: any, input?: HTMLInputElement): void;
     /**
      * Focuses a specific item of the DropDownTree based on a provided index in the format of `1_1`.
      * The targeted item should be expanded in order for it to be focused.

package/esm2020/autocomplete/autocomplete.component.mjs

@@ -17,7 +17,7 @@ import { SelectionService } from '../common/selection/selection.service';
 import { NavigationService } from '../common/navigation/navigation.service';
 import { DisabledItemsService } from '../common/disabled-items/disabled-items.service';
 import { Subject, Subscription, merge } from 'rxjs';
-import { isPresent, guid, getter, isUntouched, noop, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, windowSize, isTruthy, setListBoxAriaLabelLebBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance, animationDuration } from '../common/util';
+import { isPresent, guid, getter, isUntouched, noop, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, windowSize, isTruthy, setListBoxAriaLabelledBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance, animationDuration } from '../common/util';
 import { NavigationAction } from '../common/navigation/navigation-action';
 import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
 import { PreventableEvent } from '../common/models/preventable-event';
@@ -1033,7 +1033,7 @@ export class AutoCompleteComponent {
         }
         this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -1117,7 +1117,7 @@ export class AutoCompleteComponent {
     openActionSheet() {
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
-        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
         this.title = setActionSheetTitle(this.searchbar.input, this.title);
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();

package/esm2020/comboboxes/combobox.component.mjs

@@ -19,7 +19,7 @@ import { DisabledItemsService } from '../common/disabled-items/disabled-items.se
 import { merge, of, Subject, Subscription } from 'rxjs';
 import { catchError, filter, map, partition, tap, throttleTime } from 'rxjs/operators';
 import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged, SuffixTemplateDirective, PrefixTemplateDirective, isControlRequired, MultiTabStop } from '@progress/kendo-angular-common';
-import { isPresent, guid, getter, isEmptyString, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, windowSize, setListBoxAriaLabelLebBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance, animationDuration } from '../common/util';
+import { isPresent, guid, getter, isEmptyString, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, windowSize, setListBoxAriaLabelledBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance, animationDuration } from '../common/util';
 import { NavigationAction } from '../common/navigation/navigation-action';
 import { Keys } from '@progress/kendo-angular-common';
 import { PreventableEvent } from '../common/models/preventable-event';
@@ -1421,14 +1421,9 @@ export class ComboBoxComponent extends MultiTabStop {
             this.renderer.setAttribute(popupWrapper, 'role', 'region');
             this.renderer.setAttribute(popupWrapper, 'aria-label', this.messageFor('popupLabel'));
         }
-        const listBox = this.popupRef.popupElement.querySelector('ul');
-        const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby');
-        if (ariaLabel) {
-            listBox.setAttribute('aria-labelledby', ariaLabel);
-        }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -1522,7 +1517,7 @@ export class ComboBoxComponent extends MultiTabStop {
         this.windowSize = windowSize();
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
-        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
         this.title = setActionSheetTitle(this.searchbar.input, this.title);
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();

package/esm2020/comboboxes/multicolumncombobox.component.mjs

@@ -398,6 +398,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                     [fixedGroupTemplate]="fixedGroupTemplate"
                     [height]="listHeight"
                     [show]="isOpen"
+                    [id]="listBoxId"
                     [virtual]="virtual"
                     [type]="'dropdowngrid'"
                     [showStickyHeader]="showStickyHeader"
@@ -682,6 +683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     [fixedGroupTemplate]="fixedGroupTemplate"
                     [height]="listHeight"
                     [show]="isOpen"
+                    [id]="listBoxId"
                     [virtual]="virtual"
                     [type]="'dropdowngrid'"
                     [showStickyHeader]="showStickyHeader"

package/esm2020/common/navigation/navigation.service.mjs

@@ -57,14 +57,22 @@ export class NavigationService {
         const altKey = args.originalEvent.altKey;
         const shiftKey = args.originalEvent.shiftKey;
         const ctrlKey = args.originalEvent.ctrlKey || args.originalEvent.metaKey;
+        const openOnSpace = args.openOnSpace;
+        const closeOnSpace = args.closeOnSpace;
         let index;
         let action = NavigationAction.Undefined;
         if (altKey && keyCode === Keys.ArrowDown) {
             action = NavigationAction.Open;
         }
+        else if (openOnSpace && keyCode === Keys.Space) {
+            action = NavigationAction.Open;
+        }
         else if (altKey && keyCode === Keys.ArrowUp) {
             action = NavigationAction.Close;
         }
+        else if (closeOnSpace && keyCode === Keys.Space) {
+            action = NavigationAction.Close;
+        }
         else if (shiftKey && keyCode === Keys.ArrowUp) {
             action = NavigationAction.SelectPrevious;
         }

package/esm2020/common/util.mjs

@@ -408,9 +408,9 @@ export const updateActionSheetAdaptiveAppearance = (actionSheet, windowSize, ren
 /**
  * @hidden
  */
-export const setListBoxAriaLabelLebBy = (optionsList, element, renderer) => {
+export const setListBoxAriaLabelledBy = (optionsList, element, renderer) => {
     const listBox = optionsList.wrapper.nativeElement.querySelector('kendo-list ul');
-    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby');
+    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby') || element.nativeElement.getAttribute('data-kendo-label-id');
     if (ariaLabel) {
         renderer.setAttribute(listBox, 'aria-labelledby', ariaLabel);
     }
@@ -419,7 +419,7 @@ export const setListBoxAriaLabelLebBy = (optionsList, element, renderer) => {
  * @hidden
  */
 export const setActionSheetTitle = (element, actionSheetTitle) => {
-    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby');
+    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby') || element.nativeElement.getAttribute('data-kendo-label-id');
     if (!actionSheetTitle && ariaLabel) {
         return document.getElementById(ariaLabel).innerText;
     }

package/esm2020/dropdownlist/dropdownlist.component.mjs

@@ -10,7 +10,7 @@ import { merge, interval, Subscription } from 'rxjs';
 import { concatMap, filter, map, skipWhile, take, takeUntil, tap } from 'rxjs/operators';
 import { isDocumentAvailable, KendoInput, hasObservers, anyChanged, isChanged } from '@progress/kendo-angular-common';
 import { Keys } from '@progress/kendo-angular-common';
-import { isPresent, guid, getter, shuffleData, sameCharsOnly, matchText, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, windowSize, updateActionSheetAdaptiveAppearance, setListBoxAriaLabelLebBy, setActionSheetTitle, animationDuration } from '../common/util';
+import { isPresent, guid, getter, shuffleData, sameCharsOnly, matchText, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, windowSize, updateActionSheetAdaptiveAppearance, setListBoxAriaLabelledBy, setActionSheetTitle, animationDuration } from '../common/util';
 import { SelectionService } from '../common/selection/selection.service';
 import { NavigationService, NavigationEvent } from '../common/navigation/navigation.service';
 import { ItemTemplateDirective } from '../common/templates/item-template.directive';
@@ -621,7 +621,9 @@ export class DropDownListComponent {
             current: focused + offset,
             max: this.dataService.itemsCount - 1,
             min: this.defaultItem ? -1 : 0,
-            originalEvent: eventData
+            originalEvent: eventData,
+            openOnSpace: !this.isOpen,
+            closeOnSpace: this.isOpen && !input && !(event.target instanceof HTMLInputElement)
         });
         const leftRightKeys = (action === NavigationAction.Left) || (action === NavigationAction.Right) && this.leftRightArrowsNavigation;
         if (action !== NavigationAction.Undefined &&
@@ -952,7 +954,7 @@ export class DropDownListComponent {
         }
         this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelLebBy(this.optionsList, this.wrapper, this.renderer);
+            setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -1378,7 +1380,7 @@ export class DropDownListComponent {
         this.windowSize = windowSize();
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
-        setListBoxAriaLabelLebBy(this.optionsList, this.wrapper, this.renderer);
+        setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
         this.title = setActionSheetTitle(this.wrapper, this.title);
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();

package/esm2020/dropdowntrees/dropdowntree.component.mjs

@@ -721,7 +721,7 @@ export class DropDownTreeComponent {
     /**
      * @hidden
      */
-    handleKeydown(event) {
+    handleKeydown(event, input) {
         if (this.disabled || this.readonly) {
             return;
         }
@@ -734,7 +734,9 @@ export class DropDownTreeComponent {
         }
         const eventData = event;
         this.navigationService.process({
-            originalEvent: eventData
+            originalEvent: eventData,
+            openOnSpace: !this.isOpen,
+            closeOnSpace: this.isOpen && !input && !(event.target instanceof HTMLInputElement)
         });
     }
     /**
@@ -1376,8 +1378,9 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                         #filterInput
                         (input)="handleFilterInputChange($event.target)"
                         [filterInput]="filterable && !touchEnabled"
-                        (keydown.arrowdown)="handleKeydown($event)"
-                        (keydown.alt.arrowup)="handleKeydown($event)"
+                        (keydown.arrowdown)="handleKeydown($event, filterInput)"
+                        (keydown.alt.arrowup)="handleKeydown($event, filterInput)"
+                        (keydown.escape)="handleKeydown($event, filterInput)"
                         [attr.aria-label]="messageFor('filterInputLabel')"
                         [value]="filter"
                         class="k-input-inner"
@@ -1581,8 +1584,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         #filterInput
                         (input)="handleFilterInputChange($event.target)"
                         [filterInput]="filterable && !touchEnabled"
-                        (keydown.arrowdown)="handleKeydown($event)"
-                        (keydown.alt.arrowup)="handleKeydown($event)"
+                        (keydown.arrowdown)="handleKeydown($event, filterInput)"
+                        (keydown.alt.arrowup)="handleKeydown($event, filterInput)"
+                        (keydown.escape)="handleKeydown($event, filterInput)"
                         [attr.aria-label]="messageFor('filterInputLabel')"
                         [value]="filter"
                         class="k-input-inner"

package/esm2020/dropdowntrees/multiselecttree.component.mjs

@@ -379,7 +379,9 @@ export class MultiSelectTreeComponent {
         }
         const eventData = event;
         const action = this.navigationService.process({
-            originalEvent: eventData
+            originalEvent: eventData,
+            openOnSpace: !this.isOpen,
+            closeOnSpace: false
         });
         if (action === NavigationAction.Open) {
             eventData.preventDefault();

package/esm2020/multiselect/multiselect.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { guid, isPresent, isArray, isObjectArray, resolveAllValues, selectedIndices, getter, isNumber, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, animationDuration, isTruthy, windowSize, setListBoxAriaLabelLebBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance } from '../common/util';
+import { guid, isPresent, isArray, isObjectArray, resolveAllValues, selectedIndices, getter, isNumber, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, animationDuration, isTruthy, windowSize, setListBoxAriaLabelledBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance } from '../common/util';
 import { SearchBarComponent } from '../common/searchbar.component';
 import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Optional, Inject, Injector } from '@angular/core';
 import { Subscription, Subject, of, merge } from 'rxjs';
@@ -1654,13 +1654,9 @@ export class MultiSelectComponent {
         popupWrapper.style.height = this.height;
         popupWrapper.setAttribute("dir", this.direction);
         const listBox = popupWrapper.querySelector('ul.k-list-ul');
-        const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby');
-        if (ariaLabel) {
-            listBox.setAttribute('aria-labelledby', ariaLabel);
-        }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -1728,7 +1724,7 @@ export class MultiSelectComponent {
         // Stores the current value state until the user either accepts or cancels it
         this._valueHolder = [...this.value];
         this.cdr.detectChanges();
-        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
         this.title = setActionSheetTitle(this.searchbar.input, this.title);
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1718181592,
-    version: '16.3.0-develop.1',
+    publishDate: 1718784013,
+    version: '16.3.0-develop.11',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/fesm2015/progress-kendo-angular-dropdowns.mjs

@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1718181592,
-    version: '16.3.0-develop.1',
+    publishDate: 1718784013,
+    version: '16.3.0-develop.11',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -447,9 +447,9 @@ const updateActionSheetAdaptiveAppearance = (actionSheet, windowSize, renderer)
 /**
  * @hidden
  */
-const setListBoxAriaLabelLebBy = (optionsList, element, renderer) => {
+const setListBoxAriaLabelledBy = (optionsList, element, renderer) => {
     const listBox = optionsList.wrapper.nativeElement.querySelector('kendo-list ul');
-    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby');
+    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby') || element.nativeElement.getAttribute('data-kendo-label-id');
     if (ariaLabel) {
         renderer.setAttribute(listBox, 'aria-labelledby', ariaLabel);
     }
@@ -458,7 +458,7 @@ const setListBoxAriaLabelLebBy = (optionsList, element, renderer) => {
  * @hidden
  */
 const setActionSheetTitle = (element, actionSheetTitle) => {
-    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby');
+    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby') || element.nativeElement.getAttribute('data-kendo-label-id');
     if (!actionSheetTitle && ariaLabel) {
         return document.getElementById(ariaLabel).innerText;
     }
@@ -1532,14 +1532,22 @@ class NavigationService {
         const altKey = args.originalEvent.altKey;
         const shiftKey = args.originalEvent.shiftKey;
         const ctrlKey = args.originalEvent.ctrlKey || args.originalEvent.metaKey;
+        const openOnSpace = args.openOnSpace;
+        const closeOnSpace = args.closeOnSpace;
         let index;
         let action = NavigationAction.Undefined;
         if (altKey && keyCode === Keys.ArrowDown) {
             action = NavigationAction.Open;
         }
+        else if (openOnSpace && keyCode === Keys.Space) {
+            action = NavigationAction.Open;
+        }
         else if (altKey && keyCode === Keys.ArrowUp) {
             action = NavigationAction.Close;
         }
+        else if (closeOnSpace && keyCode === Keys.Space) {
+            action = NavigationAction.Close;
+        }
         else if (shiftKey && keyCode === Keys.ArrowUp) {
             action = NavigationAction.SelectPrevious;
         }
@@ -3957,7 +3965,7 @@ class AutoCompleteComponent {
         }
         this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -4041,7 +4049,7 @@ class AutoCompleteComponent {
     openActionSheet() {
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
-        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
         this.title = setActionSheetTitle(this.searchbar.input, this.title);
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();
@@ -5947,14 +5955,9 @@ class ComboBoxComponent extends MultiTabStop {
             this.renderer.setAttribute(popupWrapper, 'role', 'region');
             this.renderer.setAttribute(popupWrapper, 'aria-label', this.messageFor('popupLabel'));
         }
-        const listBox = this.popupRef.popupElement.querySelector('ul');
-        const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby');
-        if (ariaLabel) {
-            listBox.setAttribute('aria-labelledby', ariaLabel);
-        }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -6048,7 +6051,7 @@ class ComboBoxComponent extends MultiTabStop {
         this.windowSize = windowSize();
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
-        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
         this.title = setActionSheetTitle(this.searchbar.input, this.title);
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();
@@ -7233,7 +7236,9 @@ class DropDownListComponent {
             current: focused + offset,
             max: this.dataService.itemsCount - 1,
             min: this.defaultItem ? -1 : 0,
-            originalEvent: eventData
+            originalEvent: eventData,
+            openOnSpace: !this.isOpen,
+            closeOnSpace: this.isOpen && !input && !(event.target instanceof HTMLInputElement)
         });
         const leftRightKeys = (action === NavigationAction.Left) || (action === NavigationAction.Right) && this.leftRightArrowsNavigation;
         if (action !== NavigationAction.Undefined &&
@@ -7564,7 +7569,7 @@ class DropDownListComponent {
         }
         this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelLebBy(this.optionsList, this.wrapper, this.renderer);
+            setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -7991,7 +7996,7 @@ class DropDownListComponent {
         this.windowSize = windowSize();
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
-        setListBoxAriaLabelLebBy(this.optionsList, this.wrapper, this.renderer);
+        setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
         this.title = setActionSheetTitle(this.wrapper, this.title);
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();
@@ -10586,13 +10591,9 @@ class MultiSelectComponent {
         popupWrapper.style.height = this.height;
         popupWrapper.setAttribute("dir", this.direction);
         const listBox = popupWrapper.querySelector('ul.k-list-ul');
-        const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby');
-        if (ariaLabel) {
-            listBox.setAttribute('aria-labelledby', ariaLabel);
-        }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -10660,7 +10661,7 @@ class MultiSelectComponent {
         // Stores the current value state until the user either accepts or cancels it
         this._valueHolder = [...this.value];
         this.cdr.detectChanges();
-        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
         this.title = setActionSheetTitle(this.searchbar.input, this.title);
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();
@@ -11782,6 +11783,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                     [fixedGroupTemplate]="fixedGroupTemplate"
                     [height]="listHeight"
                     [show]="isOpen"
+                    [id]="listBoxId"
                     [virtual]="virtual"
                     [type]="'dropdowngrid'"
                     [showStickyHeader]="showStickyHeader"
@@ -12066,6 +12068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     [fixedGroupTemplate]="fixedGroupTemplate"
                     [height]="listHeight"
                     [show]="isOpen"
+                    [id]="listBoxId"
                     [virtual]="virtual"
                     [type]="'dropdowngrid'"
                     [showStickyHeader]="showStickyHeader"
@@ -12841,7 +12844,7 @@ class DropDownTreeComponent {
     /**
      * @hidden
      */
-    handleKeydown(event) {
+    handleKeydown(event, input) {
         var _a;
         if (this.disabled || this.readonly) {
             return;
@@ -12855,7 +12858,9 @@ class DropDownTreeComponent {
         }
         const eventData = event;
         this.navigationService.process({
-            originalEvent: eventData
+            originalEvent: eventData,
+            openOnSpace: !this.isOpen,
+            closeOnSpace: this.isOpen && !input && !(event.target instanceof HTMLInputElement)
         });
     }
     /**
@@ -13497,8 +13502,9 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                         #filterInput
                         (input)="handleFilterInputChange($event.target)"
                         [filterInput]="filterable && !touchEnabled"
-                        (keydown.arrowdown)="handleKeydown($event)"
-                        (keydown.alt.arrowup)="handleKeydown($event)"
+                        (keydown.arrowdown)="handleKeydown($event, filterInput)"
+                        (keydown.alt.arrowup)="handleKeydown($event, filterInput)"
+                        (keydown.escape)="handleKeydown($event, filterInput)"
                         [attr.aria-label]="messageFor('filterInputLabel')"
                         [value]="filter"
                         class="k-input-inner"
@@ -13702,8 +13708,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         #filterInput
                         (input)="handleFilterInputChange($event.target)"
                         [filterInput]="filterable && !touchEnabled"
-                        (keydown.arrowdown)="handleKeydown($event)"
-                        (keydown.alt.arrowup)="handleKeydown($event)"
+                        (keydown.arrowdown)="handleKeydown($event, filterInput)"
+                        (keydown.alt.arrowup)="handleKeydown($event, filterInput)"
+                        (keydown.escape)="handleKeydown($event, filterInput)"
                         [attr.aria-label]="messageFor('filterInputLabel')"
                         [value]="filter"
                         class="k-input-inner"
@@ -14713,7 +14720,9 @@ class MultiSelectTreeComponent {
         }
         const eventData = event;
         const action = this.navigationService.process({
-            originalEvent: eventData
+            originalEvent: eventData,
+            openOnSpace: !this.isOpen,
+            closeOnSpace: false
         });
         if (action === NavigationAction.Open) {
             eventData.preventDefault();

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

@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1718181592,
-    version: '16.3.0-develop.1',
+    publishDate: 1718784013,
+    version: '16.3.0-develop.11',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -447,9 +447,9 @@ const updateActionSheetAdaptiveAppearance = (actionSheet, windowSize, renderer)
 /**
  * @hidden
  */
-const setListBoxAriaLabelLebBy = (optionsList, element, renderer) => {
+const setListBoxAriaLabelledBy = (optionsList, element, renderer) => {
     const listBox = optionsList.wrapper.nativeElement.querySelector('kendo-list ul');
-    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby');
+    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby') || element.nativeElement.getAttribute('data-kendo-label-id');
     if (ariaLabel) {
         renderer.setAttribute(listBox, 'aria-labelledby', ariaLabel);
     }
@@ -458,7 +458,7 @@ const setListBoxAriaLabelLebBy = (optionsList, element, renderer) => {
  * @hidden
  */
 const setActionSheetTitle = (element, actionSheetTitle) => {
-    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby');
+    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby') || element.nativeElement.getAttribute('data-kendo-label-id');
     if (!actionSheetTitle && ariaLabel) {
         return document.getElementById(ariaLabel).innerText;
     }
@@ -1531,14 +1531,22 @@ class NavigationService {
         const altKey = args.originalEvent.altKey;
         const shiftKey = args.originalEvent.shiftKey;
         const ctrlKey = args.originalEvent.ctrlKey || args.originalEvent.metaKey;
+        const openOnSpace = args.openOnSpace;
+        const closeOnSpace = args.closeOnSpace;
         let index;
         let action = NavigationAction.Undefined;
         if (altKey && keyCode === Keys.ArrowDown) {
             action = NavigationAction.Open;
         }
+        else if (openOnSpace && keyCode === Keys.Space) {
+            action = NavigationAction.Open;
+        }
         else if (altKey && keyCode === Keys.ArrowUp) {
             action = NavigationAction.Close;
         }
+        else if (closeOnSpace && keyCode === Keys.Space) {
+            action = NavigationAction.Close;
+        }
         else if (shiftKey && keyCode === Keys.ArrowUp) {
             action = NavigationAction.SelectPrevious;
         }
@@ -3951,7 +3959,7 @@ class AutoCompleteComponent {
         }
         this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -4035,7 +4043,7 @@ class AutoCompleteComponent {
     openActionSheet() {
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
-        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
         this.title = setActionSheetTitle(this.searchbar.input, this.title);
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();
@@ -5935,14 +5943,9 @@ class ComboBoxComponent extends MultiTabStop {
             this.renderer.setAttribute(popupWrapper, 'role', 'region');
             this.renderer.setAttribute(popupWrapper, 'aria-label', this.messageFor('popupLabel'));
         }
-        const listBox = this.popupRef.popupElement.querySelector('ul');
-        const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby');
-        if (ariaLabel) {
-            listBox.setAttribute('aria-labelledby', ariaLabel);
-        }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -6036,7 +6039,7 @@ class ComboBoxComponent extends MultiTabStop {
         this.windowSize = windowSize();
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
-        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
         this.title = setActionSheetTitle(this.searchbar.input, this.title);
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();
@@ -7215,7 +7218,9 @@ class DropDownListComponent {
             current: focused + offset,
             max: this.dataService.itemsCount - 1,
             min: this.defaultItem ? -1 : 0,
-            originalEvent: eventData
+            originalEvent: eventData,
+            openOnSpace: !this.isOpen,
+            closeOnSpace: this.isOpen && !input && !(event.target instanceof HTMLInputElement)
         });
         const leftRightKeys = (action === NavigationAction.Left) || (action === NavigationAction.Right) && this.leftRightArrowsNavigation;
         if (action !== NavigationAction.Undefined &&
@@ -7546,7 +7551,7 @@ class DropDownListComponent {
         }
         this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelLebBy(this.optionsList, this.wrapper, this.renderer);
+            setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -7972,7 +7977,7 @@ class DropDownListComponent {
         this.windowSize = windowSize();
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
-        setListBoxAriaLabelLebBy(this.optionsList, this.wrapper, this.renderer);
+        setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
         this.title = setActionSheetTitle(this.wrapper, this.title);
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();
@@ -10561,13 +10566,9 @@ class MultiSelectComponent {
         popupWrapper.style.height = this.height;
         popupWrapper.setAttribute("dir", this.direction);
         const listBox = popupWrapper.querySelector('ul.k-list-ul');
-        const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby');
-        if (ariaLabel) {
-            listBox.setAttribute('aria-labelledby', ariaLabel);
-        }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -10635,7 +10636,7 @@ class MultiSelectComponent {
         // Stores the current value state until the user either accepts or cancels it
         this._valueHolder = [...this.value];
         this.cdr.detectChanges();
-        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
         this.title = setActionSheetTitle(this.searchbar.input, this.title);
         updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();
@@ -11755,6 +11756,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                     [fixedGroupTemplate]="fixedGroupTemplate"
                     [height]="listHeight"
                     [show]="isOpen"
+                    [id]="listBoxId"
                     [virtual]="virtual"
                     [type]="'dropdowngrid'"
                     [showStickyHeader]="showStickyHeader"
@@ -12039,6 +12041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     [fixedGroupTemplate]="fixedGroupTemplate"
                     [height]="listHeight"
                     [show]="isOpen"
+                    [id]="listBoxId"
                     [virtual]="virtual"
                     [type]="'dropdowngrid'"
                     [showStickyHeader]="showStickyHeader"
@@ -12808,7 +12811,7 @@ class DropDownTreeComponent {
     /**
      * @hidden
      */
-    handleKeydown(event) {
+    handleKeydown(event, input) {
         if (this.disabled || this.readonly) {
             return;
         }
@@ -12821,7 +12824,9 @@ class DropDownTreeComponent {
         }
         const eventData = event;
         this.navigationService.process({
-            originalEvent: eventData
+            originalEvent: eventData,
+            openOnSpace: !this.isOpen,
+            closeOnSpace: this.isOpen && !input && !(event.target instanceof HTMLInputElement)
         });
     }
     /**
@@ -13463,8 +13468,9 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                         #filterInput
                         (input)="handleFilterInputChange($event.target)"
                         [filterInput]="filterable && !touchEnabled"
-                        (keydown.arrowdown)="handleKeydown($event)"
-                        (keydown.alt.arrowup)="handleKeydown($event)"
+                        (keydown.arrowdown)="handleKeydown($event, filterInput)"
+                        (keydown.alt.arrowup)="handleKeydown($event, filterInput)"
+                        (keydown.escape)="handleKeydown($event, filterInput)"
                         [attr.aria-label]="messageFor('filterInputLabel')"
                         [value]="filter"
                         class="k-input-inner"
@@ -13668,8 +13674,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         #filterInput
                         (input)="handleFilterInputChange($event.target)"
                         [filterInput]="filterable && !touchEnabled"
-                        (keydown.arrowdown)="handleKeydown($event)"
-                        (keydown.alt.arrowup)="handleKeydown($event)"
+                        (keydown.arrowdown)="handleKeydown($event, filterInput)"
+                        (keydown.alt.arrowup)="handleKeydown($event, filterInput)"
+                        (keydown.escape)="handleKeydown($event, filterInput)"
                         [attr.aria-label]="messageFor('filterInputLabel')"
                         [value]="filter"
                         class="k-input-inner"
@@ -14676,7 +14683,9 @@ class MultiSelectTreeComponent {
         }
         const eventData = event;
         const action = this.navigationService.process({
-            originalEvent: eventData
+            originalEvent: eventData,
+            openOnSpace: !this.isOpen,
+            closeOnSpace: false
         });
         if (action === NavigationAction.Open) {
             eventData.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dropdowns",
-  "version": "16.3.0-develop.1",
+  "version": "16.3.0-develop.11",
   "description": "A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree ",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -25,17 +25,17 @@
     "@angular/forms": "15 - 18",
     "@angular/platform-browser": "15 - 18",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "16.3.0-develop.1",
-    "@progress/kendo-angular-l10n": "16.3.0-develop.1",
-    "@progress/kendo-angular-navigation": "16.3.0-develop.1",
-    "@progress/kendo-angular-popup": "16.3.0-develop.1",
-    "@progress/kendo-angular-icons": "16.3.0-develop.1",
-    "@progress/kendo-angular-treeview": "16.3.0-develop.1",
+    "@progress/kendo-angular-common": "16.3.0-develop.11",
+    "@progress/kendo-angular-l10n": "16.3.0-develop.11",
+    "@progress/kendo-angular-navigation": "16.3.0-develop.11",
+    "@progress/kendo-angular-popup": "16.3.0-develop.11",
+    "@progress/kendo-angular-icons": "16.3.0-develop.11",
+    "@progress/kendo-angular-treeview": "16.3.0-develop.11",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "16.3.0-develop.1",
+    "@progress/kendo-angular-schematics": "16.3.0-develop.11",
     "@progress/kendo-common": "^0.2.1"
   },
   "schematics": "./schematics/collection.json",

package/schematics/ngAdd/index.js

@@ -4,9 +4,9 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'DropDownsModule', package: 'dropdowns', peerDependencies: {
             // peers of the treeview
-            '@progress/kendo-angular-inputs': '16.3.0-develop.1',
+            '@progress/kendo-angular-inputs': '16.3.0-develop.11',
             // peers of inputs
-            '@progress/kendo-angular-intl': '16.3.0-develop.1',
+            '@progress/kendo-angular-intl': '16.3.0-develop.11',
             '@progress/kendo-drawing': '^1.17.2',
             // Peer dependency of icons
             '@progress/kendo-svg-icons': '^3.0.0'