Keyboard navigation - toggle link/action of an item

[Daniel]

Hey guys,

we're using the panelbar as navigation on our website. Every item has a link behind which you can simply access by clicking on the item.

Since we have to check for accessibility we're in trouble with the panelbar because toggling the item with keyboard doesn't toggle the link/action behind it. 

Do you have a best practice how to implement such a function?

@(Html.Kendo().PanelBar()
                        .Name("panelbar")
                        .ExpandMode(PanelBarExpandMode.Multiple)
                        .Items(panelbar =>
                        {
                            panelbar.Add().Text("Angebote")
                                .Items(angebot =>
                                {
                                    angebot.Add().Text("Anlegen").Action("Create", "Offer");
                                    angebot.Add().Text("Bearbeiten").Action("Update", "Offer");
                                    angebot.Add().Text("Löschen");
                                });
                        })
                    )

[Tsvetomir]

Hi Daniel,

Indeed, there is a difference between the click with the mouse and the selection with the keyboard. The difference comes from the way the selection is handled, with the click of the button, the browser redirects to the page from the anchor tag automatically. 

In order to achieve the same with the keyboard navigation, I can recommend that you subscribe to the Select event of the widget and manually redirect to the page of interest. I have consulted with the dev team and the action is left for legacy purposes. Therefore, it is available only because removing it would result in breaking changes.

 

Kind regards,
Tsvetomir
Progress Telerik