Approved
Last Updated: 04 Dec 2019 08:50 by ADMIN
Anna
Created on: 31 Oct 2019 12:31
Category: Toolbar
Type: Bug Report
0
[WCAG][Accessibility] Toolbar is not WCAG compliant

I tested the toolbar example https://demos.telerik.com/kendo-ui/toolbar/keyboard-navigation with a keyboard and screen reader (NVDA) and found the following issues:

1. Buttons are rendered as links. The SR announces the first button as "Button visited link". Apparently, there is an undocumented option useButtonTag (https://github.com/telerik/kendo-ui-core/issues/4730) that's also missing from the typings. I have to manually add 'role: "button"' to every single button to make my toolbar compliant.

2. Toggle buttons state is not announced.
 
3. The overflow menu button has no caption and is announced by the SR as "blank".

4. The overflow menu button has no visible focus styling (screenshot attached).

5. Selecting an item from the overflow menu throws the focus out of the page.

 

Attached Files:
5 comments
ADMIN
Veselin Tsvetanov
Posted on: 12 Nov 2019 12:59

Hello Anna,

Thank you for the additional info.

The proper approach, in that case, would be to apply the undocumented and unavailable in the typings useButtonTag: true option on all Buttons in the ToolBar. This way they will be accessible. Using the role attribute will lead to the issue observed.

We are currently fixing the discussed useButtonTag issue in question. It should be soon available in both the API reference and the typings definitions.

Regards,
Veselin Tsvetanov
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.
Anna
Posted on: 08 Nov 2019 16:59

Hi Veselin,

Thank you for your detailed answer.

Regarding point 6, it occurs if I don't use useButtonTag (my project is in TypeScript so I'd need to cast to any to avoid errors), but attibutes: {role: "button"}. I did it for the last 3 items on https://dojo.telerik.com/@GaloisGirl/AGAminEl .

When overflown, those items are rendered with an anchor tag inside a list-item tag, and both tags are given the role="button" attribute. This causes them to be read as "button button Action" as shown on the attached screenshot.

 

 

ADMIN
Veselin Tsvetanov
Posted on: 07 Nov 2019 10:24

Hi Anna,

Here is the Dojo sample concerning point 6: https://dojo.telerik.com/OCihIFux/3

Please, excuse me for missing that in my previous post.

Regards,
Veselin Tsvetanov
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.
ADMIN
Veselin Tsvetanov
Posted on: 07 Nov 2019 10:21

Hi Anna,

Thank you for the extensive description of the issues found in the Toolbar. Concerning each of the points in your posts:

1. Your remark is perfectly valid. We will document the use of useButtonTag, will add it to the API reference and to the typing definitions so that it can be properly used. Also, we will prepare a documentation article on why using that option is important for the accessibility compliance of the widget.

2. That is correct. I have included the following issue to our backlog: https://github.com/telerik/kendo-ui-core/issues/5391

3. That is also a bug. Here is the respective GitHub item: https://github.com/telerik/kendo-ui-core/issues/5392

4. From the screenshot sent, I can tell that you are testing with the Default Kendo SASS team. If that is the case, attached you will find a screenshot demonstrating the focused state on the Overflow button. The focused state styling is present. Nevertheless, I should agree that the visual presence of the state is not obvious.

5. That is also a bug in the Toolbar functionality. Here is the item on that: https://github.com/telerik/kendo-ui-core/issues/5393

6. Here you will find a small sample using the useButtonTag: true option on the overflown buttons. If you review the rendered HTML you will notice that role="button" is not assigned to none of those buttons. May I ask you to modify that sample, so it replicates the issue observed at your end and send it back to me?

Also, as a small token of gratitude for helping us improve the Toolbar widget, I have updated your Telerik points.

Regards,
Veselin Tsvetanov
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.
Anna
Posted on: 31 Oct 2019 15:47
6. Overflown items do get a 'role: "button"'. Thus, If I add it to my buttons, the ones that get overflown are announced "button button X" instead of "button X".