Keyboard navigation - toggle link/action of an item

1 Answer 88 Views
Accessibility PanelBar
Daniel
Top achievements
Rank 3
Iron
Iron
Iron
Daniel asked on 23 Sep 2021, 06:51 AM

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");
                                });
                        })
                    )

1 Answer, 1 is accepted

Sort by
1
Accepted
Tsvetomir
Telerik team
answered on 27 Sep 2021, 12:26 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Accessibility PanelBar
Asked by
Daniel
Top achievements
Rank 3
Iron
Iron
Iron
Answers by
Tsvetomir
Telerik team
Share this question
or