@progress/kendo-angular-dropdowns 21.0.0-develop.2 → 21.0.0-develop.21

package/esm2022/common/list.component.mjs

@@ -61,7 +61,19 @@ export class ListComponent {
     allowCustom;
     defaultItem;
     set data(data) {
-        this._data = data[0] && data[0].header ? data.slice(0) : data;
+        this._data = data[0]?.header ? data.slice(0) : data;
+        if (this.dataService.grouped) {
+            if (this.virtual) {
+                const firstGroupItem = this.dataService.data.find(item => item.header && item.groupIndex === this.data[0].groupIndex);
+                if (!this.data[0].header) {
+                    this._data = [firstGroupItem, ...this._data.slice(1)];
+                }
+            }
+            this.groupedData = this._data.filter(item => item?.header);
+            this.groupedData.forEach(group => {
+                group.items = this._data.filter(item => !item.header && item.groupIndex === group.groupIndex);
+            });
+        }
     }
     get data() {
         return this._data;
@@ -78,6 +90,7 @@ export class ListComponent {
     get size() {
         return this._size;
     }
+    groupedData;
     rounded = 'medium';
     onClick = new EventEmitter();
     pageChange = new EventEmitter();
@@ -157,9 +170,6 @@ export class ListComponent {
                 this.scrollToFocused = !changes['data'].isFirstChange();
             }
             this.setOverflow();
-            this.zone.onStable.pipe(take(1)).subscribe(() => {
-                this.setGroupAttributes();
-            });
         }
         if (isChanged('virtual', changes, false)) {
             this.setOverflow();
@@ -175,31 +185,8 @@ export class ListComponent {
                 this.lastScrollTop = this.content.nativeElement.scrollTop;
             });
         });
-        this.setGroupAttributes();
         this.setOverflow();
     }
