Menubar: Keyboard navigation does not work with templated subitems

[scooby359]

Describe the bug

If a menu bar submenu menuitem has a template, keyboard navigation can not select it. Using a mouse to click on the templated item also does not work.

Reproducer

https://stackblitz.com/edit/vitejs-vite-hgjvbm?file=src%2FApp.tsx

System Information

System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
    Memory: 6.48 GB / 31.61 GB
  Binaries:
    Node: 20.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.3 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (130.0.2849.56)
    Internet Explorer: 11.0.26100.1882

Steps to reproduce the behavior

Prerequisites:

• Set up a menu bar where some sub menuitems use template content

While using a menu bar menuitem, where some sub items have a template, navigate around the menu using the keyboard arrows. Where subitems use a template, they cannot be selected with the keyboard. Where subitems use a template, clicking on them with a mouse also has no effect.

Expected behavior

All items in the menu should be selectable, even those using a template.

[snake-py]

Looking at the docs, I see that all items which have sub items of the Menubar component get tabindex="-1", which basically makes keyboard navigation impossible.

[melloware]

Closing in favor of this one which boils it down nicely to all MenuItem's not just menuBar: #7505

[github-actions]

This issue is a duplicate and has already been reported and possibly fixed. Please review other issues both open and closed for a similar issue to this one.