Outline from `:focus-visible` on NcAction* items shows when it is not supposed to in Safari 🍏
Opened this issue · 1 comments
Originally posted in nextcloud/server#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 nextcloud/server#39943
When NcActions is open and on mouse move, an item is focused by .focus() method.
How it supposed to work in Web-Browser:
- If a user clicks on a focusable element and the focus is moved via
.focus(), the focused element should not be:focus-visible. - 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.
video_2023-11-22_20-08-10.mp4
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?