vaadin
[menu-bar] Add possibility to disable roving tabindex
Describe your motivation
MenuBar is sometimes used with styling that makes MenuItems appear as separate Buttons. Especially in this case the expected focus behavior would be to move focus between MenuItems with TAB key instead of arrow keys.
Currently custom styling can be applied and buttons can be made focusable separately by forcing the tabindex="0" on MenuItems with custom JS. This breaks has proven not to be perfect solution as the tooltips don't work as expected.
Describe the solution you'd like
Built-in theme variant for separated MenuItems and option to disable roving tabindex.
Describe alternatives you've considered
Using a layout with Buttons instead of MenuBar would sacrifice the overflowing behavior. Creating a "dropdown button" could still be done as single item MenuBar but it would be bit more complex to write.
Current focus indicator doesn't visually communicate that there is roving tabindex pattern within the component. Alternative could be to draw a focus-ring around the whole MenuBar in addition to focused MenuItem to better indicate this behaviour.
Additional context
It is known that according to accessibility guidelines roving tabindex should be used for MenuBar. Here the intent is to "misuse" MenuBar to get the overflow functionality and therefore deviating from a11y guidelines could be justified.
Here the intent is to "misuse" MenuBar to get the overflow functionality and therefore deviating from a11y guidelines could be justified.
We should probably remove role=menubar and convert from role=menuitem to role=button on the root level.
Yup, aria-roles need to be adjusted accordingly then as well. (Not sure what role the bar-root should have in this case, possibly toolbar?)
I suppose an alternative would be to introduce a separate "button group" or "toolbar" component. Something along those lines is discussed in https://github.com/vaadin/web-components/issues/4206 and https://github.com/vaadin/web-components/issues/934
Not sure what role the bar-root should have in this case, possibly toolbar?
Nope.
Right, then I suppose it'll just have to be role="group", which means that it might be tricky to get aria-labels announced on it, but it is what it is.