Completed
Last Updated: 15 Sep 2021 13:34 by ADMIN
Release 2.27.0
Created by: Xiaobo
Comments: 0
Category: RadioGroup
Type: Bug Report
0

When I test the accessibility of the TelerikRadioGroup I have found out issues.

 

Unplanned
Last Updated: 16 Aug 2021 07:26 by ADMIN
Created by: Nasoloniaina
Comments: 0
Category: RadioGroup
Type: Feature Request
1
I would like to add icon to TelerikRadioGroup instead of only text.
Under Review
Last Updated: 11 Aug 2021 18:42 by ADMIN
Created by: Matt
Comments: 1
Category: RadioGroup
Type: Bug Report
0
ISSUE - ul (role="radiogroup") needs a group label
what to do:
  • create a span before first LI as label
  • UL shall reference span via aria-labelledby
  • group label needs to look like a group label (it must be more significant/important than the radio labels)

As these elements are wrapped by the control this needs to be updated internally.

Unplanned
Last Updated: 16 Jul 2021 19:42 by Dale
Created by: Mikael
Comments: 1
Category: RadioGroup
Type: Feature Request
4

I would like to be able to disable one or more radio buttons in the RadioGroup.

 

<AdminEdit>

The CSS workaround below uses the nth-child selector. In the example, I have disabled the third and fourth options and you can use it as a base and extend that sample in your own application.

<style>
    .disabled-items li:nth-child(3),
    .disabled-items li:nth-child(4) {
        outline: none;
        cursor: default;
        opacity: 0.6;
        -webkit-filter: grayscale(0.1);
        filter: grayscale(0.1);
        pointer-events: none;
        box-shadow: none;
    }
</style>

<TelerikRadioGroup Data="@GenderOptions"
                   @bind-Value="@ChosenGender"
                   ValueField="@nameof(GenderModel.GenderId)"
                   TextField="@nameof(GenderModel.GenderText)"
                   Class="disabled-items">
</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", isEnabled = true },
        new GenderModel { GenderId = 2, GenderText = "Male", isEnabled = false },
        new GenderModel { GenderId = 3, GenderText = "Other", isEnabled = true },
        new GenderModel { GenderId = 4, GenderText = "Prefer not to say", isEnabled = true },
    };

    public class GenderModel
    {
        public int GenderId { get; set; }
        public string GenderText { get; set; }
        public bool isEnabled { get; set; }
    }
}

</AdminEdit>