@progress/kendo-angular-dropdowns 11.2.0 → 11.3.0-develop.10

package/autocomplete/autocomplete.component.d.ts

@@ -75,6 +75,7 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     get suggestion(): string;
     get appendTo(): ViewContainerRef;
     get clearButtonVisiblity(): string;
+    get ariaControls(): string;
     dataItem: any;
     /**
      * Toggles the visibility of the popup.

package/comboboxes/combobox.component.d.ts

@@ -73,6 +73,10 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
     caretAltDownIcon: SVGIcon;
     set text(text: any);
     get text(): any;
+    /**
+     * @hidden
+     */
+    get ariaControls(): string;
     /**
      * @hidden
      */

package/common/localization/messages.d.ts

@@ -24,6 +24,14 @@ export declare class Messages extends ComponentMessages {
      * The text set as aria-label on the select button.
      */
     selectButtonText: string;
+    /**
+     * The text set as aria-label on the list filter input.
+     */
+    filterInputLabel: string;
+    /**
+     * The text set as aria-label on the popup containing the list of options when its role is `region`.
+     */
+    popupLabel: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<Messages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, never, never, { "noDataText": "noDataText"; "clearTitle": "clearTitle"; "checkAllText": "checkAllText"; "selectButtonText": "selectButtonText"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, never, never, { "noDataText": "noDataText"; "clearTitle": "clearTitle"; "checkAllText": "checkAllText"; "selectButtonText": "selectButtonText"; "filterInputLabel": "filterInputLabel"; "popupLabel": "popupLabel"; }, {}, never>;
 }

package/common/searchbar.component.d.ts

@@ -15,15 +15,15 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
     private injector;
     direction: Direction;
     id: string;
-    listId: string;
     tagListId: string;
     activeDescendant: string;
     disabled: boolean;
     readonly: boolean;
     tabIndex: number;
-    popupOpen: boolean;
     role: string;
     isLoading: boolean;
+    ariaControls: string;
+    ariaExpanded: boolean | null;
     set isSuggestable(isSuggestable: boolean);
     get isSuggestable(): boolean;
     set isFilterable(isFilterable: boolean);
@@ -45,7 +45,6 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
     get value(): string;
     set placeholder(text: string);
     get placeholder(): string;
-    get ariaExpanded(): boolean;
     private _userInput;
     private _previousValue;
     private _placeholder;
@@ -68,5 +67,5 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
     blur(): void;
     setInputSize(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SearchBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SearchBarComponent, "kendo-searchbar", never, { "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"; }, { "valueChange": "valueChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onNavigate": "onNavigate"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SearchBarComponent, "kendo-searchbar", never, { "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"; }, { "valueChange": "valueChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onNavigate": "onNavigate"; }, never, never>;
 }

package/common/util.d.ts

@@ -161,12 +161,6 @@ export declare const getFillModeClass: (component: string, fillMode: DropDownFil
  * @hidden
  */
 export declare const filterAndMap: (arr: any[], predicate: (item: any) => boolean, mapper: (item: any) => any) => any[];
-/**
- * @hidden
- *
- * Returns true if the used browser is Safari.
- */
-export declare const isSafari: (userAgent: any) => boolean;
 /**
  * @hidden
  *
@@ -184,7 +178,7 @@ export declare const getTextField: (field: string | string[], level: number) =>
 /**
  * @hidden
  */
-export declare const getSearchableItems: (popupId: string, popupElement: HTMLElement) => {
+export declare const getSearchableItems: (treeViewId: string, popupElement: HTMLElement) => {
     text: string;
     index: string;
 }[];

package/dropdownlist/dropdownlist.component.d.ts

@@ -76,6 +76,7 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     get height(): any;
     get widgetTabIndex(): number;
     get ariaExpanded(): boolean;
+    listBoxId: string;
     get ariaControls(): string;
     get ariaActivedescendant(): string;
     get appendTo(): ViewContainerRef;
@@ -315,7 +316,6 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     role: string;
     haspopup: string;
     get isAriaExpanded(): boolean;
-    get hostAriaControls(): string;
     get hostAriaInvalid(): string;
     get hostAriaActivedescendant(): string;
     /**
@@ -331,7 +331,6 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
      */
     click(event: any): void;
     groupIndices: any[];
-    listBoxId: string;
     optionPrefix: string;
     valueLabelId: string;
     filterText: string;

package/dropdowntrees/dropdowntree.component.d.ts

@@ -381,6 +381,7 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
      * @hidden
      */
     get formControl(): FormControl;
+    treeViewId: string;
     private _nodes;
     private _value;
     private _popupSettings;
@@ -388,7 +389,6 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
     private _isFocused;
     private _dataItem;
     private _treeview;
-    private _popupId;
     private _size;
     private _rounded;
     private _fillMode;

package/dropdowntrees/multiselecttree.component.d.ts

@@ -51,6 +51,7 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     xIcon: SVGIcon;
     hostClasses: boolean;
     get isDisabled(): boolean;
+    treeViewId: string;
     get hostAriaControls(): string;
     get hostAriaAutocomplete(): string;
     get isLoading(): boolean;
@@ -438,7 +439,6 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     private _isFocused;
     private _treeview;
     private _dataItems;
-    private _popupId;
     private _size;
     private _rounded;
     private _fillMode;

package/esm2020/autocomplete/autocomplete.component.mjs

@@ -178,8 +178,8 @@ export 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();
@@ -243,6 +243,9 @@ export 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.
@@ -815,9 +818,9 @@ export 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,
@@ -834,7 +837,11 @@ export 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) {
@@ -939,22 +946,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)"
@@ -1026,7 +1037,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: i7.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: i9.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: i11.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: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.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: i9.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: i11.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: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -1059,22 +1070,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)"

package/esm2020/comboboxes/combobox.component.mjs

@@ -237,8 +237,8 @@ export 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 = (_) => { };
         /**
@@ -272,6 +272,12 @@ export class ComboBoxComponent {
     get text() {
         return this._text;
     }
+    /**
+     * @hidden
+     */
+    get ariaControls() {
+        return this.isOpen ? this.listBoxId : undefined;
+    }
     /**
      * @hidden
      */
@@ -1210,7 +1216,11 @@ export 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) {
@@ -1314,12 +1324,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"
@@ -1329,7 +1343,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)"
@@ -1421,7 +1434,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: i7.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: i9.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: i11.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: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.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: i9.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: i11.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: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1455,12 +1468,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"
@@ -1470,7 +1487,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)"

