@progress/kendo-angular-dropdowns 16.7.1-develop.4 → 16.7.1-develop.6

package/dropdownlist/dropdownlist.component.d.ts

@@ -106,9 +106,6 @@ export declare class DropDownListComponent implements ControlValueAccessor, Afte
     get width(): any;
     get height(): any;
     get widgetTabIndex(): number;
-    get ariaExpanded(): boolean;
-    listBoxId: string;
-    get ariaControls(): string;
     get ariaActivedescendant(): string;
     get appendTo(): ViewContainerRef;
     /**
@@ -400,9 +397,7 @@ export declare class DropDownListComponent implements ControlValueAccessor, Afte
     get isBusy(): boolean;
     role: string;
     haspopup: string;
-    get isAriaExpanded(): boolean;
     get hostAriaInvalid(): string;
-    get hostAriaActivedescendant(): string;
     /**
      * @hidden
      */
@@ -419,6 +414,7 @@ export declare class DropDownListComponent implements ControlValueAccessor, Afte
     optionPrefix: string;
     valueLabelId: string;
     filterText: string;
+    listBoxId: string;
     private subs;
     private _isFocused;
     set isFocused(isFocused: boolean);
@@ -568,6 +564,7 @@ export declare class DropDownListComponent implements ControlValueAccessor, Afte
     private resetSelection;
     private onSelectionChange;
     private subscribeEvents;
+    private setAriaactivedescendant;
     private subscribeTouchEvents;
     private subscribeFocusEvents;
     private unSubscribeFocusEvents;

package/dropdowntrees/multiselecttree.component.d.ts

@@ -63,7 +63,6 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     hostClasses: boolean;
     get isDisabled(): boolean;
     treeViewId: string;
-    get hostAriaControls(): string;
     get hostAriaAutocomplete(): string;
     get isLoading(): boolean;
     get hostAriaInvalid(): string;
@@ -72,7 +71,6 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     direction: Direction;
     get hostTabIndex(): number;
     role: string;
-    get isAriaExpanded(): boolean;
     ariaHasPopup: string;
     get isReadonly(): string;
     get ariaDescribedBy(): string;

package/esm2020/dropdownlist/dropdownlist.component.mjs

