Fixing Missing ARIA Attributes in RadComboBox with CheckBoxes
Environment
Product | RadComboBox for ASP.NET AJAX |
Version | 2024.3.805 |
Description
When using the RadComboBox with EnableAriaSupport
set to true
and CheckBoxes
enabled, ARC toolkit reports errors related to missing aria-checked
attributes and an invalid use of aria-selected
in elements with the role of checkbox. This issue occurs when the dropdown is extended.
Cause
The cause of the issue is that the RadComboBox items with checkboxes enabled and ARIA support do not automatically manage the aria-checked
attribute, which is required for checkboxes to be compliant with WCAG 2.2 Success Criterion 4.1.2. Additionally, the aria-selected
attribute is used incorrectly in this context.
Solution
To resolve the missing aria-checked
attributes and correct the invalid use of aria-selected
, add a JavaScript function that sets the aria-checked
attribute for each checkbox item in the RadComboBox when the dropdown is opened. This function also ensures that the aria-selected
attribute is handled correctly.
The following example demonstrates how to implement this solution:
<telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight" EnableAriaSupport="true" CheckBoxes="true" OnClientDropDownOpened="onDropDownOpened">
<Items>
<telerik:RadComboBoxItem Text="Item 1" />
<telerik:RadComboBoxItem Text="Item 2" />
<telerik:RadComboBoxItem Text="Item 3" />
<telerik:RadComboBoxItem Text="Item 4" />
</Items>
</telerik:RadComboBox>
<script>
function onDropDownOpened(sender, args) {
var $ = $telerik.$;
// Select all li elements with class rcbItem and role checkbox and update aria-checked attribute
$('.rcbItem[role="checkbox"]').each(function () {
if ($(this).find('.rcbCheckBox').is(':checked')) {
$(this).attr('aria-checked', 'true');
} else {
$(this).attr('aria-checked', 'false');
}
});
}
</script>
This script selects all list items (li
) with the class rcbItem
and the role checkbox
, and updates the aria-checked
attribute based on whether the checkbox within the item is checked or not. This approach ensures that the RadComboBox with checkboxes complies with accessibility standards.