A11y - Header - Unexpected focus behavior on Tab key press

[jducrot]

The problem

Starting with the "league" button and continuing with every menu button right of that, pressing tab (which is the default key at b users use to focus the next interactive element in the tab order) does not place the focus on the next interactive element. Pressing Tab on the league button triggers the opening of its menu and focuses the first item. Pressing tab again places the focus back on the league button. Keyboard users are then stuck in a keyboard trap where the focus can only be placed on those 2 elements.

Desired Behavior

Pressing TAB when the focus is already on the "league" button should focus the next visible interactive element in the DOM which is the Team button. From there it should go "players > stats > tools > help > login" then the first item in the left nav. Pressing the DOWN arrow on each menu button should trigger the display of the menu. From there, pressing the DOWN and UP arrow should move focus between menu items. Pressing ESC should close the menu if it's open and do nothing if it's not. Pressing ENTER or SPACEBAR on each menu item should produce the same result as a mouse click.

Notes

This issue is not present on the "Play" button in the header. As expected, pressing the Tab key before the "play" button focuses it, pressing the down arrow opens the menu, pressing Enter or Spacekey emulate the mouse click behavior , and pressing Esc closes the menu and puts the focus back on the "play" button.