The RadioGroup's FocusAsync() method does not work. To reproduce, run this example and press the button: https://docs.telerik.com/blazor-ui/components/radiogroup/overview#radiogroup-reference-and-methods
===
A possible workaround is to use JavaScript to focus the first or the selected <input> element:
@inject IJSRuntime js
<TelerikButton OnClick="@FocusRadioGroup">Focus RadioGroup</TelerikButton>
<TelerikRadioGroup Data="@RadioGroupData"
Class="my-radiogroup"
@bind-Value="@RadioGroupValue"
ValueField="@nameof(ListItem.Id)"
TextField="@nameof(ListItem.Text)">
</TelerikRadioGroup>
@* Move JavaScript code to a separate JS file in production *@
<script suppress-error="BL9992">function focusRadio(RadioGroupValue) {
var mrg = RadioGroupValue == null ?
document.querySelector(".my-radiogroup .k-radio-list-item input") :
document.querySelector(`.my-radiogroup .k-radio-list-item input[value='${RadioGroupValue}']`);
if (mrg) {
mrg.focus()
}
}</script>
@code{
private int? RadioGroupValue { get; set; }
List<ListItem> RadioGroupData { get; set; } = new List<ListItem>() {
new ListItem { Id = 1, Text = "Foo" },
new ListItem { Id = 2, Text = "Bar" },
new ListItem { Id = 3, Text = "Baz" }
};
private async Task FocusRadioGroup()
{
await Task.Delay(1);
await js.InvokeVoidAsync("focusRadio", RadioGroupValue);
}
public class ListItem
{
public int Id { get; set; }
public string Text { get; set; } = string.Empty;
}
}
As these elements are wrapped by the control this needs to be updated internally.
There is an attribute called AriaLabelledBy available on the control but it does not work. It would be good for the AriaLabelledBy attribute to do what it is supposed to do and make it work like the following code:
<h3 id="grouplabel1">Chosen gender: @( ChosenGender == 0 ? "no selection yet" : ChosenGender.ToString() )</h3>
<TelerikRadioGroup Data="@GenderOptions"
@bind-Value="@ChosenGender"
ValueField="@nameof(GenderModel.GenderId)"
TextField="@nameof(GenderModel.GenderText)" AriaLabelledBy="grouplabel1">
</TelerikRadioGroup>
@code {
TelerikRadioGroup<GenderModel, int?> RadioGroupRef { get; set; }
int ChosenGender { get; set; }
List<GenderModel> GenderOptions { get; set; } = new List<GenderModel>
{
new GenderModel { GenderId = 1, GenderText = "Female" },
new GenderModel { GenderId = 2, GenderText = "Male" },
new GenderModel { GenderId = 3, GenderText = "Other" },
new GenderModel { GenderId = 4, GenderText = "Prefer not to say" },
};
public class GenderModel
{
public int GenderId { get; set; }
public string GenderText { get; set; }
}
}
----------ADMIN EDIT----------
A possible workaround is to wrap the RadioGroup inside a normal div and use the normal HTML aria-labelledby attribute:
<div role="radiogroup" aria-labelledby="group_label_1">
<h3 id="group_label_1" >Chosen gender: @( ChosenGender == 0 ? "no selection yet" : ChosenGender.ToString() )</h3>
<br />
<TelerikRadioGroup Data="@GenderOptions"
@bind-Value="@ChosenGender"
ValueField="@nameof(GenderModel.GenderId)"
TextField="@nameof(GenderModel.GenderText)">
</TelerikRadioGroup>
</div>
@code{
TelerikRadioGroup<GenderModel, int?> RadioGroupRef { get; set; }
int ChosenGender { get; set; }
List<GenderModel> GenderOptions { get; set; } = new List<GenderModel>
{
new GenderModel { GenderId = 1, GenderText = "Female" },
new GenderModel { GenderId = 2, GenderText = "Male" },
new GenderModel { GenderId = 3, GenderText = "Other" },
new GenderModel { GenderId = 4, GenderText = "Prefer not to say" },
};
public class GenderModel
{
public int GenderId { get; set; }
public string GenderText { get; set; }
}
}
A RadioGroup inside a Grid EditorTemplate will fire OnBlur when the user clicks on it. This will close the edit cell and (usually) not apply the new value.
Here is a test page: https://blazorrepl.telerik.com/wvbmkMvd48rpMN4547
When I test the accessibility of the TelerikRadioGroup I have found out issues.