[Solved] Setting "aria-label" on DatePicker and DateTimePicker Calendar/Clock icons

[Matt]

How can I specify the text to be displayed in JAWS for the icons in DatePicker and DateTimePicker?

By default, when I use JAWS to look at the elements of the screen, the following is displayed for DatePickers and DateTimePickers:

DatePicker

  Hire Date Edit MM/DD/YYYY
  select Button

DateTimePicker

  Shift Start Edit MM/DD/YYYY H:M t
  select Button
  select Button

These "select Button" entries correspond to the calendar icon (for both) and  the clock icon (for DateTimePicker). 

When I have multiple buttons on the screen (or even when it's a DateTimePicker), there are multiple entries that say "select Button" and the user doesn't know what they are.  I'd like to set them so that they'd say something like the following:

DatePicker 

  Hire Date Edit MM/DD/YYYY
  Set Hire Date Button

DateTimePicker

  Shift Start Edit MM/DD/YYYY H:M t
  Set Shift Start Date Button
  Set Shift Start Time Button

 I can do this by manually adding the "aria-label" attribute to the appropriate span ("k-icon k-i-calendar" for the calendar, "k-icon k-i-clock" for the clock) when debugging (e.g., F12), but can't seem to figure out how to do it on the control itself in code.  Here's how I have the controls defined: 

01./* HTML Body */
02.
03.<input id="hireDatePicker" aria-label="@UserInterface.NewHire_HireDatePicker_Text" />
04.<input id="shiftStartDateTimePicker" aria-label="@UserInterface.NewHire_ShiftStartDateTimePicker_Text" />
05.
06./* $(document).ready(function () */
07.
08.$('#hireDatePicker').kendoDatePicker({
09.  value:new Date(),
10.  ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"
11.});
12.
13.$('#shiftStartDateTimePicker').kendoDateTimePicker({
14.  value:new Date(),
15.  interval:60,
16.  change: startDateTimeChange,
17.  ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"
18.});

[Matt]

Alright...progress, but I'm still left curious as to whether there's an easier way.

I'm able to add the "aria-label" attribute to the span that contains the calendar and clock icons, but it still doesn't appear in JAWS.  

$('#dateTimeSearchPadding span span span span.k-i-calendar').attr("aria-label", "Set Hire Date");

Why?  Because of "select" between the <span ...></span> tags:

<span class="k-icon k-i-calendar" aria-label="Set Hire Date" unselectable="on">select</span>

So, I switched gears and figured out how to change the text, which I did via the following (I have a <div> around my DatePickers and DateTimePickers).

$('#dateTimeSearchPadding span span span span.k-i-calendar').html("Set Hire Date");

While this works for what I need, I'm left wondering if there's something accessible via the DatePicker and DateTimePicker widgets:  Is there or are we required to jump through hoops such as this for getting into the guts of these controls?

[Georgi Krustev]

Hello Matt,

Indeed, the widget does not expose a way to control the content of the toggle buttons. The only way to change that test is to use jQuery, like you did.

I logged an enhancement task in our product back log that will allow you to control the text too:

• https://github.com/telerik/kendo-ui-core/issues/1444

Regards,
Georgi Krustev
Telerik