[menu-bar] Arrow left / right with opened submenu without focused item work unexpectedly

[web-padawan]

Description

Currently the behavior of vaadin-menu-bar is incorrect when opening submenu but not focusing any item.

Arrow Left

1. Click to open submenu -> Arrow Down to focus item -> Arrow Left = previous root level button focused (CORRECT)
2. Click to open submenu -> Arrow Left = same root level button focused (WRONG)

Arrow RIght

1. Click to open submenu -> Arrow Down to focus item -> Arrow Right = next root level button focused (CORRECT)
2. Click to open submenu -> Arrow Right = submenu stays open, nothing happens (WRONG)

Expected outcome

Expected the focus to move on Arrow Left or Arrow Right regardless of whether the item in submenu is focused or not.
See ARIA authoring practices - Navigation Menubar example for the correct behavior.

Minimal reproducible example

  <vaadin-menu-bar></vaadin-menu-bar>

  <script type="module">
    import '@vaadin/menu-bar';

    const menuBar = document.querySelector('vaadin-menu-bar');
    menuBar.items = [
      { text: 'View' },
      {
        text: 'Move',
        children: [{ text: 'To folder' }, { text: 'To trash' }],
      },
      { text: 'Duplicate' },
    ];
  </script>

Steps to reproduce

1. Add the snippet to the HTML page
2. Click "Move" button to open submenu
3. Press Arrow Left or Arrow Right

Environment

Vaadin version(s): 24.7 and earlier

Browsers

Issue is not browser related

Note

Without focusing item, the keydown event is fired from the context menu but item is empty here:

web-components/packages/menu-bar/src/vaadin-menu-bar-mixin.js

Lines 860 to 862 in 0ea930d

	__onContextMenuKeydown(e) {
	const item = Array.from(e.composedPath()).find((el) => el._item);
	if (item) {