Fixed #1435 -- hamburger tab key focus issue fixed

[Bhagyarsh]

Issue #1435

Screenshots for reference
Before:

After:

[CuriousLearner]

Hey Bhagyarsh!

Thank you for your contribution.

This seems to flip the ordering of the dark-mode toggle with the hamburger menu option for me 🤔 albeit your screenshots do not show this.

I'm checking this on Chrome Version 120.0.6099.109 (Official Build) (arm64) on macOS. Can you please let me know which browser are you testing this on?

Before changes:

After Changes:

[Bhagyarsh]

Hi Sanyam,

Thanks for looking into it! I tested on the same Chrome version (120.0.6099.109-1) on Linux and Firefox (120.0.1-1). I also cleared my cache, and everything looks good on my end.

Could it be a cache thing on your side? Give it a shot after clearing and let me know if it's still acting up.

[Bhagyarsh]

Hi @CuriousLearner ,
I was wondering if you had a chance to review it further. Are there any changes required before merging it?
I'm happy to make any adjustments based on your feedback. Please let me know if you have any questions.
Thanks for your time, and I look forward to your response.
Best regards,

[bmispelon]

Hi @Bhagyarsh and thanks for this PR!

I took a look a it on my local version (using firefox) and your approach does seem to work (I did have to run make compile-scss after switching branches, maybe that's why the other commenter got the wrong behavior?).

However I'm a bit hesitant about adding more complexity to the HTML. Instead I tried an alternative approach and used flex for the layout of the whole header instead of floats. This lets the browser naturally focus things without having to add any extra HTML.
The result is in this PR: #1523
Can you tell me what you think?

Thanks! ✨

[CuriousLearner]

Hi @Bhagyarsh

Sorry, I didn't get a notification for your earlier comment.

I'll take a look at this soon.