-    setGroupAttributes() {
-        const liItems = document.querySelectorAll('li');
-        let isGroup;
-        let childrenliItemsIds = [];
-        let firstGroupReached = false;
-        let previousGroup;
-        liItems.forEach((li, idx) => {
-            isGroup = li.getAttribute('role') === 'group';
-            if (!isGroup && firstGroupReached) {
-                this.renderer.setAttribute(li, 'aria-describedby', previousGroup.getAttribute('id'));
-                childrenliItemsIds.push(li.getAttribute('id'));
-                if (idx + 1 >= liItems.length || liItems[idx + 1]?.getAttribute('role') === 'group') {
-                    this.renderer.setAttribute(previousGroup, 'aria-owns', childrenliItemsIds.join(' '));
-                    childrenliItemsIds = [];
-                }
-            }
-            if (isGroup) {
-                firstGroupReached = true;
-                previousGroup = li;
-            }
-        });
-    }
     ngAfterViewChecked() {
         if (this.virtual) {
             this.positionItems();
@@ -274,7 +261,7 @@ export class ListComponent {
         const item = this.firstVisibleItem();
         if (item) {
             let index;
-            if (item.getAttribute("role") === "group") {
+            if (item.getAttribute("role") === "presentation") {
                 index = parseInt(item.getAttribute("group-index"), 10);
                 this.currentGroup = this.dataService.groupAt(index)?.value;
             }
@@ -320,7 +307,6 @@ export class ListComponent {
             this.lastLoaded = end;
             this.pageChange.emit({ skip: start, take: this.pageSize });
         });
-        this.setGroupAttributes();
     }
     index(groupIndex, itemIndex) {
         return groupIndex > 0 ? (this.dataService.groupIndices[groupIndex - 1] + itemIndex) : itemIndex;
@@ -331,6 +317,9 @@ export class ListComponent {
     getValue(dataItem) {
         return getter(dataItem, this.valueField);
     }
+    generateGroupId(dataItem) {
+        return `${this.optionPrefix}-${dataItem.groupIndex}-${dataItem.value.toString().split(' ').join('')}`;
+    }
     isDisabled(index) {
         if (isPresent(this.virtual) && !this.dataService.grouped) {
             index += this.virtual.skip;
@@ -441,15 +430,6 @@ export class ListComponent {
             this.renderer.setStyle(item.element.nativeElement, "transform", `translateY(${offsetY}px`);
         });
     }
-    /**
-     * Indicates whether the first group header from the data set is in the targeted virtual page.
-     */
-    firstGroupHeaderInTargetedPage(itemIndex) {
-        if (!isPresent(this.virtual)) {
-            return true;
-        }
-        return this.virtual.skip === 0 && (this.virtual.pageSize > itemIndex);
-    }
     setComponentClasses() {
         if (this.type === 'list') {
             this.renderer.addClass(this.wrapper.nativeElement, 'k-list');
@@ -465,7 +445,7 @@ export class ListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, deps: [{ token: i1.DataService }, { token: i0.ElementRef }, { token: i2.SelectionService }, { token: i3.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i4.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="defaultItem && !template"
         class="k-list-optionlabel"
         [ngClass]="{ 'k-disabled': isDisabledDefaultItem }"
@@ -519,15 +499,22 @@ export class ListComponent {
         [class]="listContentClass"
         [style.maxHeight.px]="height"
         unselectable="on"
-        (scroll)="popupListScroll.emit($event)">
+        (scroll)="popupListScroll.emit($event)"
+        [attr.role]="dataService.grouped ? 'listbox' : null"
+        [attr.id]="dataService.grouped ? id : null"
+        [attr.aria-live]="dataService.grouped ? ariaLive : null"
+        [attr.aria-multiselectable]="dataService.grouped ? isMultiselect : null"
+        [attr.aria-hidden]="dataService.grouped ? !show : null"
+        >
         <ul #list
-            role="listbox"
+            *ngIf="!dataService.grouped"
+            [attr.role]="'listbox'"
             [class]="listClass"
             [attr.id]="id"
             [attr.aria-live]="ariaLive"
             [attr.aria-multiselectable]="isMultiselect"
             [attr.aria-hidden]="!show">
-            <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
+            <ng-container *ngFor="let dataItem of data; let itemIndex = index">
                 <li
                     role="option"
                     kendoDropDownsSelectable
@@ -563,73 +550,81 @@ export class ListComponent {
                     </ng-template>
                     <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
                 </li>
-            </ng-template>
-            <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
-                <li
-                    #li
-                    *ngIf="dataItem.header"
-                    role="group"
+            </ng-container>
+            <kendo-resize-sensor
+                *ngIf="!virtual"
+                (resize)="listResize.emit()"
+            >
+            </kendo-resize-sensor>
+        </ul>
+
+        <ng-container *ngIf="dataService.grouped" #list>
+            <ul *ngFor="let dataItem of groupedData"
+                #groupUl
+                class="k-list-ul"
+                [attr.role]="'group'"
+                [attr.aria-labelledby]="generateGroupId(dataItem)"
+                >
+                <li *ngIf="dataItem.header"
+                    role="presentation"
                     [class]="listGroupItemClass"
-                    [class.k-table-alt-row]="isAltRow(itemIndex - 1)"
+                    [class.k-table-alt-row]="isAltRow(dataItem.index - 1)"
                     [ngStyle]="{
                         'height.px': virtual?.itemHeight,
                         'minHeight.px' : virtual?.itemHeight,
                         'boxSizing' : virtual ? 'border-box' : 'inherit'}"
                     [attr.group-index]="dataItem.index"
-                    [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value.toString().split(' ').join('')"
-                    [attr.tabIndex]="-1"
-                    [style.width.px]="rowWidth ?? null">
-                        <span [class]="listGroupItemTextClass">
-                            <ng-template *ngIf="groupTemplate"
-                                [templateContext]="{
-                                    templateRef: groupTemplate.templateRef,
-                                    $implicit: dataItem.value
-                            }">
-                            </ng-template>
-                            <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
-                        </span>
+                    [attr.id]="groupUl.getAttribute('aria-labelledby')"
+                    [style.width.px]="rowWidth ?? null"
+                    >
+                    <span [class]="listGroupItemTextClass">
+                        <ng-template *ngIf="groupTemplate"
+                            [templateContext]="{
+                                templateRef: groupTemplate.templateRef,
+                                $implicit: dataItem.value
+                        }">
+                        </ng-template>
+                        <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
+                    </span>
                 </li>
-                <li
-                    #li
-                    *ngIf="!dataItem.header"
+                <li *ngFor="let item of dataItem.items"
                     role="option"
                     kendoDropDownsSelectable
                     [height]="virtual?.itemHeight"
-                    [index]="dataItem.offsetIndex"
+                    [index]="item.offsetIndex"
                     [multipleSelection]="multipleSelection"
-                    [attr.absolute-index]="dataItem.index"
-                    [attr.id]="optionPrefix + '-' + (itemIndex - 1 - dataItem.groupIndex)"
+                    [attr.absolute-index]="item.index"
+                    [attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
                     [attr.tabIndex]="-1"
-                    [attr.aria-selected]="isItemSelected(dataItem.offsetIndex)"
+                    [attr.aria-selected]="isItemSelected(item.offsetIndex)"
                     [class]="listItemClass"
                     [ngClass]="{
-                        'k-disabled': isDisabled(dataItem.offsetIndex),
-                        'k-table-alt-row': isAltRow(itemIndex - 1)
+                        'k-disabled': isDisabled(item.offsetIndex),
+                        'k-table-alt-row': isAltRow(item.index - 1)
                     }"
-                    [style.width.px]="rowWidth ?? null"
-                >
+                    [style.width.px]="rowWidth ?? null">
                     <ng-template *ngIf="template"
                         [templateContext]="{
                             templateRef: template.templateRef,
-                            $implicit: dataItem.value
+                            $implicit: item.value
                         }">
                     </ng-template>
-                    <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem.value) }}</span></ng-template>
+                    <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(item.value) }}</span></ng-template>
                 </li>
-            </ng-template>
-            <kendo-resize-sensor
-                *ngIf="!virtual"
-                (resize)="listResize.emit()"
-            >
-            </kendo-resize-sensor>
-        </ul>
+                <kendo-resize-sensor
+                    *ngIf="!virtual"
+                    (resize)="listResize.emit()"
+                >
+                </kendo-resize-sensor>
+            </ul>
+        </ng-container>
         <div *ngIf="virtual" #virtualContainer class="k-height-container" role="presentation">
             <div [style.height.px]="scrollHeight">
                 <kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
             </div>
         </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ListItemDirective, selector: "\"li[role=option], li[role=group], li[role=presentation]\"" }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
@@ -689,15 +684,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [class]="listContentClass"
         [style.maxHeight.px]="height"
         unselectable="on"
-        (scroll)="popupListScroll.emit($event)">
+        (scroll)="popupListScroll.emit($event)"
+        [attr.role]="dataService.grouped ? 'listbox' : null"
+        [attr.id]="dataService.grouped ? id : null"
+        [attr.aria-live]="dataService.grouped ? ariaLive : null"
+        [attr.aria-multiselectable]="dataService.grouped ? isMultiselect : null"
+        [attr.aria-hidden]="dataService.grouped ? !show : null"
+        >
         <ul #list
-            role="listbox"
+            *ngIf="!dataService.grouped"
+            [attr.role]="'listbox'"
             [class]="listClass"
             [attr.id]="id"
             [attr.aria-live]="ariaLive"
             [attr.aria-multiselectable]="isMultiselect"
             [attr.aria-hidden]="!show">
-            <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
+            <ng-container *ngFor="let dataItem of data; let itemIndex = index">
                 <li
                     role="option"
                     kendoDropDownsSelectable
@@ -733,66 +735,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     </ng-template>
                     <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
                 </li>
-            </ng-template>
-            <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
-                <li
-                    #li
-                    *ngIf="dataItem.header"
-                    role="group"
+            </ng-container>
+            <kendo-resize-sensor
+                *ngIf="!virtual"
+                (resize)="listResize.emit()"
+            >
+            </kendo-resize-sensor>
+        </ul>
+
+        <ng-container *ngIf="dataService.grouped" #list>
+            <ul *ngFor="let dataItem of groupedData"
+                #groupUl
+                class="k-list-ul"
+                [attr.role]="'group'"
+                [attr.aria-labelledby]="generateGroupId(dataItem)"
+                >
+                <li *ngIf="dataItem.header"
+                    role="presentation"
                     [class]="listGroupItemClass"
-                    [class.k-table-alt-row]="isAltRow(itemIndex - 1)"
+                    [class.k-table-alt-row]="isAltRow(dataItem.index - 1)"
                     [ngStyle]="{
                         'height.px': virtual?.itemHeight,
                         'minHeight.px' : virtual?.itemHeight,
                         'boxSizing' : virtual ? 'border-box' : 'inherit'}"
                     [attr.group-index]="dataItem.index"
-                    [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value.toString().split(' ').join('')"
-                    [attr.tabIndex]="-1"
-                    [style.width.px]="rowWidth ?? null">
-                        <span [class]="listGroupItemTextClass">
-                            <ng-template *ngIf="groupTemplate"
-                                [templateContext]="{
-                                    templateRef: groupTemplate.templateRef,
-                                    $implicit: dataItem.value
-                            }">
-                            </ng-template>
-                            <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
-                        </span>
+                    [attr.id]="groupUl.getAttribute('aria-labelledby')"
+                    [style.width.px]="rowWidth ?? null"
+                    >
+                    <span [class]="listGroupItemTextClass">
+                        <ng-template *ngIf="groupTemplate"
+                            [templateContext]="{
+                                templateRef: groupTemplate.templateRef,
+                                $implicit: dataItem.value
+                        }">
+                        </ng-template>
+                        <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
+                    </span>
                 </li>
