New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Resolving Incorrect ARIA Attribute Value in RadComboBox with Load-on-Demand

Environment

ProductRadComboBox for ASP.NET AJAX
Version2024.3.805

Description

When using the RadComboBox with EnableLoadOnDemand="true" and subscribing to the OnItemsRequested event, an error notification from ARC Toolkit Chrome add-on indicates an error: ARIA attribute value is incorrect. This issue occurs on the first load when the listbox is not pre-loaded. However, after the listbox is displayed, the error does not recur.

Cause

The problem stems from the Load-on-Demand functionality, where the dropdown list is not initially rendered. Consequently, the aria-controls attribute references an ID for a component that does not exist at the moment, leading to the error.

Solution

To fix this issue, dynamically set the id attribute for the listbox in the OnClientLoad event and remove it in the OnClientDropDownOpened event. This approach ensures effective management of the aria-controls attribute, aligning it with the Load-on-Demand behavior and maintaining WAI-ARIA compliance.

aspx
<telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight"
    EnableAriaSupport="true"
    AllowCustomText="true"
    CausesValidation="false"
    EnableLoadOnDemand="true" OnItemsRequested="RadComboBox1_ItemsRequested"
    OnClientLoad="OnClientLoad"
    OnClientDropDownOpened="OnClientDropDownOpened"
    EmptyMessage="RadComboBox1 Empty Message">
</telerik:RadComboBox>

<script>
    function OnClientLoad(sender, args) {
        var listboxId = sender.get_id() + "_listbox";
        $telerik.$(".rcbSlide").attr("id", listboxId);
    }

    function OnClientDropDownOpened(sender, args) {
        var listboxId = sender.get_id() + "_listbox";
        $telerik.$(".rcbSlide").removeAttr("id");
    }
</script>

This solution ensures the aria-controls attribute correctly references the listbox when it becomes available, preventing accessibility issues related to non-existent IDs.

See Also