Resolving Incorrect ARIA Attribute Value in RadComboBox with Load-on-Demand
Environment
Product | RadComboBox for ASP.NET AJAX |
Version | 2024.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.
<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.