When the dropdown is open, the input's aria-activedescendant attribute references an id that does not exist in the DOM. Since aria-activedescendant must point to the id of an actually rendered option element, the attribute is invalid and assistive technologies cannot determine which option is currently active.
aria-activedescendant="b45bcb14-4093-4de8-ad31-cae8ec8ca9c4"
<TelerikMultiSelect Data="@Hobbies"
@bind-Value="@SelectedHobbyIds"
ValueField="@nameof(HobbiesDto.HobbyId)"
TextField="@nameof(HobbiesDto.HobbyName)"
Placeholder="Select your favourite sport..."
Id="multiselect"
Width="100%"
Rounded="@ThemeConstants.DropDownList.Rounded.Medium"
FillMode="@ThemeConstants.AutoComplete.FillMode.Outline"
TagMode="@MultiSelectTagMode.Single"
ShowClearButton="false">
<MultiSelectSettings>
<MultiSelectPopupSettings Height="@CustomThemeConstants.Multiselect.PopupHeight" MaxHeight="@CustomThemeConstants.Multiselect.PopupMaxHeight" />
</MultiSelectSettings>
</TelerikMultiSelect>
@code {
public List<int> SelectedHobbyIds { get; set; } = [];
public IEnumerable<HobbiesDto> Hobbies { get; set; } = new List<HobbiesDto>()
{
new HobbiesDto(1, "Basketball"),
new HobbiesDto(2, "Golf"),
new HobbiesDto(3, "Baseball"),
new HobbiesDto(4, "Table Tennis"),
new HobbiesDto(5, "Volleyball"),
new HobbiesDto(6, "Football"),
new HobbiesDto(7, "Boxing"),
new HobbiesDto(8, "Badminton"),
new HobbiesDto(9, "Cycling"),
new HobbiesDto(10, "Gymnastics"),
new HobbiesDto(11, "Swimming"),
new HobbiesDto(12, "Wrestling"),
new HobbiesDto(13, "Snooker"),
new HobbiesDto(14, "Skiing"),
new HobbiesDto(15, "Handball"),
};
public class HobbiesDto
{
public int HobbyId { get; set; }
public string HobbyName { get; set; } = string.Empty;
public HobbiesDto() { }
public HobbiesDto(int id, string name)
{
HobbyId = id;
HobbyName = name;
}
}
}