Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 06 Aug 2023 11:26 by Akash
Akash
Created on: 13 Jun 2023 14:43
Category: Kendo UI for jQuery
Type: Feature Request
0
Date time picker Keyboard Support is missing for date and time button because of (tabindex=-1)

Hi team, please find the accessibility issue:

 

Component: https://demos.telerik.com/kendo-ui/datetimepicker/keyboard-navigation

 

Issue Name: 

Missing keyboard support for image buttons

 

Actual Result

Keyboard support is missing for "Open the time view" and "Open the date view" image buttons. This made it difficult for keyboard-only and screen reader users to access the functionality associated with the image buttons.

 

Steps to Reproduce

1. Navigate to the mentioned image buttons in the modal dialog.

2. Observe that the image buttons do not receive the keyboard focus.

Expected Results

The image buttons must be keyboard accessible.

 

Recommendation

Ensure that all the page functionality is available for all users irrespective of the device being used. 
Apply the following changes:
• Remove the tabindex="-1" attribute from the source code of the image buttons.
• Initially set the aria-expanded attribute to "false" for the image button. Ensure that the value of the aria-expanded attribute changes on user interaction via scripting.

 

Existing:

<button unselectable="on" tabindex="-1" class="k-select k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the time view" type="button">
<span class="k-icon k-i-clock k-button-icon"></span>
</button>

 

Recommended

<button unselectable="on" class="k-select k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the time view" type="button" aria-expanded="false">
<span class="k-icon k-i-clock k-button-icon"></span>
</button>

Also, the shortcut is there to open a date and time picker but relying on the shortcuts only to open it would not be feasible,

7 comments
Akash
Posted on: 06 Aug 2023 11:26

okies I understand your point but what about screen reader user? They even don't know that you can clear the input field or they can open the date and time drop-down widget. 

 

Reducing the no of tabs  = making it not focusable = impact screen reader users.

 

But i think you guys can keep it focusable using arrow keys inside input (all buttons) but when user use tab then it'll go to next input field..what do you think on this?

 


It'll satisfy both the cases screen reader + keyboard (less tabbing)

ADMIN
Martin
Posted on: 04 Aug 2023 14:07

Hello, Akash,

I went through the topic once again with a developer with deep accessibility knowledge.

Recently, we dedicated a lot of efforts toward the accessibility topic. Our developers have prepared a unified specification for our components for all the Web suites ( jQuery, Angular, React etc). That spec is in unison with all the accessibility guidelines and best practices.

In regards to the DateTimePicker and similar controls (ComboBox, MultiSelect, TextArea) we aim to achieve minimum tab interactions to go through each component. Still, we also provide access to the separate elements of the components ( for example the DateTimePicker's popups) through the keyboard, specifically for the DateTimePicker - through alt + down/up keys. 

You can always modify the tabindex attributes if you wish to make the buttons focusable.

Regards,
Martin
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources! 
Akash
Posted on: 31 Jul 2023 05:53

Hi team , any update on this as mentioned by 

Martin:


Hello, Akash,

The behaviour is expected as the DateTimePicker is input-based component and the icons for the views should not be focusable. You will find the same behaviour for all similar components like the ComboBox, MultiSelect etc. 

Let me know if the above makes sense.

Regards,
Martin
Progress Telerik

---------

But the thing is Yes the input field is editable but input field also contains other interactive elements like"Date and Time button"which open the dropdown , same in mutiselect and combobox you've the dropdown arrow button.

All these needs to be keyboard accessible.

As these input fields contains 2 behaviors:
1. One you can edit or write in the combobox
2. You can select the from the dropdown. 

Implemented stuff is not compliant is accessibility keyboard support. Alt+Down arrow is the shortcut stuff which can't replace the original behavior of buttons.

ADMIN
Nikolay
Posted on: 27 Jun 2023 15:03

Hello Akash,

Thank you for the follow-up.

I will forward this to the respective Team and I will follow up later when I have more information.

Regards,
Nikolay
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Akash
Posted on: 21 Jun 2023 03:57

Hi Martin,

I think you misunderstood the ask.

 

I'm working as a Accessibility Advocate. As per WCAG 2.1 guidelines whatever we can access through mouse we need to access through keyboard also.

 

Only small change is required to remove tab index =-1 to 0. As Kendo already coded as a button but it's wrong approach to turn off the focus for buttons.

 

https://pauljadam.com/guides/datepickers.html

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

 

 

 

due to this focus is not going to those buttons when you're using tab.

 

Also, shortcut is not a solutions to open a data view. This is a secondary stuff.

 

I hope you understand before declining the request.

 

 

ADMIN
Martin
Posted on: 20 Jun 2023 12:00

Hello, Akash,

The behaviour is expected as the DateTimePicker is input-based component and the icons for the views should not be focusable. You will find the same behaviour for all similar components like the ComboBox, MultiSelect etc. 

Let me know if the above makes sense.

Regards,
Martin
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Akash
Posted on: 14 Jun 2023 16:41
Any updates on this?
Create an account Log In
View
Type
Status
Category