I think we might want to switch from :focus to :focus-visible in our CSS. It’s not supported on Safari yet, but it’s easy to fallback on :focus in that case.
If the active element matches :focus-visible, and a script causes focus to move elsewhere, the newly focused element should match :focus-visible.
So that means if you open the hamburger menu by tabbing to it (which enables the :focus-visible style), when the menu is opened, the :focus-visible style appears. If you open the menu with a pointer, then the :focus-visible style does not appear:
There is one downside, in a mixed input scenario where you open the hamburger with a pointer and then attempt to tab nav… the :focus-visible style isn’t visible on the first link (even though it’s technically focused), so it looks like it gets skipped. Not sure if there’s a workaround for this…