Skip to content

Navigation focus not working in Safari (macOS); dropdowns only open on hover

Open

Description

It seems the .focus class isn't being set on menu items in Safari on desktop (works fine on mobile). This becomes apparent when you don't want to open submenus on hover, just on click, by commenting out these lines in the CSS:



Now the submenus won't open at all, even when clicking on the parent item.

Found out that Safari doesn't set focus on links, so these events never fire:

_s/js/navigation.js

Lines 63 to 64 in e78a808

link.addEventListener( 'focus', toggleFocus, true );
link.addEventListener( 'blur', toggleFocus, true );

I've spent a couple of hours today trying to come up with a workaround involving an additional click listener. But it's tricky getting it to work without removing the focus/blur event handling in other browsers. Maybe emulating focus isn't a good idea at all? Also tried to use :focus-within, but this also doesn't work with links in Safari.

I might take another stab at it, so in case I'll find a good solution, I'll open a pull request.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions