RadCalendar accessibility...

[Raymond]

Hi,

I'm trying to resolve an accessibility issue with the raddatepicker control.  I ran across the below page discussing it's compliance.  

https://demos.telerik.com/aspnet-ajax/datepicker/accessibilityandinternationalization/wcag2.0andsection508accessibility/defaultcs.aspx

But when you click on the link to test compliance using the wave tool, it shows errors.  Specifically, an empty TH element in the first row of the calendar (to the left of the "Sunday" heading, and above the week number).

 

To complicate my situation, the calendar is automatically generated in a grid for filtering a date column, and the columns are dynamically generated.  I've got code that finds the correct control during the item created event for the filter item.  But setting the EnableAriaSupport still has the same accessibility error shown on your demo page.  Is there another property that will address this?

 

The column with the empty TH is the week number.  An option for me might be to remove the week number column.  Is there a setting to do that or can you suggest some sample code for doing that?

 

Thanks,

 

 

[Daniel]

Hello Raymond,

The top leftmost cell is the 'view selector' as explained here:
RadCalendar View Selector

I could offer two options here:
1. Enable the View Selector:

<telerik:RadCalendar
    ID="RadCalendar1"
    runat="server"
    RenderMode="Lightweight"
    EnableAriaSupport="true"
    EnableViewSelector="true">
</telerik:RadCalendar>

2. Hide the row headers:

<telerik:RadCalendar
    ID="RadCalendar1"
    runat="server"
    RenderMode="Lightweight"
    EnableAriaSupport="true"
    ShowRowHeaders="false">
</telerik:RadCalendar>

Of course, you can also use programmatic approach for setting the above properties.

I hope this helps.

Regards,
Daniel
Telerik by Progress

[Raymond]

Hi,

Neither of those approaches appears to be working.  In fact, setting the RenderMode to lightweight produces another accessibility error in the form of an empty link.  It appears the link is the reference to the shared calendar, but I didn't do much digging.

 

I'm not sure if this is relevant, but your suggestions refer to setting properties of the radcalendar control.  The control in the filter header of a date column is a raddatepicker, which does not have the properties you recommended setting.  However, the raddatepicker does have a property that refers to a radcalendar control.  When trying your suggestions, I set the properties of that radcalendar.  However, I did not notice any change in behavior.  For example, setting ShowRowHeaders = false did not hide the week numbers as I would expect.

 

Here is the code in my ItemCreated event for the radgrid:

If TypeOf e.Item Is GridFilteringItem Then
For Each col As GridColumn In rgValidation.MasterTableView.AutoGeneratedColumns
If TypeOf col Is GridDateTimeColumn Then
Dim gfi As GridFilteringItem = DirectCast(e.Item, GridFilteringItem)
If gfi(col.UniqueName) IsNot Nothing AndAlso gfi(col.UniqueName).Controls.Count > 0 _
AndAlso TypeOf gfi(col.UniqueName).Controls(0) Is RadDatePicker Then
Dim rdp As RadDatePicker = DirectCast(gfi(col.UniqueName).Controls(0), RadDatePicker)
rdp.RenderMode = RenderMode.Lightweight
rdp.EnableAriaSupport = True
rdp.Calendar.ShowRowHeaders = False
End If
End If
Next
End If

 

Please let me know if you need additional information.  Also, would it be better for me to submit this as a support ticket?

 

Thanks,

 

Ray

 

 

 

[Daniel]

Hello Raymond,

You need to get reference to the shared calendar. Here is how:

Protected Sub RadGrid1_ItemCreated(sender As Object, e As GridItemEventArgs)
    If TypeOf e.Item Is GridFilteringItem Then
        Dim item As GridFilteringItem = e.Item
        Dim cal As RadCalendar = DirectCast((item("DateCol").Controls(0)), RadDatePicker).SharedCalendar
        cal.EnableAriaSupport = True
        cal.ShowRowHeaders = True
    End If
End Sub

Regards,
Daniel
Telerik by Progress

[Raymond]

Hi,

 

Well, it seems odd that the reference to the shared calendar would work, but the reference to the calendar, wouldn't.  After all, it it's using a shared calendar, then I'd expect the calendar reference to either be null, or point to the shared calendar.  This appears to create the local calendar, and then ignore it.

 

But regardless...your solution appears to be working. 

Thanks,

 

Ray

[Daniel]

Hello Raymond,

I'm glad to hear that my suggestion worked. I understand the confusion caused by the Calendar property, yet I'm afraid we couldn't change that behavior because we'd introduce a breaking change which we'd like to avoid.

Regards,
Daniel
Telerik by Progress