V14 - Need two arrow downs to select first enabled sub menu item when first item is disabled

[mukherjeesudebi]

Description

This issue was fixed in #7142
But the fix for #7202 broke the previous fix

Expected outcome

If first sub menu item is disabled, then the first focus should be on the first enabled item and it should happen with only one down arrow click that open the sub menu item list.

Minimal reproducible example

MenuBar menuBar = new MenuBar();
		
MenuItem view = menuBar.addItem("View");
MenuItem edit = menuBar.addItem("Edit");
MenuItem share = menuBar.addItem("Share");
		
SubMenu shareSubMenu = share.getSubMenu();
shareSubMenu.addItem("By email").getElement().setAttribute("disabled", true);
shareSubMenu.addItem("Download");
shareSubMenu.addItem("Get Link");		

add(menuBar);

Steps to reproduce

Use arrow keys to focus on 'share' and then it needs two arrow downs to focus on the first enabled item 'download'

Environment

Vaadin version(s): 14

Browsers

No response

[web-padawan]

Also reproducible in latest V24 using the dev page:

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

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

  const createComponent = (text) => {
    const item = document.createElement('vaadin-menu-bar-item');
    item.textContent = text;
    return item;
  };

  const menuBar = document.querySelector('vaadin-menu-bar');
  menuBar.items = [
    { text: 'View', tooltip: 'Options for how to view the content' },
    {
      text: 'Move',
      children: [
        { component: createComponent('To folder'), disabled: true },
        { component: createComponent('To archive') },
        { component: createComponent('To trash') },
      ],
    },
    { text: 'Duplicate', tooltip: 'Create a duplicate' },
  ];
</script>

1. Open the "Move" sub-menu using keyboard
2. Close the sub-men e.g. using Esc to keep focus
3. Re-open the "Move" sub-menu using keyboard