Fix accessibility tab focus in navigation

Created by: AnandChowdhary

Current behavior

Currently, if you start tabbing, the focus order is:

1. Sourcegraph logo
2. What is Universal Code Search?
3. Product
4. Pricing
5. ...

When you mouseover or focus on (3) Product, the dropdown with product links shows up. However, this is not in the tab order (since it is appended and removed from the DOM at the bottom of the page). This means that there is no way for keyboard navigation to ever reach the dropdown by tabbing, as it's removed from the DOM when you reach (4) Pricing.

Correct behavior

After tabbing from (3) Product, the next item in focus should be the first dropdown item, not (4) Pricing.

Fixes

1. Append the dropdown immediately after the (3) Product <li> item instead of at the bottom of the DOM, and it would naturally be in the tab order in the correct position; or
2. Change focus manually (using HTMLElement.focus()) when tabbing from (3) Product to the first link in the dropdown, then change it again from the last link to (4) Pricing

Epilogue

Keyboard navigation and logical tab order are very important principles in web accessibility, primarily because users with mobility impairment (using keys) or visual impairment (using screen readers) may have trouble using a mouse, and therefore rely solely upon keyboard navigation.