Background
Follow up to T262872
Dropdown menu content should be adjacent to the menu button so that the content is directly accessible for keyboard and screenreader users. Currently both the main menu and collapsed TOC have their menu content separated, and users need to tab through many elements to reach a menu they just opened. This task is to implement a temporary JS work around that improves this experience for keyboard users. This solution doesn't address the issue for screenreader users.
Developer notes
We will use JS to attach focus/blur event handlers to move the focused element around, simulating a situation where the menu content is adjacent to the button. Specifically tabbing away from the button will jump the focus to the first focusable element in the corresponding menu content, and tabbing out of the menu content will resume the focus directly after the button.
This should also work for tabbing backwards.
AC
- Users can easily tab into and out of the main menu and collapsed TOC content.