navbar: Fix left/right arrow key navigation between menus.

[rs545837]

I am also an applicant of GSOC this year.

This PR is built above and is a continuation of #29167.
The left and right arrow keys now allow navigating between the userlist sidebar, help menu popover, and gear menu popover. Pressing the right arrow key from the userlist sidebar toggle button will open the help menu popover. Pressing the left arrow key from the help menu will hide it and re-focus the userlist sidebar toggle button.

I faced issues with the right arrow keypress while the user list was focused. I initially tried using event_name == "right_arrow" to detect the right arrow key press, but it wasn't being recognized when the userlist toggle button was focused.

To overcome these issues, I decided to directly handle the keydown event on the userlist toggle button using the $("#userlist-toggle-button").on("keydown", ...) event listener. By attaching the event listener directly to the toggle button, I ensured that the right arrow key press would be captured when the button was focused.

Inside the keydown event handler, I used e.key === "ArrowRight" to check if the pressed key was the right arrow key. This approach relies on the key property of the event object, which provides a string representation of the pressed key. Using "ArrowRight" as the comparison value ensures that the right arrow key is correctly detected.

Fixes: #29465.

Screenshots and screen captures:

Self-review checklist

• Self-reviewed the changes for clarity and maintainability
  (variable names, code reuse, readability, etc.).

Communicate decisions, questions, and potential concerns.

• Explains differences from previous plans (e.g., issue description).
• Highlights technical choices and bugs encountered.
• Calls out remaining decisions and concerns.
• Automated tests verify logic where appropriate.

Individual commits are ready for review (see commit discipline).

• Each commit is a coherent idea.
• Commit message(s) explain reasoning and motivation for changes.

Completed manual review and testing of the following:

• Visual appearance of the changes.
• Responsiveness and internationalization.
• Strings and tooltips.
• End-to-end functionality of buttons, interactions and flows.
• Corner cases, error conditions, and easily imagined bugs.

[alya]

Thanks for the fix! Could you please update your commit message to match the commit style guidelines?

Please also complete the self-review checklist (as applicable), and post a comment to request a review when ready.

[rs545837]

I think it's ready for review now :).

[alya]

@amanagr Could you please take a look at this one? I haven't tested.

[alya]

@rs545837 The commit title still does not follow the guidelines. You changed the PR title, not the commit message.

[rs545837]

@alya, I actually did change both of them. Can you please tell the specific changes, I should consider while writing it.

[amanagr]

@rs545837 thanks for working on this. Can you make the fix for user list toggle icon on top of #29167 and also address this comment?

You can push your changes in this PR.

[rs545837]

Ya I can work on that.

[zulipbot]

Hello @rs545837, it seems like you have referenced #29465 in your pull request description, but you have not referenced them in your commit message description(s). Referencing an issue in a commit message automatically closes the corresponding issue when the commit is merged, which makes the issue tracker easier to manage.

Please run git commit --amend in your command line client to amend your commit message description with Fixes #29465..

An example of a correctly-formatted commit:

commit fabd5e450374c8dde65ec35f02140383940fe146
Author: zulipbot
Date:   Sat Mar 18 13:42:40 2017 -0700

    pull requests: Check PR commits reference when issue is referenced.

    Fixes #51.

To learn how to write a great commit message, please refer to our guide.

[alya]

Please keep fixing up your commit structure as you go along. This does not follow the guidelines:

[amanagr]

Let me know when this is ready for review.

[rs545837]

@amanagr it's ready for review.

[zulipbot]

Heads up @rs545837, we just merged some commits that conflict with the changes you made in this pull request! You can review this repository's recent commits to see where the conflicts occur. Please rebase your feature branch against the upstream/main branch and resolve your pull request's merge conflicts accordingly.

[amanagr]

Sorry, it looks like it will require some significant work on my part to get this in a good state, so I will likely take over it later.

[timabbott]

Yeah, this feels like too much code for what we're trying to do here; I'm going to close this one as I think we need a different approach.