Pending Review
Last Updated: 25 Apr 2019 06:56 by ADMIN

We are working on enterprise product, which uses Progress Telerik jQuery KendoUI components extensively purchased by our Company. In which Kendo PanelBar is used in many modules of our product.

Now a days we are working on Accessibility (i.e. keyboard and screen reader) as part of out-of-box feature of our product.

The Kendo Panel Bar has been made accessible so that it can be navigated using the keyboard arrow keys, once it receives focus via Tab Key.

We have created small example on dojo.telerik.com (i.e. which can be referred on https://dojo.telerik.com/@chiragvidani/EBEPUnoY/3) to explain issue faced by us, when accessing via Screen Reader. Please find issues below:

  1. When the panel bar is initialized in expanded state and on receiving focus by Kendo PanelBar widget, screen reader reads Header as well as Content. Now because of this, content is read twice (i.e. second time when we navigate to content using down arrow keys one at a time). Whereas behavior in collapsed state is as expected.
  2. Also, to read out the expand/collapse event of PanelBar we need to programmatically remove role attribute from <ul> and <li> tags after initialization of widget.

Secondly when referring WAI-ARIA practices on www.w3.org website (i.e. https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html), we found some differences as explained below:

  1. Header of PanelBar or Accordion is surrounded by <button> inside <h3> (i.e. reference link is https://www.w3.org/TR/wai-aria-practices/#accordion)
  2. Content of PanelBar or Accordion has an aria-labelledby attribute with value containing ID of respective Header.
  3. In WAI-ARIA website PanelBar or Accordion is generated using combination of relevant <div> markup, whereas in Kendo, its generated using <ul> and <li> markup.
  4. In current implementation of Kendo PanelBar, focus is set to <ul>, whereas in demo of w3.org website its being set to <button> placed as a header in order to restrict reading of list keyword.

Kindly help us with your assistance.

Thanks,

Chirag Vidani

Completed
Last Updated: 26 Nov 2019 08:17 by ADMIN
Release R1 2020
When you place a <label> inside the template of a panelbar, and click on that label, the select event fires twice instead of the expected once.

Note: works as expected on collapsible items, only items without children exhibit the problem.

Reproduction of the problem
reproducible: https://dojo.telerik.com/OXazIKUq

Expected/desired behavior
the event keeps firing only once as if you clicked on any place in the item outside of the label.

Potential workaround: https://dojo.telerik.com/@bratanov/otIVuNag