-                <li
-                    #li
-                    *ngIf="!dataItem.header"
+                <li *ngFor="let item of dataItem.items"
                     role="option"
                     kendoDropDownsSelectable
                     [height]="virtual?.itemHeight"
-                    [index]="dataItem.offsetIndex"
+                    [index]="item.offsetIndex"
                     [multipleSelection]="multipleSelection"
-                    [attr.absolute-index]="dataItem.index"
-                    [attr.id]="optionPrefix + '-' + (itemIndex - 1 - dataItem.groupIndex)"
+                    [attr.absolute-index]="item.index"
+                    [attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
                     [attr.tabIndex]="-1"
-                    [attr.aria-selected]="isItemSelected(dataItem.offsetIndex)"
+                    [attr.aria-selected]="isItemSelected(item.offsetIndex)"
                     [class]="listItemClass"
                     [ngClass]="{
-                        'k-disabled': isDisabled(dataItem.offsetIndex),
-                        'k-table-alt-row': isAltRow(itemIndex - 1)
+                        'k-disabled': isDisabled(item.offsetIndex),
+                        'k-table-alt-row': isAltRow(item.index - 1)
                     }"
-                    [style.width.px]="rowWidth ?? null"
-                >
+                    [style.width.px]="rowWidth ?? null">
                     <ng-template *ngIf="template"
                         [templateContext]="{
                             templateRef: template.templateRef,
