popovers: Add keyboard support for starred message popovers in sidebar.

This commits add arrow, vim_up/vim_down and enter hotkey support for
navigating the popover menu when it is open.

frontend_tests/node_tests/hotkey.js

@@ -214,6 +214,7 @@ run_test("basic_chars", () => {
         stream_popped: return_false,
         topic_popped: return_false,
         all_messages_popped: return_false,
+        starred_messages_popped: return_false,
     });
     set_global("emoji_picker", {
         reactions_popped: return_false,

static/js/hotkey.js

@@ -316,6 +316,11 @@ exports.process_enter_key = function (e) {
         return true;
     }
 
+    if (stream_popover.starred_messages_popped()) {
+        stream_popover.starred_messages_sidebar_menu_handle_keyboard("enter");
+        return true;
+    }
+
     if (overlays.settings_open()) {
         // On the settings page just let the browser handle
         // the Enter key for things like submitting forms.
@@ -583,6 +588,11 @@ exports.process_hotkey = function (e, hotkey) {
             stream_popover.all_messages_sidebar_menu_handle_keyboard(event_name);
             return true;
         }
+
+        if (stream_popover.starred_messages_popped()) {
+            stream_popover.starred_messages_sidebar_menu_handle_keyboard(event_name);
+            return true;
+        }
     }
 
     // The next two sections date back to 00445c84 and are Mac/Chrome-specific,

static/js/stream_popover.js

@@ -44,6 +44,11 @@ exports.all_messages_sidebar_menu_handle_keyboard = (key) => {
     popovers.popover_items_handle_keyboard(key, items);
 };
 
+exports.starred_messages_sidebar_menu_handle_keyboard = (key) => {
+    const items = get_popover_menu_items(starred_messages_sidebar_elem);
+    popovers.popover_items_handle_keyboard(key, items);
+};
+
 function elem_to_stream_id(elem) {
     const stream_id = parseInt(elem.attr("data-stream-id"), 10);
 

static/templates/starred_messages_sidebar_actions.hbs

@@ -1,13 +1,14 @@
 {{! Contents of the "starred messages sidebar" popup }}
 <ul class="nav nav-list">
+    {{! tabindex="0" Makes anchor tag focusable. Needed for keyboard support. }}
     <li>
-        <a id="unstar_all_messages">
+        <a tabindex="0" id="unstar_all_messages">
             <i class="fa fa-star-o" aria-hidden="true"></i>
             {{#tr this}}Unstar all messages{{/tr}}
         </a>
     </li>
     <li>
-        <a id="toggle_display_starred_msg_count">
+        <a tabindex="0" id="toggle_display_starred_msg_count">
             {{#if starred_message_counts}}
                 <i class="fa fa-eye-slash" aria-hidden="true"></i>
                 {{#tr this}}Hide starred message count{{/tr}}