@progress/kendo-angular-dropdowns 11.3.0-develop.8 → 11.3.0-develop.9

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

@@ -32,8 +32,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1677079930,
-    version: '11.3.0-develop.8',
+    publishDate: 1677099903,
+    version: '11.3.0-develop.9',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -389,8 +389,8 @@ const getTextField = (field, level) => {
 /**
  * @hidden
  */
-const getSearchableItems = (popupId, popupElement) => {
-    const nodeSeletor = `kendo-popup[id='${popupId}'] li.k-treeview-item`;
+const getSearchableItems = (treeViewId, popupElement) => {
+    const nodeSeletor = `kendo-treeview[id='${treeViewId}'] li.k-treeview-item`;
     const liElements = Array.from(popupElement.querySelectorAll(nodeSeletor));
     return liElements.map((liElement) => {
         return { text: liElement.innerText, index: liElement.getAttribute('data-treeindex') };
@@ -404,6 +404,7 @@ class SearchBarComponent {
     constructor(localization, renderer, injector) {
         this.localization = localization;
         this.injector = injector;
+        this.ariaExpanded = null;
         this.valueChange = new EventEmitter();
         this.onBlur = new EventEmitter();
         this.onFocus = new EventEmitter();
@@ -460,9 +461,6 @@ class SearchBarComponent {
     get placeholder() {
         return this._placeholder;
     }
-    get ariaExpanded() {
-        return this.role === 'combobox' ? this.popupOpen : null;
-    }
     ngOnInit() {
         this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
@@ -577,14 +575,14 @@ class SearchBarComponent {
     }
 }
 SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SearchBarComponent, selector: "kendo-searchbar", inputs: { id: "id", listId: "listId", tagListId: "tagListId", activeDescendant: "activeDescendant", disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", popupOpen: "popupOpen", role: "role", isLoading: "isLoading", isSuggestable: "isSuggestable", isFilterable: "isFilterable", userInput: "userInput", suggestedText: "suggestedText", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-searchbar": "this.searchBarClass" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SearchBarComponent, selector: "kendo-searchbar", inputs: { id: "id", tagListId: "tagListId", activeDescendant: "activeDescendant", disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", role: "role", isLoading: "isLoading", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", isSuggestable: "isSuggestable", isFilterable: "isFilterable", userInput: "userInput", suggestedText: "suggestedText", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-searchbar": "this.searchBarClass" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <input #input
             autocomplete="off"
             [id]="id"
             [disabled]="disabled"
             [readonly]="readonly"
             [placeholder]="placeholder"
-            [class]="'k-input-inner'"
+            class="k-input-inner"
             (input)="handleInput($event)"
             (keydown)="handleKeydown($event)"
             [kendoEventsOutsideAngular]="{
@@ -597,7 +595,7 @@ SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [attr.role]="role"
             aria-haspopup="listbox"
             [attr.aria-expanded]="ariaExpanded"
-            [attr.aria-controls]="listId"
+            [attr.aria-controls]="ariaControls"
             [attr.aria-describedby]="tagListId"
             [attr.aria-activedescendant]="activeDescendant"
             [attr.aria-busy]="isLoading"
@@ -615,7 +613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [disabled]="disabled"
             [readonly]="readonly"
             [placeholder]="placeholder"
-            [class]="'k-input-inner'"
+            class="k-input-inner"
             (input)="handleInput($event)"
             (keydown)="handleKeydown($event)"
             [kendoEventsOutsideAngular]="{
@@ -628,7 +626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [attr.role]="role"
             aria-haspopup="listbox"
             [attr.aria-expanded]="ariaExpanded"
-            [attr.aria-controls]="listId"
+            [attr.aria-controls]="ariaControls"
             [attr.aria-describedby]="tagListId"
             [attr.aria-activedescendant]="activeDescendant"
             [attr.aria-busy]="isLoading"
@@ -638,8 +636,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { id: [{
                 type: Input
-            }], listId: [{
-                type: Input
             }], tagListId: [{
                 type: Input
             }], activeDescendant: [{
@@ -650,12 +646,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], tabIndex: [{
                 type: Input
-            }], popupOpen: [{
-                type: Input
             }], role: [{
                 type: Input
             }], isLoading: [{
                 type: Input
+            }], ariaControls: [{
+                type: Input
+            }], ariaExpanded: [{
+                type: Input
             }], isSuggestable: [{
                 type: Input
             }], isFilterable: [{
@@ -2130,6 +2128,9 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     *ngIf="checkboxes.enabled"
                     type="checkbox"
                     class="k-checkbox"
+                    role="presentation"
+                    tabindex="-1"
+                    aria-hidden="true"
                     [ngClass]="checkboxClasses"
                     (change)="onCheckedChange($event, itemIndex)"
                     [checked]="isChecked(itemIndex)"
@@ -2258,6 +2259,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     *ngIf="checkboxes.enabled"
                     type="checkbox"
                     class="k-checkbox"
+                    role="presentation"
+                    tabindex="-1"
+                    aria-hidden="true"
                     [ngClass]="checkboxClasses"
                     (change)="onCheckedChange($event, itemIndex)"
                     [checked]="isChecked(itemIndex)"
@@ -2426,7 +2430,7 @@ const TOUCH_ENABLED = new InjectionToken('dropdowns-touch-enabled');
 class Messages extends ComponentMessages {
 }
 Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText" }, usesInheritance: true, ngImport: i0 });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive
         }], propDecorators: { noDataText: [{
@@ -2437,6 +2441,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], selectButtonText: [{
                 type: Input
+            }], filterInputLabel: [{
+                type: Input
+            }], popupLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -2611,8 +2619,8 @@ class AutoCompleteComponent {
          */
         this.onBlur = new EventEmitter();
         this.widgetClasses = true;
-        this.listBoxId = guid();
-        this.optionPrefix = guid();
+        this.listBoxId = `k-${guid()}`;
+        this.optionPrefix = `k-${guid()}`;
         this.onChangeCallback = noop;
         this.onTouchedCallback = noop;
         this.popupMouseDownHandler = (event) => event.preventDefault();
@@ -2676,6 +2684,9 @@ class AutoCompleteComponent {
             return 'visible';
         }
     }
+    get ariaControls() {
+        return this.isOpen ? this.listBoxId : undefined;
+    }
     /**
      * Toggles the visibility of the popup.
      * If you use the `toggle` method to open or close the popup, the `open` and `close` events will not be fired.
@@ -3248,9 +3259,9 @@ class AutoCompleteComponent {
         if (this.virtual) {
             this.virtual.skip = 0;
         }
-        const horizontalAlign = this.direction === "rtl" ? "right" : "left";
-        const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
-        const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
+        const horizontalAlign = this.direction === 'rtl' ? 'right' : 'left';
+        const anchorPosition = { horizontal: horizontalAlign, vertical: 'bottom' };
+        const popupPosition = { horizontal: horizontalAlign, vertical: 'top' };
         this.popupRef = this.popupService.open({
             anchor: this.wrapper,
             animate: this.popupSettings.animate,
@@ -3267,7 +3278,11 @@ class AutoCompleteComponent {
         popupWrapper.style.minWidth = min;
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.height;
-        popupWrapper.setAttribute("dir", this.direction);
+        popupWrapper.setAttribute('dir', this.direction);
+        if (!this.appendTo) {
+            this.renderer.setAttribute(popupWrapper, 'role', 'region');
+            this.renderer.setAttribute(popupWrapper, 'aria-label', this.messageFor('popupLabel'));
+        }
         const listBox = popupWrapper.querySelector('ul.k-list-ul');
         const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby');
         if (ariaLabel) {
@@ -3372,22 +3387,26 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
 
             i18n-clearTitle="kendo.autocomplete.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-popupLabel="kendo.autocomplete.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            popupLabel="Options list"
         >
         </ng-container>
         <kendo-searchbar #searchbar
             [role]="'combobox'"
+            [ariaExpanded]="isOpen"
+            [ariaControls]="ariaControls"
             [isSuggestable]="suggest"
             [isFilterable]="filterable"
             [isLoading]="isLoading"
+            [ariaControls]="ariaControls"
             [id]="focusableId"
-            [listId]="listBoxId"
             [activeDescendant]="activeDescendant"
             [userInput]="text"
             [suggestedText]="suggestion"
             [disabled]="disabled"
             [readonly]="readonly"
             [tabIndex]="tabIndex"
-            [popupOpen]="isOpen"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
@@ -3459,7 +3478,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -3492,22 +3511,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-clearTitle="kendo.autocomplete.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-popupLabel="kendo.autocomplete.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            popupLabel="Options list"
         >
         </ng-container>
         <kendo-searchbar #searchbar
             [role]="'combobox'"
+            [ariaExpanded]="isOpen"
+            [ariaControls]="ariaControls"
             [isSuggestable]="suggest"
             [isFilterable]="filterable"
             [isLoading]="isLoading"
+            [ariaControls]="ariaControls"
             [id]="focusableId"
-            [listId]="listBoxId"
             [activeDescendant]="activeDescendant"
             [userInput]="text"
             [suggestedText]="suggestion"
             [disabled]="disabled"
             [readonly]="readonly"
             [tabIndex]="tabIndex"
-            [popupOpen]="isOpen"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
@@ -3942,8 +3965,8 @@ class ComboBoxComponent {
         this.onBlur = new EventEmitter();
         this.widgetClasses = true;
         this._isFocused = false;
-        this.listBoxId = guid();
-        this.optionPrefix = guid();
+        this.listBoxId = `k-${guid()}`;
+        this.optionPrefix = `k-${guid()}`;
         this.onChangeCallback = (_) => { };
         this.onTouchedCallback = (_) => { };
         /**
@@ -3977,6 +4000,12 @@ class ComboBoxComponent {
     get text() {
         return this._text;
     }
+    /**
+     * @hidden
+     */
+    get ariaControls() {
+        return this.isOpen ? this.listBoxId : undefined;
+    }
     /**
      * @hidden
      */
@@ -4915,7 +4944,11 @@ class ComboBoxComponent {
         popupWrapper.style.minWidth = min;
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.popupHeight;
-        popupWrapper.setAttribute("dir", this.direction);
+        popupWrapper.setAttribute('dir', this.direction);
+        if (!this.appendTo) {
+            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) {
@@ -5019,12 +5052,16 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 
             i18n-selectButtonText="kendo.combobox.selectButtonText|The text set as aria-label on the select button"
             selectButtonText="Select"
+
+            i18n-popupLabel="kendo.combobox.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            popupLabel="Options list"
         >
         </ng-container>
         <kendo-searchbar #searchbar
             [role]="'combobox'"
+            [ariaExpanded]="isOpen"
+            [ariaControls]="ariaControls"
             [id]="focusableId"
-            [listId]="listBoxId"
             [isLoading]="loading"
             [isSuggestable]="suggest"
             [isFilterable]="filterable"
@@ -5034,7 +5071,6 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [disabled]="disabled"
             [readonly]="readonly"
             [tabIndex]="tabIndex"
-            [popupOpen]="isOpen"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
@@ -5126,7 +5162,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -5160,12 +5196,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-selectButtonText="kendo.combobox.selectButtonText|The text set as aria-label on the select button"
             selectButtonText="Select"
+
+            i18n-popupLabel="kendo.combobox.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            popupLabel="Options list"
         >
         </ng-container>
         <kendo-searchbar #searchbar
             [role]="'combobox'"
+            [ariaExpanded]="isOpen"
+            [ariaControls]="ariaControls"
             [id]="focusableId"
-            [listId]="listBoxId"
             [isLoading]="loading"
             [isSuggestable]="suggest"
             [isFilterable]="filterable"
@@ -5175,7 +5215,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [disabled]="disabled"
             [readonly]="readonly"
             [tabIndex]="tabIndex"
-            [popupOpen]="isOpen"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
@@ -5517,6 +5556,7 @@ class DropDownListComponent {
          * @hidden
          */
         this.caretAltDownIcon = caretAltDownIcon;
+        this.listBoxId = `k-${guid()}`;
         /**
          * Sets the height of the options list. By default, `listHeight` is 200px.
          *
@@ -5598,9 +5638,8 @@ class DropDownListComponent {
         this.role = 'combobox';
         this.haspopup = 'listbox';
         this.groupIndices = [];
-        this.listBoxId = guid();
-        this.optionPrefix = guid();
-        this.filterText = "";
+        this.optionPrefix = `k-${guid()}`;
+        this.filterText = '';
         this.subs = new Subscription();
         this._isFocused = false;
         this.onTouchedCallback = (_) => { };
@@ -5906,9 +5945,6 @@ class DropDownListComponent {
     get isAriaExpanded() {
         return this.ariaExpanded;
     }
-    get hostAriaControls() {
-        return this.ariaControls;
-    }
     get hostAriaInvalid() {
         return this.formControl ? this.formControl?.invalid.toString() : null;
     }
@@ -6249,7 +6285,11 @@ class DropDownListComponent {
         popupWrapper.style.minWidth = min;
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.height;
-        popupWrapper.setAttribute("dir", this.direction);
+        popupWrapper.setAttribute('dir', this.direction);
+        if (!this.appendTo) {
+            this.renderer.setAttribute(popupWrapper, 'role', 'region');
+            this.renderer.setAttribute(popupWrapper, 'aria-label', this.messageFor('popupLabel'));
+        }
         const listBox = popupWrapper.querySelector('ul.k-list-ul');
         const ariaLabel = this.wrapper.nativeElement.getAttribute('aria-labelledby');
         if (ariaLabel) {
@@ -6641,7 +6681,7 @@ class DropDownListComponent {
         const currentValue = this.wrapper.nativeElement.getAttribute('aria-describedby') || '';
         const trimmed = currentValue.replace(this.valueLabelId, '').trim();
         // reset the value label ID to force readers to read the new value
-        this.valueLabelId = guid();
+        this.valueLabelId = `k-${guid()}`;
         // add to the current value - don't replace it
         const newValue = `${this.valueLabelId} ${trimmed}`.trim();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
@@ -6659,7 +6699,7 @@ class DropDownListComponent {
     }
 }
 DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: { iconClass: "iconClass", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", 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", 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($event)" }, properties: { "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-controls": "this.hostAriaControls", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-activedescendant": "this.hostAriaActivedescendant" } }, providers: [
+DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: { iconClass: "iconClass", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", 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", 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($event)" }, properties: { "attr.aria-controls": "this.ariaControls", "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: [
         DROPDOWNLIST_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -6683,6 +6723,12 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
 
             i18n-selectButtonText="kendo.dropdownlist.selectButtonText|The text set as aria-label on the select button"
             selectButtonText="Select"
+
+            i18n-filterInputLabel="kendo.dropdownlist.filterInputLabel|The text set as aria-label on the filter input"
+            filterInputLabel="Filter"
+
+            i18n-popupLabel="kendo.dropdownlist.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            popupLabel="Options list"
         >
         </ng-container>
         <span class="k-input-inner" unselectable="on" [id]="valueLabelId">
@@ -6718,27 +6764,26 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </button>
         <ng-template #popupTemplate>
             <!--filterable-->
-
             <ng-template [ngIf]="filterable">
                 <div class="k-list-filter" (click)="$event.stopImmediatePropagation()">
                     <span
                         class="k-searchbox k-input"
-                        [ngClass]="filterInputClasses"
-                    >
+                        [ngClass]="filterInputClasses">
                         <kendo-icon-wrapper
                             class="k-icon"
+                            innerCssClass="k-input-icon"
                             name="search"
-                            [svgIcon]="searchIcon"
-                        >
+                            [svgIcon]="searchIcon">
                         </kendo-icon-wrapper>
                         <input
                             role="searchbox"
                             aria-autocomplete="list"
                             aria-haspopup="listbox"
-                            [attr.aria-controls]="ariaControls"
+                            [attr.aria-controls]="isOpen ? ariaControls : undefined"
                             [attr.aria-activedescendant]="ariaActivedescendant"
                             tabindex="-1"
                             [filterInput]="isFocused && !touchEnabled"
+                            [attr.aria-label]="messageFor('filterInputLabel')"
                             [dir]="direction"
                             [(ngModel)]="filterText"
                             class="k-input-inner"
@@ -6784,9 +6829,9 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <!--list-->
             <kendo-list
                 #optionsList
+                [id]="listBoxId"
                 [size]="size"
                 [rounded]="rounded"
-                [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
                 [data]="data"
                 [textField]="textField"
@@ -6798,8 +6843,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [show]="isOpen"
                 [virtual]="virtual"
                 [ariaLive]="ariaLive"
-                (pageChange)="pageChange($event)"
-                >
+                (pageChange)="pageChange($event)">
             </kendo-list>
             <!--no-data template-->
             <div class="k-no-data" *ngIf="data.length === 0">
@@ -6854,6 +6898,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-selectButtonText="kendo.dropdownlist.selectButtonText|The text set as aria-label on the select button"
             selectButtonText="Select"
+
+            i18n-filterInputLabel="kendo.dropdownlist.filterInputLabel|The text set as aria-label on the filter input"
+            filterInputLabel="Filter"
+
+            i18n-popupLabel="kendo.dropdownlist.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            popupLabel="Options list"
         >
         </ng-container>
         <span class="k-input-inner" unselectable="on" [id]="valueLabelId">
@@ -6889,27 +6939,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </button>
         <ng-template #popupTemplate>
             <!--filterable-->
-
             <ng-template [ngIf]="filterable">
                 <div class="k-list-filter" (click)="$event.stopImmediatePropagation()">
                     <span
                         class="k-searchbox k-input"
-                        [ngClass]="filterInputClasses"
-                    >
+                        [ngClass]="filterInputClasses">
                         <kendo-icon-wrapper
                             class="k-icon"
+                            innerCssClass="k-input-icon"
                             name="search"
-                            [svgIcon]="searchIcon"
-                        >
+                            [svgIcon]="searchIcon">
                         </kendo-icon-wrapper>
                         <input
                             role="searchbox"
                             aria-autocomplete="list"
                             aria-haspopup="listbox"
-                            [attr.aria-controls]="ariaControls"
+                            [attr.aria-controls]="isOpen ? ariaControls : undefined"
                             [attr.aria-activedescendant]="ariaActivedescendant"
                             tabindex="-1"
                             [filterInput]="isFocused && !touchEnabled"
+                            [attr.aria-label]="messageFor('filterInputLabel')"
                             [dir]="direction"
                             [(ngModel)]="filterText"
                             class="k-input-inner"
@@ -6955,9 +7004,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <!--list-->
             <kendo-list
                 #optionsList
+                [id]="listBoxId"
                 [size]="size"
                 [rounded]="rounded"
-                [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
                 [data]="data"
                 [textField]="textField"
@@ -6969,8 +7018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [show]="isOpen"
                 [virtual]="virtual"
                 [ariaLive]="ariaLive"
-                (pageChange)="pageChange($event)"
-                >
+                (pageChange)="pageChange($event)">
             </kendo-list>
             <!--no-data template-->
             <div class="k-no-data" *ngIf="data.length === 0">
@@ -7001,7 +7049,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }, { type: i0.Injector }]; }, propDecorators: { iconClass: [{
+                }] }, { type: i0.Injector }]; }, propDecorators: { ariaControls: [{
+                type: HostBinding,
+                args: ['attr.aria-controls']
+            }], iconClass: [{
                 type: Input
             }], loading: [{
                 type: Input
@@ -7141,9 +7192,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], isAriaExpanded: [{
                 type: HostBinding,
                 args: ['attr.aria-expanded']
-            }], hostAriaControls: [{
-                type: HostBinding,
-                args: ['attr.aria-controls']
             }], hostAriaInvalid: [{
                 type: HostBinding,
                 args: ['attr.aria-invalid']
@@ -7605,8 +7653,8 @@ class MultiSelectComponent {
          * @hidden
          */
         this.plusIcon = plusIcon;
-        this.listBoxId = guid();
-        this.tagListId = guid();
+        this.listBoxId = `k-${guid()}`;
+        this.tagListId = `k-${guid()}`;
         this.tagPrefix = "tag-" + guid();
         this.optionPrefix = "option-" + guid();
         this.focusedTagIndex = undefined;
@@ -7787,6 +7835,12 @@ class MultiSelectComponent {
         this.subscribeEvents();
         this.subscribeTouchEvents();
     }
+    /**
+     * @hidden
+     */
+    get ariaControls() {
+        return this.isOpen ? this.listBoxId : undefined;
+    }
     /**
      * Focuses a specific item of the MultiSelect based on a provided index.
      * If there is a custom item it is positioned at index -1.
@@ -8911,6 +8965,10 @@ class MultiSelectComponent {
         });
         const popupWrapper = this.popupRef.popupElement;
         const { min, max } = this.width;
+        if (!this.appendTo) {
+            this.renderer.setAttribute(popupWrapper, 'role', 'region');
+            this.renderer.setAttribute(popupWrapper, 'aria-label', this.messageFor('popupLabel'));
+        }
         popupWrapper.addEventListener('mousedown', this.popupMouseDownHandler);
         popupWrapper.style.minWidth = min;
         popupWrapper.style.width = max;
@@ -9003,6 +9061,9 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
 
             i18n-clearTitle="kendo.multiselect.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            popupLabel="Options list"
         >
         </ng-container>
         <kendo-taglist
@@ -9023,10 +9084,11 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         >
             <kendo-searchbar
                 #searchbar
+                [ariaExpanded]="isOpen"
+                [ariaControls]="ariaControls"
                 [id]="focusableId"
                 [role]="'combobox'"
                 [tagListId]="tagListId"
-                [listId]="listBoxId"
                 [isLoading]="loading"
                 [isFilterable]="filterable"
                 [activeDescendant]="activeDescendant"
@@ -9034,7 +9096,6 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [tabIndex]="tabIndex"
-                [popupOpen]="isOpen"
                 [placeholder]="placeholder"
                 (onNavigate)="handleNavigate($event)"
                 (valueChange)="handleFilter($event)"
@@ -9138,7 +9199,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -9169,6 +9230,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-clearTitle="kendo.multiselect.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            popupLabel="Options list"
         >
         </ng-container>
         <kendo-taglist
@@ -9189,10 +9253,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         >
             <kendo-searchbar
                 #searchbar
+                [ariaExpanded]="isOpen"
+                [ariaControls]="ariaControls"
                 [id]="focusableId"
                 [role]="'combobox'"
                 [tagListId]="tagListId"
-                [listId]="listBoxId"
                 [isLoading]="loading"
                 [isFilterable]="filterable"
                 [activeDescendant]="activeDescendant"
@@ -9200,7 +9265,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [tabIndex]="tabIndex"
-                [popupOpen]="isOpen"
                 [placeholder]="placeholder"
                 (onNavigate)="handleNavigate($event)"
                 (valueChange)="handleFilter($event)"
@@ -9744,13 +9808,16 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
 
             i18n-selectButtonText="kendo.multicolumncombobox.selectButtonText|The title of the select button"
             selectButtonText="Select"
-        >
-        </ng-container>
+
+            i18n-popupLabel="kendo.multicolumncombobox.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            popupLabel="Options list"
+        ></ng-container>
         <kendo-searchbar
             #searchbar
             [role]="'combobox'"
+            [ariaExpanded]="isOpen"
+            [ariaControls]="ariaControls"
             [id]="focusableId"
-            [listId]="listBoxId"
             [isLoading]="loading"
             [isSuggestable]="suggest"
             [isFilterable]="filterable"
@@ -9760,7 +9827,6 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             [disabled]="disabled"
             [readonly]="readonly"
             [tabIndex]="tabIndex"
-            [popupOpen]="isOpen"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
@@ -9896,7 +9962,6 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 <!--list-->
                 <kendo-list
                     #optionsList
-                    [id]="listBoxId"
                     [optionPrefix]="optionPrefix"
                     [data]="data"
                     [textField]="textField"
@@ -9962,7 +10027,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
 
         <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -10003,13 +10068,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-selectButtonText="kendo.multicolumncombobox.selectButtonText|The title of the select button"
             selectButtonText="Select"
-        >
-        </ng-container>
+
+            i18n-popupLabel="kendo.multicolumncombobox.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            popupLabel="Options list"
+        ></ng-container>
         <kendo-searchbar
             #searchbar
             [role]="'combobox'"
+            [ariaExpanded]="isOpen"
+            [ariaControls]="ariaControls"
             [id]="focusableId"
-            [listId]="listBoxId"
             [isLoading]="loading"
             [isSuggestable]="suggest"
             [isFilterable]="filterable"
@@ -10019,7 +10087,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [disabled]="disabled"
             [readonly]="readonly"
             [tabIndex]="tabIndex"
-            [popupOpen]="isOpen"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
@@ -10155,7 +10222,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <!--list-->
                 <kendo-list
                     #optionsList
-                    [id]="listBoxId"
                     [optionPrefix]="optionPrefix"
                     [data]="data"
                     [textField]="textField"
@@ -10431,10 +10497,10 @@ class DropDownTreeComponent {
          * Used to associate the value label with the wrapper via aria-describedby.
          */
         this.valueLabelId = `k-${guid$1()}`;
+        this.treeViewId = `k-${guid$1()}`;
         this._popupSettings = DEFAULT_POPUP_SETTINGS$1;
         this._tabindex = 0;
         this._isFocused = false;
-        this._popupId = guid$1();
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
@@ -10465,7 +10531,7 @@ class DropDownTreeComponent {
         return this.loading ? 'true' : null;
     }
     get hostAriaControls() {
-        return this.isOpen ? this._popupId : null;
+        return this.isOpen ? this.treeViewId : undefined;
     }
     get id() {
         return this.focusableId;
@@ -11061,7 +11127,7 @@ class DropDownTreeComponent {
     onChildrenLoaded() {
         setTimeout(() => {
             if (this.popupRef) {
-                this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
+                this._searchableNodes = getSearchableItems(this.treeViewId, this.popupRef.popupElement);
             }
         });
     }
@@ -11117,11 +11183,14 @@ class DropDownTreeComponent {
         this.renderer.setStyle(popupWrapper, 'width', max);
         this.renderer.setStyle(popupWrapper, 'height', this.height);
         this.renderer.setAttribute(popupWrapper, 'dir', this.direction);
-        this.renderer.setAttribute(popupWrapper, 'id', this._popupId);
+        if (!this.appendTo) {
+            this.renderer.setAttribute(popupWrapper, 'role', 'region');
+            this.renderer.setAttribute(popupWrapper, 'aria-label', this.messageFor('popupLabel'));
+        }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.opened.emit();
-            this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
+            this._searchableNodes = getSearchableItems(this.treeViewId, this.popupRef.popupElement);
         });
         this.popupRef.popupClose.subscribe(() => {
             this.closed.emit();
@@ -11341,6 +11410,12 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
 
             i18n-selectButtonText="kendo.dropdowntree.selectButtonText|The text set as aria-label on the select button"
             selectButtonText="Select"
+
+            i18n-filterInputLabel="kendo.dropdowntree.filterInputLabel|The text set as aria-label on the filter input"
+            filterInputLabel="Filter"
+
+            i18n-popupLabel="kendo.dropdowntree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            popupLabel="Options list"
         >
         </ng-container>
         <span
@@ -11411,14 +11486,10 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                         [filterInput]="filterable && !touchEnabled"
                         (keydown.arrowdown)="handleKeydown($event)"
                         (keydown.alt.arrowup)="handleKeydown($event)"
+                        [attr.aria-label]="messageFor('filterInputLabel')"
                         [(ngModel)]="filter"
                         class="k-input-inner"
                         role="textbox"
-                        aria-haspopup="true"
-                        aria-expanded="false"
-                        tabindex="0"
-                        aria-disabled="false"
-                        aria-readonly="false"
                         [kendoEventsOutsideAngular]="{
                             blur: handleBlur
                         }"
@@ -11435,6 +11506,7 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </ng-template>
             <kendo-treeview
                 #treeview
+                [attr.id]="treeViewId"
                 *ngIf="data.length !== 0 && !allNodesHidden"
                 [size]="size"
                 [nodes]="data"
@@ -11524,6 +11596,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-selectButtonText="kendo.dropdowntree.selectButtonText|The text set as aria-label on the select button"
             selectButtonText="Select"
+
+            i18n-filterInputLabel="kendo.dropdowntree.filterInputLabel|The text set as aria-label on the filter input"
+            filterInputLabel="Filter"
+
+            i18n-popupLabel="kendo.dropdowntree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            popupLabel="Options list"
         >
         </ng-container>
         <span
@@ -11594,14 +11672,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         [filterInput]="filterable && !touchEnabled"
                         (keydown.arrowdown)="handleKeydown($event)"
                         (keydown.alt.arrowup)="handleKeydown($event)"
+                        [attr.aria-label]="messageFor('filterInputLabel')"
                         [(ngModel)]="filter"
                         class="k-input-inner"
                         role="textbox"
-                        aria-haspopup="true"
-                        aria-expanded="false"
-                        tabindex="0"
-                        aria-disabled="false"
-                        aria-readonly="false"
                         [kendoEventsOutsideAngular]="{
                             blur: handleBlur
                         }"
@@ -11618,6 +11692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </ng-template>
             <kendo-treeview
                 #treeview
+                [attr.id]="treeViewId"
                 *ngIf="data.length !== 0 && !allNodesHidden"
                 [size]="size"
                 [nodes]="data"
@@ -12285,6 +12360,7 @@ class MultiSelectTreeComponent {
          */
         this.xIcon = xIcon;
         this.hostClasses = true;
+        this.treeViewId = `k-${guid$1()}`;
         this.role = 'combobox';
         this.ariaHasPopup = 'tree';
         /**
@@ -12437,7 +12513,7 @@ class MultiSelectTreeComponent {
          * @hidden
          */
         this.allNodesHidden = false;
-        this.tagListId = guid$1();
+        this.tagListId = `k-${guid$1()}`;
         this.tagPrefix = "tag-" + guid$1();
         this.focusedTagIndex = undefined;
         this._value = [];
@@ -12445,7 +12521,6 @@ class MultiSelectTreeComponent {
         this._popupSettings = DEFAULT_POPUP_SETTINGS;
         this._checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
         this._isFocused = false;
-        this._popupId = guid$1();
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
@@ -12464,7 +12539,7 @@ class MultiSelectTreeComponent {
         return this.disabled;
     }
     get hostAriaControls() {
-        return this.isOpen ? this._popupId : null;
+        return this.isOpen ? this.treeViewId : null;
     }
     get hostAriaAutocomplete() {
         return this.filterable ? 'list' : null;
@@ -13265,16 +13340,19 @@ class MultiSelectTreeComponent {
         });
         const popupWrapper = this.popupRef.popupElement;
         const { min, max } = this.width;
+        if (!this.appendTo) {
+            this.renderer.setAttribute(popupWrapper, 'role', 'region');
+            this.renderer.setAttribute(popupWrapper, 'aria-label', this.messageFor('popupLabel'));
+        }
         popupWrapper.style.minWidth = min;
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.height;
         this.renderer.setAttribute(popupWrapper, 'dir', this.direction);
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
-        this.renderer.setAttribute(popupWrapper, 'id', this._popupId);
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.opened.emit();
-            this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
+            this._searchableNodes = getSearchableItems(this.treeViewId, this.popupRef.popupElement);
         });
         this.popupRef.popupClose.subscribe(() => {
             this.closed.emit();
@@ -13503,7 +13581,7 @@ class MultiSelectTreeComponent {
     onChildrenLoaded() {
         setTimeout(() => {
             if (this.popupRef) {
-                this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
+                this._searchableNodes = getSearchableItems(this.treeViewId, this.popupRef.popupElement);
             }
         });
     }
@@ -13609,6 +13687,12 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
 
             i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
             checkAllText="Check all"
+
+            i18n-filterInputLabel="kendo.multiselecttree.filterInputLabel|The text set as aria-label on the filter input"
+            filterInputLabel="Filter"
+
+            i18n-popupLabel="kendo.multiselecttree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            popupLabel="Options list"
         >
         </ng-container>
         <kendo-taglist
@@ -13675,6 +13759,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                         #filterInput
                         (input)="handleFilterInputChange($event.target)"
                         [filterInput]="filterable && !touchEnabled"
+                        [attr.aria-label]="messageFor('filterInputLabel')"
                         (keydown)="handleKeydown($event)"
                         [(ngModel)]="filter"
                         class="k-input-inner"
@@ -13731,6 +13816,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             <kendo-treeview
                 #treeview
                 [size]="size"
+                [attr.id]="treeViewId"
                 [nodes]="data"
                 [style.maxHeight.px]="listHeight"
                 [animate]="false"
@@ -13825,6 +13911,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
             checkAllText="Check all"
+
+            i18n-filterInputLabel="kendo.multiselecttree.filterInputLabel|The text set as aria-label on the filter input"
+            filterInputLabel="Filter"
+
+            i18n-popupLabel="kendo.multiselecttree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            popupLabel="Options list"
         >
         </ng-container>
         <kendo-taglist
@@ -13891,6 +13983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         #filterInput
                         (input)="handleFilterInputChange($event.target)"
                         [filterInput]="filterable && !touchEnabled"
+                        [attr.aria-label]="messageFor('filterInputLabel')"
                         (keydown)="handleKeydown($event)"
                         [(ngModel)]="filter"
                         class="k-input-inner"
@@ -13947,6 +14040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <kendo-treeview
                 #treeview
                 [size]="size"
+                [attr.id]="treeViewId"
                 [nodes]="data"
                 [style.maxHeight.px]="listHeight"
                 [animate]="false"