Pending Review
Last Updated: 29 Sep 2026 14:47 by Lee
Lee
Created on: 29 Sep 2026 14:46
Category: Kendo UI for jQuery
Type: Bug Report
1
Grouped virtual DropDownList renders a broken aria-labelledby reference on the first group
When a DropDownList uses virtual: true together with a grouped data source (group: { field: "..." }) and a fixedGroupTemplate, each rendered group <ul role="group"> gets an aria-labelledby pointing at its group header <li>, with an id like <optionId>-group-<index>-<groupValue>. The group currently under the sticky header (.k-list-group-sticky-header), usually group 0, has no inline header <li> because its name is shown in the sticky header. Its aria-labelledby is still set, though, so it points at an id that doesn't exist. Accessibility checkers such as WAVE report this as a "Broken ARIA reference". Looking at VirtualList._createGroupUl, aria-labelledby is always set from _generateGroupId(...), but the header <li> with that id is only created when hasHeader is true.

To reproduce (Kendo UI for jQuery 2026 Q2): create a DropDownList with virtual: { itemHeight: 26, valueMapper: ... }, groupTemplate and fixedGroupTemplate, and a data source grouped on a field with at least two groups. Open the popup and inspect the list. The second group's aria-labelledby resolves to its header <li>. The first group's aria-labelledby (for example ...-group-0-Client-Sets) matches no element in the DOM. Expected: every group's aria-labelledby points at an element that exists. For the headerless group that could be the sticky header, if it's given an id, or the attribute could be left off. As a workaround, we give the sticky header an id and use a MutationObserver to repoint any dangling aria-labelledby at it.
1 comment
Lee
Posted on: 29 Sep 2026 14:47
Here is an image of the WAVE report: