Repositories: menu popup contents appears at the end of the page.

Issue Summary

In header section, the contents of the "repository" menu popup appears at the end of the DOM order incorrectly.

Steps to Reproduce

1. Turn on the screen reader.
2. Navigate to the "Repositories" menu button in the header section & activate it.
3. Use arrow keys to navigate inside the popup contents.
4. Navigate backwards & observe that the focus goes to the footer contents incorrectly.

Actual Results

While navigating with screen reader, when user activates the "Repositories" menu button, using arrow keys user can navigate inside the popup contents. But when navigating backwards the focus comes out of the menu & goes to the footer contents instead of the "Repositories" menu button.

This is because the menu popup contents are added to the end of DOM order incorrectly.

This makes screen reader users difficult to navigate with arrow keys.

Expected Results

While navigating with screen reader & arrow keys the sequence of navigation must be same as it appears visually. While navigating backwards with arrow keys the screen reader focus should come back to the triggering element i.e "Repositories" menu button.

Ensure that the menu popup element is present after the "Repositories" menu button element in the DOM.

Screenshot

Screen recording

13406-QA.mov

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available