Weird tab key navigation in MenuBar and SideNav

HI!

Since I’m not sure if this is a bug or a feature: Using the tab key it is not possible to focus through the MenuBarItems. Using the tab key the first MenuBarItem gets the focus. Pressing tab again the focus leaves the MenuBar instead of walking through the items.

In the SideNav with the tab key one can walk through all SideNavItems which have the path attribute set. In my case I have an item for signing out which has no path but an onClick handler which is not reachable by the tab key.

Is there a reason for this behavior?

Yes, it’s intended. Menu bar is using roving tabindex. Sidebar on the other hand is a list of anchors which is not intended to be used with roving by default. You can get more information about it in the WCAG requirements for accessibility of web application.

1 Like

MenuBar actually has a mode for this now. If you use <MenuBar tabNavigation={true}> it should switch between buttons using Tab.

Not sure when this released, probably in 24.8.

2 Likes

Thanks Sascha! Yeah, that was released in 24.5 some month ago "Button-bar" mode in MenuBar · Issue #6552 · vaadin/platform · GitHub

1 Like