@@ -106,7 +106,6 @@ export class DropDownListComponent {
          * @hidden
          */
         this.caretAltDownSVGIcon = caretAltDownIcon;
-        this.listBoxId = `k-${guid()}`;
         /**
          * Shows or hides the current group sticky header when using grouped data.
          * By default the sticky header is displayed ([see example]({% slug grouping_autocomplete %}#toc-sticky-header)).
@@ -214,6 +213,7 @@ export class DropDownListComponent {
         this.groupIndices = [];
         this.optionPrefix = `k-${guid()}`;
         this.filterText = '';
+        this.listBoxId = `k-${guid()}`;
         this.subs = new Subscription();
         this._isFocused = false;
         this.onTouchedCallback = (_) => { };
@@ -268,15 +268,6 @@ export class DropDownListComponent {
         const defaultTabIndex = 0;
         return !isNaN(providedTabIndex) ? providedTabIndex : defaultTabIndex;
     }
-    get ariaExpanded() {
-        return this.isOpen;
-    }
-    get ariaControls() {
-        if (!this.isOpen) {
-            return;
-        }
-        return this.listBoxId;
-    }
     get ariaActivedescendant() {
         if (!isPresent(this.dataItem) || !this.isOpen) {
             return;
@@ -577,15 +568,9 @@ export class DropDownListComponent {
     get isBusy() {
         return this.isLoading;
     }
-    get isAriaExpanded() {
-        return this.ariaExpanded;
-    }
     get hostAriaInvalid() {
         return this.formControl ? this.formControl?.invalid.toString() : null;
     }
-    get hostAriaActivedescendant() {
-        return this.ariaActivedescendant;
-    }
     /**
      * @hidden
      */
@@ -667,6 +652,10 @@ export class DropDownListComponent {
     }
     ngOnInit() {
         this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
+        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
+        if (this.ariaActivedescendant) {
+            this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-activedescendant', this.ariaActivedescendant);
+        }
         this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
@@ -934,6 +923,9 @@ export class DropDownListComponent {
             popupClass: this.listContainerClasses,
             positionMode: 'absolute'
         });
+        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
+        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
+        this.setAriaactivedescendant();
         const popupWrapper = this.popupRef.popupElement;
         const { min, max } = this.width;
         popupWrapper.addEventListener('mousedown', this.popupMouseDownHandler);
@@ -966,6 +958,9 @@ export class DropDownListComponent {
     }
     destroyPopup() {
         if (this.popupRef) {
+            this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-activedescendant');
             this.popupRef.popupElement
                 .removeEventListener('mousedown', this.popupMouseDownHandler);
             this.popupRef.close();
@@ -994,6 +989,7 @@ export class DropDownListComponent {
         // reassigning the value label ID as aria-deascibedby forces firefox/nvda, forefox/jaws to read
         // the new value when the popup is closed and the value is changed with the arrow keys (up/down)
         this.assignAriaDescribedBy();
+        this.setAriaactivedescendant();
     }
     subscribeEvents() {
         if (!isDocumentAvailable()) {
@@ -1049,6 +1045,15 @@ export class DropDownListComponent {
                 .subscribe(() => this.componentBlur()));
         });
     }
+    setAriaactivedescendant() {
+        if (this.ariaActivedescendant) {
+            this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-activedescendant', this.ariaActivedescendant);
+            const searchInput = this.popupRef.popupElement.querySelector('input[role="searchbox"]');
+            if (searchInput) {
+                this.renderer.setAttribute(searchInput, 'aria-activedescendant', this.ariaActivedescendant);
+            }
+        }
+    }
     subscribeTouchEvents() {
         if (!isDocumentAvailable() || !this.touchEnabled) {
             return;
@@ -1185,6 +1190,10 @@ export class DropDownListComponent {
             }
             else {
                 this.togglePopup(false);
+                //this is needed for Ang 18 not to throw ng0100 error when closing the popup
+                //the component could be refactored using kendoDropDownSharedEvents directive
+                //once we are able to debug against Angular 18
+                this.cdr.markForCheck();
             }
         }
     }
@@ -1391,7 +1400,7 @@ export class DropDownListComponent {
     }
 }
 DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "attr.aria-controls": "this.ariaControls", "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-activedescendant": "this.hostAriaActivedescendant" } }, providers: [
+DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-invalid": "this.hostAriaInvalid" } }, providers: [
         DROPDOWNLIST_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -1491,8 +1500,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                             role="searchbox"
                             aria-autocomplete="list"
                             aria-haspopup="listbox"
-                            [attr.aria-controls]="isOpen ? ariaControls : undefined"
-                            [attr.aria-activedescendant]="ariaActivedescendant"
+                            [attr.aria-controls]="listBoxId"
                             tabindex="-1"
                             [filterInput]="isFocused && !touchEnabled"
                             [attr.aria-label]="messageFor('filterInputLabel')"
@@ -1684,8 +1692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             role="searchbox"
                             aria-autocomplete="list"
                             aria-haspopup="listbox"
-                            [attr.aria-controls]="isOpen ? ariaControls : undefined"
-                            [attr.aria-activedescendant]="ariaActivedescendant"
+                            [attr.aria-controls]="listBoxId"
                             tabindex="-1"
                             [filterInput]="isFocused && !touchEnabled"
                             [attr.aria-label]="messageFor('filterInputLabel')"
@@ -1779,9 +1786,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], responsiveRendererComponent: [{
                 type: ViewChild,
                 args: [ResponsiveRendererComponent]
-            }], ariaControls: [{
-                type: HostBinding,
-                args: ['attr.aria-controls']
             }], showStickyHeader: [{
                 type: Input
             }], icon: [{
@@ -1934,15 +1938,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], haspopup: [{
                 type: HostBinding,
                 args: ['attr.aria-haspopup']
-            }], isAriaExpanded: [{
-                type: HostBinding,
-                args: ['attr.aria-expanded']
             }], hostAriaInvalid: [{
                 type: HostBinding,
                 args: ['attr.aria-invalid']
-            }], hostAriaActivedescendant: [{
-                type: HostBinding,
-                args: ['attr.aria-activedescendant']
             }], keydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]

