Bug report

When the PanelBar is configured in MVVM the contentUrls does not take effect

Reproduction of the problem

1. Open the Dojo example - https://dojo.telerik.com/EGOfUtAy/3

Current behavior

The contentUrls does not take effect and no content is loaded in the PanelBar

Expected/desired behavior

It should be possible to use contentUrls in MVVM scenario.

Environment

• Kendo UI version: 2023.1.117
• Browser: [all]

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

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