Menubar: context.focused is true on hover

[lisuzanne94]

Describe the bug

When using passthrough to apply a style to a context.focused state, the styles are also getting triggered on mouse hover. For accessibility reasons, I'm looking for the ability to add styles (like a ring or an outline) when a user is navigating with their keyboard but not on mouse hover.

I've tried adding focus and focus-visible styles but they don't seem to get applied.

Would appreciate some guidance if the ability to separate the two already exists or if there is some kind of workaround. Thank you.

Reproducer

https://codesandbox.io/p/devbox/magical-almeida-xk4gqv?file=%2Fsrc%2FApp.vue%3A1%2C15&workspaceId=7dee12f5-26e9-446c-9061-a67fb6cacaac

PrimeVue version

^3.52.0

Vue version

3.x

Language

ES6

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. To see focus style, use Tab and arrow keys to cycle through menu. You should see a ring around the focused item
2. Click on a menu item and then mouse hover over other menu items. They'll also receive the ring despite not being focused

Expected behavior

Keyboard navigation cycling through menu items applies the ring when focused on one. Using a mouse to hover over items should not apply the same style. Ideally, there's a way to apply different styles on keyboard navigation and mouse actions.

[kaspernowak]

I am experiencing a related issue with the menubar. When a menu item is clicked or focused with tab, following hovers over other menu items apply the same focus behaviour, this is not expected. This has more serious implications when zooming in with mouse gestures on a m1 macbook, resulting in panning to the hovered menu items causing very unexpected behaviour.