-                            $implicit: dataItem.value
+                            $implicit: item.value
                         }">
                     </ng-template>
-                    <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem.value) }}</span></ng-template>
+                    <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(item.value) }}</span></ng-template>
                 </li>
-            </ng-template>
-            <kendo-resize-sensor
-                *ngIf="!virtual"
-                (resize)="listResize.emit()"
-            >
-            </kendo-resize-sensor>
-        </ul>
+                <kendo-resize-sensor
+                    *ngIf="!virtual"
+                    (resize)="listResize.emit()"
+                >
+                </kendo-resize-sensor>
+            </ul>
+        </ng-container>
         <div *ngIf="virtual" #virtualContainer class="k-height-container" role="presentation">
             <div [style.height.px]="scrollHeight">
                 <kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
@@ -873,8 +883,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['content', { static: true }]
             }], list: [{
                 type: ViewChild,
-                args: ['list', { static: true }]
+                args: ['list']
             }], virtualContainer: [{
                 type: ViewChild,
-                args: ['virtualContainer', { static: false }]
+                args: ['virtualContainer']
             }] } });

package/esm2022/dropdownlist/dropdownlist.component.mjs

@@ -978,14 +978,11 @@ export class DropDownListComponent {
             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) {
-            listBox.setAttribute('aria-labelledby', ariaLabel);
-        }
         this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
+            if (!this.dataService.grouped) {
+                setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
+            }
             this.setAriaactivedescendant();
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
@@ -1444,7 +1441,9 @@ export class DropDownListComponent {
         this.cdr.detectChanges();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
-        setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
+        if (!this.dataService.grouped) {
+            setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
+        }
         this.setAriaactivedescendant();
         this.adaptiveTitle = setActionSheetTitle(this.wrapper, this.adaptiveTitle);
         this.cdr.detectChanges();

package/esm2022/multiselect/multiselect.component.mjs

@@ -1689,7 +1689,9 @@ export class MultiSelectComponent {
         popupWrapper.setAttribute("dir", this.direction);
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+            if (!this.dataService.grouped) {
+                setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+            }
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -1750,7 +1752,9 @@ export class MultiSelectComponent {
         // Stores the current value state until the user either accepts or cancels it
         this._valueHolder = [...this.value];
         this.cdr.detectChanges();
-        setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+        if (!this.dataService.grouped) {
+            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+        }
         this.adaptiveTitle = setActionSheetTitle(this.searchbar.input, this.adaptiveTitle);
         this.cdr.detectChanges();
         this.opened.emit();

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1761752831,
-    version: '21.0.0-develop.2',
+    publishDate: 1762426753,
+    version: '21.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };