hotkey: Make g + left / right arrow work to open navbar dropdowns.

While gear menu is open, press right arrow to go to personal menu
and left arrow to open gear menu again.

help/keyboard-shortcuts.md

@@ -201,6 +201,8 @@ Keyboard navigation (e.g. arrow keys) works as expected.
 
 * **Toggle gear menu**: <kbd>G</kbd>
 
+* **Open personal menu**: <kbd>G</kbd> + <kbd class="arrow-key">→</kbd>
+
 ### For a selected message (outlined in blue)
 
 * **Toggle emoji reactions menu**: <kbd>:</kbd>

web/src/hotkey.js

@@ -733,15 +733,29 @@ export function process_hotkey(e, hotkey) {
         return false;
     }
 
-    if (hotkey.message_view_only && popover_menus.is_gear_menu_popover_displayed()) {
-        // Inside the gear menu, we don't process most hotkeys; the
-        // exception is that the gear_menu hotkey should toggle the
-        // menu closed again.
+    // We don't need to process arrow keys in navbar menus for spectators
+    // since they only have gear menu present.
+    if (
+        popover_menus.is_personal_menu_popover_displayed() &&
+        event_name === "left_arrow" &&
+        !page_params.is_spectator
+    ) {
+        // Open gear menu popover on left arrow.
+        $("#personal-menu").trigger("click");
+        gear_menu.toggle();
+        return true;
+    }
+
+    if (popover_menus.is_gear_menu_popover_displayed()) {
         if (event_name === "gear_menu") {
             gear_menu.toggle();
             return true;
+        } else if (event_name === "right_arrow" && !page_params.is_spectator) {
+            // Open personal menu popover on g + right arrow.
+            gear_menu.toggle();
+            $("#personal-menu").trigger("click");
+            return true;
         }
-        return false;
     }
 
     if (overlays.settings_open() && !user_card_popover.user_card.is_open()) {

web/src/popover_menus.js

@@ -99,6 +99,10 @@ export function is_compose_enter_sends_popover_displayed() {
     return popover_instances.compose_enter_sends?.state.isVisible;
 }
 
+export function is_personal_menu_popover_displayed() {
+    return popover_instances.personal_menu?.state.isVisible;
+}
+
 export function is_gear_menu_popover_displayed() {
     return popover_instances.gear_menu?.state.isVisible;
 }

web/templates/keyboard_shortcuts.hbs

@@ -313,6 +313,10 @@
                     <td class="definition">{{t 'Toggle the gear menu' }}</td>
                     <td><span class="hotkey"><kbd>G</kbd></span></td>
                 </tr>
+                <tr>
+                    <td class="definition">{{t 'Open personal menu' }}</td>
+                    <td><span class="hotkey"><kbd>G</kbd><kbd class="arrow-key">→</kbd></span></td>
+                </tr>
                 <tr>
                     <td class="definition">{{t 'Open message menu' }}</td>
                     <td><span class="hotkey"><kbd>I</kbd></span></td>

web/templates/navbar.hbs

@@ -58,7 +58,7 @@
                 <span tabindex="0" class="focus-dropdown"></span>
             </div>
             <div id="personal-menu" class="hidden-for-spectators">
-                <a class="header-button tippy-zulip-delayed-tooltip" tabindex="0" role="button" data-tippy-content="{{t 'Personal menu' }}">
+                <a class="header-button tippy-zulip-delayed-tooltip" tabindex="0" role="button" data-tooltip-template-id="personal-menu-tooltip-template">
                     <img class="header-button-avatar" src="{{user_avatar}}"/>
                 </a>
                 <span tabindex="0" class="focus-dropdown"></span>

web/templates/tooltip_templates.hbs

@@ -71,6 +71,10 @@
     {{t 'Main menu' }}
     {{tooltip_hotkey_hints "G"}}
 </template>
+<template id="personal-menu-tooltip-template">
+    {{t 'Personal menu' }}
+    {{tooltip_hotkey_hints "G" "→"}}
+</template>
 <template id="all-message-tooltip-template">
     {{t 'All messages' }}
     {{tooltip_hotkey_hints "A"}}