radDatePicker versus RadCalendar

[blessed]

As i am responsible to make our site 508 compliant, i used Wave (chrome) to check the pages for any potential issues.  It turns out that Wave flagged the page because the generated HTML contains a <th> tag without a text.

<caption style="display:none;">
      RadDatePicker
    </caption><thead style="display:none;">
      <tr>
        <th scope="col"></th>
      </tr>
    </thead>

1- Why does Telerik generates a <th> tag without a text. It should have been

 

<caption style="display:none;">
      RadDatePicker
    </caption><thead style="display:none;">
      <tr>
        <th scope="col">RadDatePicker</th>
      </tr>
    </thead>

2- The same issue occured with the title Navigation bar- Was a property not properly set?

<caption>
                    <span style="display:none;">Title and navigation</span>
                  </caption><thead>
                    <tr style="display:none;">
                      <th scope="col"></th>
                    </tr>
                  </thead>

Kindly advise

<div id="ctl00_ContentPlaceHolder1_txtBirthDate_wrapper" class="RadPicker RadPicker_Default" style="display:inline-block;width:160px;">
  <input style="visibility:hidden;display:block;float:right;margin:0 0 -1px -1px;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="ctl00_ContentPlaceHolder1_txtBirthDate" name="ctl00$ContentPlaceHolder1$txtBirthDate" type="text" class="rdfd_ radPreventDecorate" value="" title="Visually hidden input created for functionality purposes."><table cellspacing="0" class="rcTable rcSingle" summary="Table holding date picker control for selection of dates." style="width:100%;">
    <caption style="display:none;">
      RadDatePicker
    </caption><thead style="display:none;">
      <tr>
        <th scope="col"></th>
      </tr>
    </thead><tbody>
      <tr>
        <td class="rcInputCell" style="width:100%;"><span id="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput_wrapper" class="riSingle RadInput RadInput_Default" style="display: block; width: 100%;"><input id="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput" name="ctl00$ContentPlaceHolder1$txtBirthDate$dateInput" class="riTextBox riEnabled" type="text"><input id="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput_ClientState" name="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput_ClientState" type="hidden" autocomplete="off" value="{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":"","minDateStr":"1900-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00","lastSetTextBoxValue":""}"></span></td><td><a title="Open the calendar popup." href="#" id="ctl00_ContentPlaceHolder1_txtBirthDate_popupButton" class="rcCalPopup">Open the calendar popup.</a><div id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_wrapper" style="display:none;">
          <table id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar" summary="Calendar control which enables the selection of dates." cellspacing="0" class="RadCalendar RadCalendar_Default" border="0">
            <caption>
              <span style="display:none;">Calendar</span>
            </caption><thead>
              <tr>
                <td class="rcTitlebar"><table cellspacing="0" summary="Title and navigation which can change and show the current year and month." border="0">
                  <caption>
                    <span style="display:none;">Title and navigation</span>
                  </caption><thead>
                    <tr style="display:none;">
                      <th scope="col"></th>
                    </tr>
                  </thead><tbody>
  <tr>

 

 

•  

[Eyup]

Hello,

I've already replied to your other thread for a similar query. The empty th cell is the row number column's header:
http://www.telerik.com/forums/raddatepiker-and-508

I suggest that we continue our technical conversation on the mentioned thread.

Regards,
Eyup
Progress Telerik

[blessed]

Thank you Eyup.

 

I tried the code but it didn't work. For some reason the get_element property does not even grab the html generated tag <th>.

 

I am thinking that we might need to reset the RenderMode as in this link

http://docs.telerik.com/devtools/aspnet-ajax/controls/datepicker/mobile-support/render-mode

what do you think?

 

Kind Regards

 

[Eyup]

Hello,

I've created a sample web site to demonstrate that the approach properly resolves the empty header cell WAVE error. Please run the attached application and verify the result on your side, too.

Regards,
Eyup
Progress Telerik

[blessed]

Thank you Eyup for your answer.

 

The application was missing the following

<Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>

I also used pure JavaScript to access the DOM  and update the table header inner text.

 

Once again Thank you so much for your help.