package/esm2020/dropdowntrees/multiselecttree.component.mjs

@@ -277,9 +277,6 @@ export class MultiSelectTreeComponent {
     get isDisabled() {
         return this.disabled;
     }
-    get hostAriaControls() {
-        return this.isOpen ? this.treeViewId : null;
-    }
     get hostAriaAutocomplete() {
         return this.filterable ? 'list' : null;
     }
@@ -298,9 +295,6 @@ export class MultiSelectTreeComponent {
     get hostTabIndex() {
         return this.tabindex;
     }
-    get isAriaExpanded() {
-        return this.isOpen;
-    }
     get isReadonly() {
         return this.readonly ? '' : null;
     }
@@ -958,6 +952,10 @@ export class MultiSelectTreeComponent {
             }
             this.isFocused = false;
             this.togglePopup(false);
+            //this is needed for Ang 18 not to throw ng0100 error when closing the popup
+            //the component could be refactored using kendoDropDownSharedEvents directive
+            //once we are able to debug against Angular 18
+            this.cdr.markForCheck();
             if (hasObservers(this.onBlur) ||
                 isUntouched(this.wrapper.nativeElement) ||
                 this.formControl?.updateOn === 'blur') {
@@ -1228,6 +1226,7 @@ export class MultiSelectTreeComponent {
         popupWrapper.style.minWidth = min;
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.height;
+        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.treeViewId);
         this.renderer.setAttribute(popupWrapper, 'dir', this.direction);
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
         this.popupRef.popupOpen.subscribe(() => {
@@ -1251,6 +1250,7 @@ export class MultiSelectTreeComponent {
             this.popupRef.close();
             this.popupRef = null;
             this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
             if (this.filter !== "") {
                 this.filter = "";
                 this.allNodesHidden = false;
@@ -1571,7 +1571,7 @@ export class MultiSelectTreeComponent {
     }
 }
 MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.Renderer2 }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i4.MultiSelectTreeLookupService }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselecttree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
+MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselecttree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
         LocalizationService,
         NavigationService,
         DataService,
@@ -1715,9 +1715,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
                         (keydown)="handleKeydown($event, filterInput)"
                         [value]="filter"
                         class="k-input-inner"
-                        role="textbox"
-                        aria-haspopup="true"
-                        aria-expanded="false"
+                        role="searchbox"
                         tabindex="0"
                         aria-disabled="false"
                         aria-readonly="false"
@@ -1972,9 +1970,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         (keydown)="handleKeydown($event, filterInput)"
                         [value]="filter"
                         class="k-input-inner"
-                        role="textbox"
-                        aria-haspopup="true"
-                        aria-expanded="false"
+                        role="searchbox"
                         tabindex="0"
                         aria-disabled="false"
                         aria-readonly="false"
@@ -2094,9 +2090,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }, {
                 type: HostBinding,
                 args: ['attr.aria-disabled']
-            }], hostAriaControls: [{
-                type: HostBinding,
-                args: ['attr.aria-controls']
             }], hostAriaAutocomplete: [{
                 type: HostBinding,
                 args: ['attr.aria-autocomplete']
@@ -2121,9 +2114,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
-            }], isAriaExpanded: [{
-                type: HostBinding,
-                args: ['attr.aria-expanded']
             }], ariaHasPopup: [{
                 type: HostBinding,
                 args: ['attr.aria-haspopup']

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: 1723454347,
-    version: '16.7.1-develop.4',
+    publishDate: 1723552695,
+    version: '16.7.1-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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

@@ -34,8 +34,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1723454347,
-    version: '16.7.1-develop.4',
+    publishDate: 1723552695,
+    version: '16.7.1-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -6715,7 +6715,6 @@ class DropDownListComponent {
          * @hidden
          */
         this.caretAltDownSVGIcon = caretAltDownIcon;
-        this.listBoxId = `k-${guid()}`;
         /**
          * Shows or hides the current group sticky header when using grouped data.
          * By default the sticky header is displayed ([see example]({% slug grouping_autocomplete %}#toc-sticky-header)).
@@ -6823,6 +6822,7 @@ class DropDownListComponent {
         this.groupIndices = [];
         this.optionPrefix = `k-${guid()}`;
         this.filterText = '';
+        this.listBoxId = `k-${guid()}`;
         this.subs = new Subscription();
         this._isFocused = false;
         this.onTouchedCallback = (_) => { };
@@ -6879,15 +6879,6 @@ class DropDownListComponent {
         const defaultTabIndex = 0;
         return !isNaN(providedTabIndex) ? providedTabIndex : defaultTabIndex;
     }
-    get ariaExpanded() {
-        return this.isOpen;
-    }
-    get ariaControls() {
-        if (!this.isOpen) {
-            return;
-        }
-        return this.listBoxId;
-    }
     get ariaActivedescendant() {
         if (!isPresent(this.dataItem) || !this.isOpen) {
             return;
@@ -7189,16 +7180,10 @@ class DropDownListComponent {
     get isBusy() {
         return this.isLoading;
     }
-    get isAriaExpanded() {
-        return this.ariaExpanded;
-    }
     get hostAriaInvalid() {
         var _a;
         return this.formControl ? (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.invalid.toString() : null;
     }
-    get hostAriaActivedescendant() {
-        return this.ariaActivedescendant;
-    }
     /**
      * @hidden
      */
@@ -7280,6 +7265,10 @@ class DropDownListComponent {
     }
     ngOnInit() {
         this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
+        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
+        if (this.ariaActivedescendant) {
+            this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-activedescendant', this.ariaActivedescendant);
+        }
         this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
@@ -7547,6 +7536,9 @@ class DropDownListComponent {
             popupClass: this.listContainerClasses,
             positionMode: 'absolute'
         });
+        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
+        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
+        this.setAriaactivedescendant();
         const popupWrapper = this.popupRef.popupElement;
         const { min, max } = this.width;
         popupWrapper.addEventListener('mousedown', this.popupMouseDownHandler);
@@ -7579,6 +7571,9 @@ class DropDownListComponent {
     }
     destroyPopup() {
         if (this.popupRef) {
+            this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-activedescendant');
             this.popupRef.popupElement
                 .removeEventListener('mousedown', this.popupMouseDownHandler);
             this.popupRef.close();
@@ -7607,6 +7602,7 @@ class DropDownListComponent {
         // reassigning the value label ID as aria-deascibedby forces firefox/nvda, forefox/jaws to read
         // the new value when the popup is closed and the value is changed with the arrow keys (up/down)
         this.assignAriaDescribedBy();
+        this.setAriaactivedescendant();
     }
     subscribeEvents() {
         if (!isDocumentAvailable()) {
@@ -7662,6 +7658,15 @@ class DropDownListComponent {
                 .subscribe(() => this.componentBlur()));
         });
     }
+    setAriaactivedescendant() {
+        if (this.ariaActivedescendant) {
+            this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-activedescendant', this.ariaActivedescendant);
+            const searchInput = this.popupRef.popupElement.querySelector('input[role="searchbox"]');
+            if (searchInput) {
+                this.renderer.setAttribute(searchInput, 'aria-activedescendant', this.ariaActivedescendant);
+            }
+        }
+    }
     subscribeTouchEvents() {
         if (!isDocumentAvailable() || !this.touchEnabled) {
             return;
@@ -7799,6 +7804,10 @@ class DropDownListComponent {
             }
             else {
                 this.togglePopup(false);
+                //this is needed for Ang 18 not to throw ng0100 error when closing the popup
+                //the component could be refactored using kendoDropDownSharedEvents directive
+                //once we are able to debug against Angular 18
+                this.cdr.markForCheck();
             }
         }
     }
@@ -8005,7 +8014,7 @@ class DropDownListComponent {
     }
 }
 DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "attr.aria-controls": "this.ariaControls", "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-activedescendant": "this.hostAriaActivedescendant" } }, providers: [
+DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-invalid": "this.hostAriaInvalid" } }, providers: [
         DROPDOWNLIST_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -8105,8 +8114,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                             role="searchbox"
                             aria-autocomplete="list"
                             aria-haspopup="listbox"
-                            [attr.aria-controls]="isOpen ? ariaControls : undefined"
-                            [attr.aria-activedescendant]="ariaActivedescendant"
+                            [attr.aria-controls]="listBoxId"
                             tabindex="-1"
                             [filterInput]="isFocused && !touchEnabled"
                             [attr.aria-label]="messageFor('filterInputLabel')"
@@ -8298,8 +8306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             role="searchbox"
                             aria-autocomplete="list"
                             aria-haspopup="listbox"
-                            [attr.aria-controls]="isOpen ? ariaControls : undefined"
-                            [attr.aria-activedescendant]="ariaActivedescendant"
+                            [attr.aria-controls]="listBoxId"
                             tabindex="-1"
                             [filterInput]="isFocused && !touchEnabled"
                             [attr.aria-label]="messageFor('filterInputLabel')"
@@ -8393,9 +8400,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], responsiveRendererComponent: [{
                 type: ViewChild,
                 args: [ResponsiveRendererComponent]
-            }], ariaControls: [{
-                type: HostBinding,
-                args: ['attr.aria-controls']
             }], showStickyHeader: [{
                 type: Input
             }], icon: [{
@@ -8548,15 +8552,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], haspopup: [{
                 type: HostBinding,
                 args: ['attr.aria-haspopup']
-            }], isAriaExpanded: [{
-                type: HostBinding,
-                args: ['attr.aria-expanded']
             }], hostAriaInvalid: [{
                 type: HostBinding,
                 args: ['attr.aria-invalid']
-            }], hostAriaActivedescendant: [{
-                type: HostBinding,
-                args: ['attr.aria-activedescendant']
             }], keydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -14615,9 +14613,6 @@ class MultiSelectTreeComponent {
     get isDisabled() {
         return this.disabled;
     }
-    get hostAriaControls() {
-        return this.isOpen ? this.treeViewId : null;
-    }
     get hostAriaAutocomplete() {
         return this.filterable ? 'list' : null;
     }
@@ -14636,9 +14631,6 @@ class MultiSelectTreeComponent {
     get hostTabIndex() {
         return this.tabindex;
     }
-    get isAriaExpanded() {
-        return this.isOpen;
-    }
     get isReadonly() {
         return this.readonly ? '' : null;
     }
@@ -15297,6 +15289,10 @@ class MultiSelectTreeComponent {
             }
             this.isFocused = false;
             this.togglePopup(false);
+            //this is needed for Ang 18 not to throw ng0100 error when closing the popup
+            //the component could be refactored using kendoDropDownSharedEvents directive
+            //once we are able to debug against Angular 18
+            this.cdr.markForCheck();
             if (hasObservers(this.onBlur) ||
                 isUntouched(this.wrapper.nativeElement) ||
                 ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.updateOn) === 'blur') {
@@ -15567,6 +15563,7 @@ class MultiSelectTreeComponent {
         popupWrapper.style.minWidth = min;
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.height;
+        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.treeViewId);
         this.renderer.setAttribute(popupWrapper, 'dir', this.direction);
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
         this.popupRef.popupOpen.subscribe(() => {
@@ -15590,6 +15587,7 @@ class MultiSelectTreeComponent {
             this.popupRef.close();
             this.popupRef = null;
             this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
             if (this.filter !== "") {
                 this.filter = "";
                 this.allNodesHidden = false;
@@ -15910,7 +15908,7 @@ class MultiSelectTreeComponent {
     }
 }
 MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselecttree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
+MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselecttree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
         LocalizationService,
         NavigationService,
         DataService,
@@ -16054,9 +16052,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
                         (keydown)="handleKeydown($event, filterInput)"
                         [value]="filter"
                         class="k-input-inner"
-                        role="textbox"
-                        aria-haspopup="true"
-                        aria-expanded="false"
+                        role="searchbox"
                         tabindex="0"
                         aria-disabled="false"
                         aria-readonly="false"
@@ -16311,9 +16307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         (keydown)="handleKeydown($event, filterInput)"
                         [value]="filter"
                         class="k-input-inner"
-                        role="textbox"
-                        aria-haspopup="true"
-                        aria-expanded="false"
+                        role="searchbox"
                         tabindex="0"
                         aria-disabled="false"
                         aria-readonly="false"
@@ -16433,9 +16427,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }, {
                 type: HostBinding,
                 args: ['attr.aria-disabled']
-            }], hostAriaControls: [{
-                type: HostBinding,
-                args: ['attr.aria-controls']
             }], hostAriaAutocomplete: [{
                 type: HostBinding,
                 args: ['attr.aria-autocomplete']
@@ -16460,9 +16451,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
-            }], isAriaExpanded: [{
-                type: HostBinding,
-                args: ['attr.aria-expanded']
             }], ariaHasPopup: [{
                 type: HostBinding,
                 args: ['attr.aria-haspopup']

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

@@ -34,8 +34,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1723454347,
-    version: '16.7.1-develop.4',
+    publishDate: 1723552695,
+    version: '16.7.1-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -6704,7 +6704,6 @@ class DropDownListComponent {
          * @hidden
          */
         this.caretAltDownSVGIcon = caretAltDownIcon;
-        this.listBoxId = `k-${guid()}`;
         /**
          * Shows or hides the current group sticky header when using grouped data.
          * By default the sticky header is displayed ([see example]({% slug grouping_autocomplete %}#toc-sticky-header)).
@@ -6812,6 +6811,7 @@ class DropDownListComponent {
         this.groupIndices = [];
         this.optionPrefix = `k-${guid()}`;
         this.filterText = '';
+        this.listBoxId = `k-${guid()}`;
         this.subs = new Subscription();
         this._isFocused = false;
         this.onTouchedCallback = (_) => { };
@@ -6866,15 +6866,6 @@ class DropDownListComponent {
         const defaultTabIndex = 0;
         return !isNaN(providedTabIndex) ? providedTabIndex : defaultTabIndex;
     }
-    get ariaExpanded() {
-        return this.isOpen;
-    }
-    get ariaControls() {
-        if (!this.isOpen) {
-            return;
-        }
-        return this.listBoxId;
-    }
     get ariaActivedescendant() {
         if (!isPresent(this.dataItem) || !this.isOpen) {
             return;
@@ -7175,15 +7166,9 @@ class DropDownListComponent {
     get isBusy() {
         return this.isLoading;
     }
-    get isAriaExpanded() {
-        return this.ariaExpanded;
-    }
     get hostAriaInvalid() {
         return this.formControl ? this.formControl?.invalid.toString() : null;
     }
-    get hostAriaActivedescendant() {
-        return this.ariaActivedescendant;
-    }
     /**
      * @hidden
      */
@@ -7265,6 +7250,10 @@ class DropDownListComponent {
     }
     ngOnInit() {
         this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
+        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
+        if (this.ariaActivedescendant) {
+            this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-activedescendant', this.ariaActivedescendant);
+        }
         this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
@@ -7532,6 +7521,9 @@ class DropDownListComponent {
             popupClass: this.listContainerClasses,
             positionMode: 'absolute'
         });
+        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
+        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
+        this.setAriaactivedescendant();
         const popupWrapper = this.popupRef.popupElement;
         const { min, max } = this.width;
         popupWrapper.addEventListener('mousedown', this.popupMouseDownHandler);
@@ -7564,6 +7556,9 @@ class DropDownListComponent {
     }
     destroyPopup() {
         if (this.popupRef) {
+            this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-activedescendant');
             this.popupRef.popupElement
                 .removeEventListener('mousedown', this.popupMouseDownHandler);
             this.popupRef.close();
@@ -7592,6 +7587,7 @@ class DropDownListComponent {
         // reassigning the value label ID as aria-deascibedby forces firefox/nvda, forefox/jaws to read
         // the new value when the popup is closed and the value is changed with the arrow keys (up/down)
         this.assignAriaDescribedBy();
+        this.setAriaactivedescendant();
     }
     subscribeEvents() {
         if (!isDocumentAvailable()) {
@@ -7647,6 +7643,15 @@ class DropDownListComponent {
                 .subscribe(() => this.componentBlur()));
         });
     }
+    setAriaactivedescendant() {
+        if (this.ariaActivedescendant) {
+            this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-activedescendant', this.ariaActivedescendant);
+            const searchInput = this.popupRef.popupElement.querySelector('input[role="searchbox"]');
+            if (searchInput) {
+                this.renderer.setAttribute(searchInput, 'aria-activedescendant', this.ariaActivedescendant);
+            }
+        }
+    }
     subscribeTouchEvents() {
         if (!isDocumentAvailable() || !this.touchEnabled) {
             return;
@@ -7783,6 +7788,10 @@ class DropDownListComponent {
             }
             else {
                 this.togglePopup(false);
+                //this is needed for Ang 18 not to throw ng0100 error when closing the popup
+                //the component could be refactored using kendoDropDownSharedEvents directive
+                //once we are able to debug against Angular 18
+                this.cdr.markForCheck();
             }
         }
     }
@@ -7989,7 +7998,7 @@ class DropDownListComponent {
     }
 }
 DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "attr.aria-controls": "this.ariaControls", "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-activedescendant": "this.hostAriaActivedescendant" } }, providers: [
+DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-invalid": "this.hostAriaInvalid" } }, providers: [
         DROPDOWNLIST_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -8089,8 +8098,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                             role="searchbox"
                             aria-autocomplete="list"
                             aria-haspopup="listbox"
-                            [attr.aria-controls]="isOpen ? ariaControls : undefined"
-                            [attr.aria-activedescendant]="ariaActivedescendant"
+                            [attr.aria-controls]="listBoxId"
                             tabindex="-1"
                             [filterInput]="isFocused && !touchEnabled"
                             [attr.aria-label]="messageFor('filterInputLabel')"
@@ -8282,8 +8290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             role="searchbox"
                             aria-autocomplete="list"
                             aria-haspopup="listbox"
-                            [attr.aria-controls]="isOpen ? ariaControls : undefined"
-                            [attr.aria-activedescendant]="ariaActivedescendant"
+                            [attr.aria-controls]="listBoxId"
                             tabindex="-1"
                             [filterInput]="isFocused && !touchEnabled"
                             [attr.aria-label]="messageFor('filterInputLabel')"
@@ -8377,9 +8384,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], responsiveRendererComponent: [{
                 type: ViewChild,
                 args: [ResponsiveRendererComponent]
-            }], ariaControls: [{
-                type: HostBinding,
-                args: ['attr.aria-controls']
             }], showStickyHeader: [{
                 type: Input
             }], icon: [{
@@ -8532,15 +8536,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], haspopup: [{
                 type: HostBinding,
                 args: ['attr.aria-haspopup']
-            }], isAriaExpanded: [{
-                type: HostBinding,
-                args: ['attr.aria-expanded']
             }], hostAriaInvalid: [{
                 type: HostBinding,
                 args: ['attr.aria-invalid']
-            }], hostAriaActivedescendant: [{
-                type: HostBinding,
-                args: ['attr.aria-activedescendant']
             }], keydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -14589,9 +14587,6 @@ class MultiSelectTreeComponent {
     get isDisabled() {
         return this.disabled;
     }
-    get hostAriaControls() {
-        return this.isOpen ? this.treeViewId : null;
-    }
     get hostAriaAutocomplete() {
         return this.filterable ? 'list' : null;
     }
@@ -14610,9 +14605,6 @@ class MultiSelectTreeComponent {
     get hostTabIndex() {
         return this.tabindex;
     }
-    get isAriaExpanded() {
-        return this.isOpen;
-    }
     get isReadonly() {
         return this.readonly ? '' : null;
     }
@@ -15270,6 +15262,10 @@ class MultiSelectTreeComponent {
             }
             this.isFocused = false;
             this.togglePopup(false);
+            //this is needed for Ang 18 not to throw ng0100 error when closing the popup
+            //the component could be refactored using kendoDropDownSharedEvents directive
+            //once we are able to debug against Angular 18
+            this.cdr.markForCheck();
             if (hasObservers(this.onBlur) ||
                 isUntouched(this.wrapper.nativeElement) ||
                 this.formControl?.updateOn === 'blur') {
@@ -15540,6 +15536,7 @@ class MultiSelectTreeComponent {
         popupWrapper.style.minWidth = min;
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.height;
+        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.treeViewId);
         this.renderer.setAttribute(popupWrapper, 'dir', this.direction);
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
         this.popupRef.popupOpen.subscribe(() => {
@@ -15563,6 +15560,7 @@ class MultiSelectTreeComponent {
             this.popupRef.close();
             this.popupRef = null;
             this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
             if (this.filter !== "") {
                 this.filter = "";
                 this.allNodesHidden = false;
@@ -15883,7 +15881,7 @@ class MultiSelectTreeComponent {
     }
 }
 MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselecttree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
+MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselecttree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
         LocalizationService,
         NavigationService,
         DataService,
@@ -16027,9 +16025,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
                         (keydown)="handleKeydown($event, filterInput)"
                         [value]="filter"
                         class="k-input-inner"
-                        role="textbox"
-                        aria-haspopup="true"
-                        aria-expanded="false"
+                        role="searchbox"
                         tabindex="0"
                         aria-disabled="false"
                         aria-readonly="false"
@@ -16284,9 +16280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         (keydown)="handleKeydown($event, filterInput)"
                         [value]="filter"
                         class="k-input-inner"
-                        role="textbox"
-                        aria-haspopup="true"
-                        aria-expanded="false"
+                        role="searchbox"
                         tabindex="0"
                         aria-disabled="false"
                         aria-readonly="false"
@@ -16406,9 +16400,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }, {
                 type: HostBinding,
                 args: ['attr.aria-disabled']
-            }], hostAriaControls: [{
-                type: HostBinding,
-                args: ['attr.aria-controls']
             }], hostAriaAutocomplete: [{
                 type: HostBinding,
                 args: ['attr.aria-autocomplete']
@@ -16433,9 +16424,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
-            }], isAriaExpanded: [{
-                type: HostBinding,
-                args: ['attr.aria-expanded']
             }], ariaHasPopup: [{
                 type: HostBinding,
                 args: ['attr.aria-haspopup']

package/package.json

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