Skip to content

Fix top bar tab order #3067

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yurishkuro merged 2 commits into from
Sep 7, 2025
+20 −11
Merged

Fix top bar tab order #3067

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b8e0256
fix topbar tab order to be left to right
mdwyer6 Sep 7, 2025
7eba8a5
show focus ring on topbar's nav menu
mdwyer6 Sep 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 20 additions & 11 deletions packages/jaeger-ui/src/components/App/TopNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,29 +137,38 @@ export function TopNavImpl(props: Props) {
];

return (
<div>
<Menu
theme="dark"
mode="horizontal"
selectable={false}
className="ub-right Menu--item"
disabledOverflow
selectedKeys={[pathname]}
items={itemsGlobalRight}
/>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Menu
theme="dark"
items={itemsGlobalLeft?.concat(
NAV_LINKS.map(({ matches, to, text }) => {
const url = typeof to === 'string' ? to : to(props);
const key = matches(pathname) ? pathname : url;
return { key, label: <Link to={url}>{text}</Link> };
return {
key,
label: (
<Link style={{ outline: 'revert' }} to={url}>
{text}
</Link>
),
};
})
)}
className="Menu--item"
mode="horizontal"
selectable={false}
selectedKeys={[pathname]}
style={{ flex: '1 1 0', minWidth: 0 }}
/>
<Menu
theme="dark"
items={itemsGlobalRight}
className="Menu--item"
Copy link
Copy Markdown
Member

@yurishkuro yurishkuro Sep 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what about ub-right?

Copy link
Copy Markdown
Contributor Author

@mdwyer6 mdwyer6 Sep 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor Author

@mdwyer6 mdwyer6 Sep 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Member

@yurishkuro yurishkuro Sep 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Contributor Author

@mdwyer6 mdwyer6 Sep 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor Author

@mdwyer6 mdwyer6 Sep 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

mode="horizontal"
selectable={false}
disabledOverflow
selectedKeys={[pathname]}
style={{ flex: '0 1 auto', minWidth: 0 }}
/>
</div>
);
Expand Down
Loading