Panel Bar : Accessibility Keyboard Navigation Issue

[Akash]

Hi Team,

There's a keyboard issue on the panel bar using the keyboard as focus is going to hidden list item.

 

Working example Link: https://dojo.telerik.com/AzURoTUJ/3

 

Case 1: If  Panel Group 1 i.e. Project is expanded, if there's no Panel  Group 2 only panel content is there like Monday, Tuesday & Wed. and if i'm using a keyboard, focus gets lost after the sales report when i press down arrow key and after pressing 2nd time arrow keys focus is go to the Monday which is part of the Panel Group 2.

 

 

Case 2: If  Panel Group 1 i.e. Project is collapsed, and if there's no Panel Group 2 {unnamed} and  only panel group 2 content is there like Monday, or Tuesday & Wed. and if I'm using a keyboard, the focus is getting lost after the projects when  I press down arrow key and after pressing 2nd time down arrow keys focus is going to the Monday which is part of the Panel Group 2.

 

Expected Behavior:

1. Focus should not go to the hidden element, focus should move to the visible content in the list.

Also, if there's any fix around this please let us know where we can change it to make it behave like above?

 

 

[Neli]

Hi Akash,

In the provided Dojo the items 'Monday, Tuesday, Wednesday' are always hidden as their parent is hidden, thus it could not get expanded. Could you please provide more details on how you are hiding the parent element on your side? I would appreciate it if you could modify the Dojo example in order to replicate the exact scenario the way it is on your side and send it back fro a review.

Looking forward to your reply. 

Regards,
Neli
Progress Telerik

[Akash]

Hi Neli, Thanks for the response.

The developer implemented the dojo link. Please find the updated Dojo:

https://dojo.telerik.com/AzURoTUJ/4

 

Also, just try to use only the keyboard while accessing the widget, and then you can able to see that the focus (or visual focus indicator) is getting lost when the panel bar is in a collapsed state. 

[Neli]

Hi Akash,

The observed behavior is expected as the element that you are hiding is a main element for the displayed list in the PanelBar. When there are list with items it is expected that they will have such a parent element for expanding/collapsing. 

If you need to overcome the obserevd behavior you will need to add custom logic when a hidden 'k-list' item is focused. You could either handle the keydown event targeting the element from which the PanelBar is initialized:

          $('#panelbar').on('keydown', function(){
           ....
          })

Or you can try overriding the PanelBar keydown implementation:

 var keyDown = kendo.ui.PanelBar.fn._keydown;
 kendo.ui.PanelBar.fn._keydown = function (e) {
         ....
 }

Regards,

Neli