paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 16:14:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

send_later: Add keyboard navigation to message scheduling modal.

Browse Source 
Fixes: #25404.
This commit is contained in:
Daniil Fadeev
2023-05-15 16:47:12 +04:00
committed by Tim Abbott
parent fa112adcb7
commit cb69413301
4 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/hotkey.js
View File

@@ -642,7 +642,8 @@ export function process_hotkey(e, hotkey) {
return emoji_picker.navigate(event_name); 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; return false;
} }

7
web/src/list_util.ts
View File

@@ -1,6 +1,11 @@
import $ from "jquery"; 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 { export function inside_list(e: JQuery.KeyDownEvent | JQuery.KeyPressEvent): boolean {
const $target = $(e.target); const $target = $(e.target);

22
web/src/popover_menus.js
View File

@@ -258,11 +258,20 @@ export function open_send_later_menu(instance) {
); );
const $send_later_modal = $("#send_later_modal"); const $send_later_modal = $("#send_later_modal");
$send_later_modal.on("keydown", (e) => {
if (e.key === "Enter") { // Upon the first keydown event, we focus on the first element in the list,
e.target.click(); // 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) => { $send_later_modal.on("click", ".send_later_custom", (e) => {
const $send_later_modal_content = $send_later_modal.find(".modal__content"); const $send_later_modal_content = $send_later_modal.find(".modal__content");
const current_time = new Date(); 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() { on_hide() {
clearInterval(instance._interval); clearInterval(instance._interval);
}, },

1
web/tests/hotkey.test.js
View File

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