send_later: Add keyboard navigation to message scheduling modal.

Fixes: #25404.

web/src/hotkey.js

@@ -642,7 +642,8 @@ export function process_hotkey(e, hotkey) {
         return emoji_picker.navigate(event_name);
     }
 
-    if (overlays.is_modal_open()) {
+    // `list_util` will process the event in send later modal.
+    if (overlays.is_modal_open() && overlays.active_modal() !== "#send_later_modal") {
         return false;
     }
 

web/src/list_util.ts

@@ -1,6 +1,11 @@
 import $ from "jquery";
 
-const list_selectors = ["#stream_filters", "#global_filters", "#user_presences"];
+const list_selectors = [
+    "#stream_filters",
+    "#global_filters",
+    "#user_presences",
+    "#send_later_options",
+];
 
 export function inside_list(e: JQuery.KeyDownEvent | JQuery.KeyPressEvent): boolean {
     const $target = $(e.target);

web/src/popover_menus.js

@@ -258,11 +258,20 @@ export function open_send_later_menu(instance) {
             );
 
             const $send_later_modal = $("#send_later_modal");
-            $send_later_modal.on("keydown", (e) => {
-                if (e.key === "Enter") {
-                    e.target.click();
-                }
+
+            // Upon the first keydown event, we focus on the first element in the list,
+            // enabling keyboard navigation that is handled by `hotkey.js` and `list_util.ts`.
+            $send_later_modal.one("keydown", () => {
+                const $options = $send_later_modal.find("a");
+                $options[0].focus();
+
+                $send_later_modal.on("keydown", (e) => {
+                    if (e.key === "Enter") {
+                        e.target.click();
+                    }
+                });
             });
+
             $send_later_modal.on("click", ".send_later_custom", (e) => {
                 const $send_later_modal_content = $send_later_modal.find(".modal__content");
                 const current_time = new Date();
@@ -297,6 +306,11 @@ export function open_send_later_menu(instance) {
                 },
             );
         },
+        on_shown() {
+            // When shown, we should give the modal focus to correctly handle keyboard events.
+            const $send_later_modal_overlay = $("#send_later_modal .modal__overlay");
+            $send_later_modal_overlay.trigger("focus");
+        },
         on_hide() {
             clearInterval(instance._interval);
         },

web/tests/hotkey.test.js

@@ -60,6 +60,7 @@ const overlays = mock_esm("../src/overlays", {
     scheduled_messages_open: () => false,
     info_overlay_open: () => false,
     is_modal_open: () => false,
+    active_modal: () => undefined,
     is_overlay_or_modal_open: () => overlays.is_modal_open() || overlays.is_active(),
 });
 const popovers = mock_esm("../src/popovers", {