Outline from `:focus-visible` on NcAction* items shows when it is not supposed to in Safari 🍏

[ShGKme]

Originally posted in https://github.com/nextcloud/server/issues/41450

Black border in "New" menu in Safari: There is a black border on the first entry of the "New" menu. It should only appear on tab navigation, not on initial opening or interacting with the mouse. → Bug with Safari, does not appear with Chrome.

Kind of regression https://github.com/nextcloud/server/pull/39943

---

When NcActions is open and on mouse move, an item is focused by .focus() method.

How it supposed to work in Web-Browser:

1. If a user clicks on a focusable element and the focus is moved via .focus(), the focused element should not be :focus-visible.
2. If a user clicks on a not focusable element and the focus is moved via .focus(), the focused element should be :focus-visible.

So in NcActions on open and mouse move, the items ARE NOT SUPPOSED to be :focus-visible.

However, it doesn't work in Safari. Although this bug is fixed (https://bugs.webkit.org/show_bug.cgi?id=236782), it still appears in NcActions. Moving focus on Safari sometimes marks an element with :focus-visible. Moreover, sometimes a random action on the page changes this behavior and it works fine.

Somehow Safari doesn't understand, that the focus is moved after click on the button.

https://github.com/nextcloud-libraries/nextcloud-vue/assets/25978914/ec098e43-360c-4112-89d0-468c59e9ce91

[ShGKme]

The only idea I have - instead of using :focus-visible, use JS to manually detect keyboard navigation for styling.

Does anyone have a better solution or understanding why Safari sometimes doesn't work here?