Panel Bar : Accessibility Keyboard Navigation Issue

1 Answer 85 Views
Accessibility PanelBar
Akash
Top achievements
Rank 1
Iron
Akash asked on 06 Nov 2023, 10:43 AM

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?

 

 

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 09 Nov 2023, 09:04 AM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Akash
Top achievements
Rank 1
Iron
commented on 05 Dec 2023, 04:03 AM

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
Telerik team
commented on 07 Dec 2023, 02:32 PM

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

Tags
Accessibility PanelBar
Asked by
Akash
Top achievements
Rank 1
Iron
Answers by
Neli
Telerik team
Share this question
or