package/esm2020/comboboxes/multicolumncombobox.component.mjs

@@ -188,13 +188,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"
@@ -204,7 +207,6 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             [disabled]="disabled"
             [readonly]="readonly"
             [tabIndex]="tabIndex"
-            [popupOpen]="isOpen"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
@@ -340,7 +342,6 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 <!--list-->
                 <kendo-list
                     #optionsList
-                    [id]="listBoxId"
                     [optionPrefix]="optionPrefix"
                     [data]="data"
                     [textField]="textField"
@@ -406,7 +407,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: i7.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: i9.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: i11.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: i13.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: i7.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: i9.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: i11.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: i13.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: [{
@@ -447,13 +448,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"
@@ -463,7 +467,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)"
@@ -599,7 +602,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <!--list-->
                 <kendo-list
                     #optionsList
-                    [id]="listBoxId"
                     [optionPrefix]="optionPrefix"
                     [data]="data"
                     [textField]="textField"

package/esm2020/common/list.component.mjs

@@ -432,6 +432,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)"
@@ -560,6 +563,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)"

package/esm2020/common/localization/messages.mjs

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export 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: [{
@@ -22,4 +22,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], selectButtonText: [{
                 type: Input
+            }], filterInputLabel: [{
+                type: Input
+            }], popupLabel: [{
+                type: Input
             }] } });

package/esm2020/common/searchbar.component.mjs

@@ -3,9 +3,9 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, Renderer2, Input, Output, EventEmitter, ViewChild, ElementRef, HostBinding, Injector } from '@angular/core';
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isSafari } from '@progress/kendo-angular-common';
 import { Keys } from '@progress/kendo-angular-common';
-import { combineStr, isJapanese, isSafari } from './util';
+import { combineStr, isJapanese } from './util';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Subscription } from 'rxjs';
 import { NgControl } from '@angular/forms';
@@ -19,6 +19,7 @@ export 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();
@@ -75,9 +76,6 @@ export 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'));
@@ -192,14 +190,14 @@ export 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]="{
@@ -212,7 +210,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"
@@ -230,7 +228,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]="{
@@ -243,7 +241,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"
@@ -253,8 +251,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: [{
@@ -265,12 +261,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: [{

package/esm2020/common/util.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable no-bitwise */
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
-import { detectDesktopBrowser, detectMobileOS, getter as fieldAccessor } from '@progress/kendo-common';
+import { getter as fieldAccessor } from '@progress/kendo-common';
 /**
  * @hidden
  */
@@ -328,15 +328,6 @@ export const getFillModeClass = (component, fillMode) => {
  * @hidden
  */
 export const filterAndMap = (arr, predicate, mapper) => arr.reduce((acc, curr) => predicate(curr) ? [...acc, mapper(curr)] : acc, []);
-/**
- * @hidden
- *
- * Returns true if the used browser is Safari.
- */
-export const isSafari = (userAgent) => {
-    return detectDesktopBrowser(userAgent).safari ||
-        (detectMobileOS(userAgent) && detectMobileOS(userAgent).browser === 'mobilesafari');
-};
 /**
  * @hidden
  *
@@ -365,8 +356,8 @@ export const getTextField = (field, level) => {
 /**
  * @hidden
  */
-export const getSearchableItems = (popupId, popupElement) => {
-    const nodeSeletor = `kendo-popup[id='${popupId}'] li.k-treeview-item`;
+export 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') };