Bug report

Regression with 2023.1.314

PanelBar dataItem() method does not return the data item

Reproduction of the problem
1. Open next Dojo: https://dojo.telerik.com/EjIQaSaL

2. Select an item from the Panelbar and expect the console

Expected/desired behavior

panelBar.dataItem(".k-item:first"); shall return the data item


Environment
Kendo UI version: 2023.1.314 or newer
jQuery version: x.y
Browser: [Chrome XX]

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 PanelBar items are disabled they are greyed out and the controls on them are disabled. It would be nice if the user had the option to disable a panelBar but also enable whether they are still expandable\collapsable. This way the user could make the panelBar replicate a readonly View.