@progress/kendo-angular-dropdowns 16.3.0-develop.6 → 16.3.0-develop.8

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/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/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';
@@ -952,7 +952,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 +1378,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/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: 1718201909,
-    version: '16.3.0-develop.6',
+    publishDate: 1718627774,
+    version: '16.3.0-develop.8',
     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: 1718201909,
-    version: '16.3.0-develop.6',
+    publishDate: 1718627774,
+    version: '16.3.0-develop.8',
     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;
     }
@@ -3957,7 +3957,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 +4041,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 +5947,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 +6043,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();
@@ -7564,7 +7559,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 +7986,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 +10581,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 +10651,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 +11773,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                     [fixedGroupTemplate]="fixedGroupTemplate"
                     [height]="listHeight"
                     [show]="isOpen"
+                    [id]="listBoxId"
                     [virtual]="virtual"
                     [type]="'dropdowngrid'"
                     [showStickyHeader]="showStickyHeader"
@@ -12066,6 +12058,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/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: 1718201909,
-    version: '16.3.0-develop.6',
+    publishDate: 1718627774,
+    version: '16.3.0-develop.8',
     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;
     }
@@ -3951,7 +3951,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 +4035,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 +5935,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 +6031,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();
@@ -7546,7 +7541,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 +7967,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 +10556,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 +10626,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 +11746,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                     [fixedGroupTemplate]="fixedGroupTemplate"
                     [height]="listHeight"
                     [show]="isOpen"
+                    [id]="listBoxId"
                     [virtual]="virtual"
                     [type]="'dropdowngrid'"
                     [showStickyHeader]="showStickyHeader"
@@ -12039,6 +12031,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dropdowns",
-  "version": "16.3.0-develop.6",
+  "version": "16.3.0-develop.8",
   "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.6",
-    "@progress/kendo-angular-l10n": "16.3.0-develop.6",
-    "@progress/kendo-angular-navigation": "16.3.0-develop.6",
-    "@progress/kendo-angular-popup": "16.3.0-develop.6",
-    "@progress/kendo-angular-icons": "16.3.0-develop.6",
-    "@progress/kendo-angular-treeview": "16.3.0-develop.6",
+    "@progress/kendo-angular-common": "16.3.0-develop.8",
+    "@progress/kendo-angular-l10n": "16.3.0-develop.8",
+    "@progress/kendo-angular-navigation": "16.3.0-develop.8",
+    "@progress/kendo-angular-popup": "16.3.0-develop.8",
+    "@progress/kendo-angular-icons": "16.3.0-develop.8",
+    "@progress/kendo-angular-treeview": "16.3.0-develop.8",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "16.3.0-develop.6",
+    "@progress/kendo-angular-schematics": "16.3.0-develop.8",
     "@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.6',
+            '@progress/kendo-angular-inputs': '16.3.0-develop.8',
             // peers of inputs
-            '@progress/kendo-angular-intl': '16.3.0-develop.6',
+            '@progress/kendo-angular-intl': '16.3.0-develop.8',
             '@progress/kendo-drawing': '^1.17.2',
             // Peer dependency of icons
             '@progress/kendo-svg-icons': '^3.0.0'