The arrow keys shouldn’t do anything, but tab and enter should!
So when you open the menu with = and press tab you’re not cycling through the menu items? I’m on macOS and it works as expected in Safari, Firefox, and Chrome so this is a little perplexing!
I took a closer look at what’s going on here generally and the idea of using focus-visible I mentioned above won’t work.
The problem is that the hamburger menu appears in our HTML outside of the menu button container (the container holding search, hamburger, and user buttons). So this means the menu isn’t next in the natural tab order. To compensate we set focus on the first menu item using javascript. This has the side-effect of highlighting the item (because we also need to have :focus styles).
I don’t think we can necessarily rely on detecting a tab press because it’s not the only key screen readers use to navigate, and we’d interfere with other shortcuts if we captured all key presses…
I can think of two possible fixes:
-
Move the menu in the HTML so it appears immediately after the button that triggers it. This may have some layout side effects.
-
Trap the focus within the menu when it’s open, but don’t set the focus on any particular item. This means when the menu is open, you can only tab its contents and nothing else on the page. I think this is probably the preferable solution…