Fix top bar tab order

[mdwyer6]

Which problem is this PR solving?

Fixes accessibility issues with topbar's tab navigation experience.

• The tab order was starting from the search box on the right half of the topbar and subsequently jumping left to the nav items.
• There was no focus ring on the topbar nav menu items

Description of the changes

• Tab navigation ordering in top bar now flows left to right as expected
• Tabbing into the topbar nav now shows focus ring

Screenshot of focus ring:

Large screen:

Small screen:

How was this change tested?

• Tested various screen sizes for visual regressions in responsive behavior
• Tested with keyboard navigation and programmatically triggering focus ring

Checklist

• I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
• I have signed all commits
• I have added unit tests for the new functionality
• I have run lint and test steps successfully
  • for jaeger: make lint test
  • for jaeger-ui: npm run lint and npm run test

[graphite-app]

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.13%. Comparing base (d7389f7) to head (7eba8a5).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3067   +/-   ##
=======================================
  Coverage   98.13%   98.13%           
=======================================
  Files         257      257           
  Lines        8004     8004           
  Branches     2092     2091    -1     
=======================================
  Hits         7855     7855           
  Misses        149      149           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[yurishkuro]

what about ub-right?

[mdwyer6]

ub-right class just applies float: right as far as i can tell. this is no longer needed since i swapped the ordering of the markup to match the visual order and flexbox layout now takes care of spacing

[mdwyer6]

it's not super clear from the diff but i've done 3 things in this PR:

1. Swapped the order of the two menus so tab order would behave
2. Replace the float layout with equivalent flexbox one because after swapping menus the float layout doesn't work anymore (it'll wrap the second menu to a newline)
3. Unrelated with above two changes: added outline: 'revert' to bring back focus ring that ant design overrides

[yurishkuro]

this is no longer needed since i swapped the ordering of the markup to match the visual order and flexbox layout now takes care of spacing

but we still want the 2nd menu to be flushed right, as well as the search bar.

[mdwyer6]

yes flexbox is taking care of that now. here is a screenshot on fairly wide monitor:

[mdwyer6]

I would've kept the float layout if I could to keep this diff tightly focused but it's a quirk of how floats work that you cannot easily get the same behavior when the order is reversed.