This is a migrated thread and some comments may be shown as answers.

Telerik:radpicker

5 Answers 113 Views
DatePicker
This is a migrated thread and some comments may be shown as answers.
Thao
Top achievements
Rank 1
Thao asked on 26 Aug 2019, 05:04 PM
Hello, I have a missing form label while running WAVES tool on telerik:RadDatePicker control.  I added DateInput-Label="hello" and it's clear the error but I do not want to see "hello" label.  I tried to add a class visuallyhidden but it's not working.  Is there any other way? Thank you.

<telerik:RadDatePicker ID="txtPlanEffectiveDate" runat="server" DateInput-DateFormat="MM/dd/yyyy"
Calendar-EnableAriaSupport="true" Calendar-EnableKeyboardNavigation="true">
</telerik:RadDatePicker>

5 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 29 Aug 2019, 01:11 PM

Hi Thao,

Thank you for sharing this accessibility scenario!

My advice is to set the RadDatePicker property EnableAriaSupport to true as well as the RenderMode to Lightweight:

<telerik:RadDatePicker EnableAriaSupport="true" ID="txtPlanEffectiveDate" runat="server" DateInput-DateFormat="MM/dd/yyyy" RenderMode="Lightweight"
            Calendar-EnableAriaSupport="true" Calendar-EnableKeyboardNavigation="true">
</telerik:RadDatePicker>

This did the trick for me.

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Thao
Top achievements
Rank 1
answered on 29 Aug 2019, 02:44 PM

Hello Rumen, I tried the code below like you said but I still have the same missing form label.  Please advise. Thank you.

<telerik:RadDatePicker EnableAriaSupport="true" ID="txtPlanEffectiveDate" runat="server" DateInput-DateFormat="MM/dd/yyyy" RenderMode="Lightweight"
                            Calendar-EnableAriaSupport="true" Calendar-EnableKeyboardNavigation="true">
                        </telerik:RadDatePicker>

0
Rumen
Telerik team
answered on 02 Sep 2019, 09:08 AM

Hi Thao,

Can you please perform your test with the latest version 2019.2.514 (R2 2019)?

For your convenience I have recorded a demo video as well as attached my test project.

Am I missing something?

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Thao
Top achievements
Rank 1
answered on 03 Sep 2019, 03:41 PM

I just add jquery and it's clear now. Thank you for your help.

$('#ctl00_Main_content_txtPlanEffectiveDate_dateInput').attr('aria-labelledby', 'ctl00_Main_content_lbl_cntPlanEffectiveDate');

0
Rumen
Telerik team
answered on 03 Sep 2019, 04:29 PM
You are welcome! 

Thank you for sharing your solution with the community. Keep up the good work.

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
DatePicker
Asked by
Thao
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Thao
Top achievements
Rank 1
Share this question
or