diff --git a/web/e2e-tests/message-basics.test.ts b/web/e2e-tests/message-basics.test.ts index 4c1efc6324..bf5b386ef8 100644 --- a/web/e2e-tests/message-basics.test.ts +++ b/web/e2e-tests/message-basics.test.ts @@ -304,6 +304,7 @@ async function test_search_venice(page: Page): Promise { await common.clear_and_type(page, ".left-sidebar-search-input", "vEnI"); // Must be case insensitive. await page.waitForSelector(await get_stream_li(page, "Denmark"), {hidden: true}); await page.waitForSelector(await get_stream_li(page, "Verona"), {hidden: true}); + await arrow(page, "Down"); await page.waitForSelector((await get_stream_li(page, "Venice")) + " .highlighted_row", { visible: true, }); @@ -328,6 +329,10 @@ async function test_stream_search_filters_stream_list(page: Page): Promise // Enter the search box and test highlighted suggestion await page.click(".left-sidebar-search-input"); + await page.waitForSelector("#views-label-container.highlighted_row", {visible: true}); + + await arrow(page, "Down"); + await page.waitForSelector(".top_left_inbox.top_left_row.highlighted_row", {visible: true}); await page.waitForSelector((await get_stream_li(page, "Verona")) + " .highlighted_row", { @@ -336,7 +341,7 @@ async function test_stream_search_filters_stream_list(page: Page): Promise // Navigate through suggestions using arrow keys // Reach core team - for (let i = 0; i < 10; i += 1) { + for (let i = 0; i < 12; i += 1) { await arrow(page, "Down"); } await arrow(page, "Down"); // core team -> Denmark diff --git a/web/src/sidebar_ui.ts b/web/src/sidebar_ui.ts index 3ed230ef72..f4bd6d5faf 100644 --- a/web/src/sidebar_ui.ts +++ b/web/src/sidebar_ui.ts @@ -469,10 +469,21 @@ function all_rows(): JQuery { // NOTE: This function is designed to be used for keyboard navigation purposes. // This function returns all the rows in the left sidebar. // It is used to find the first key for the ListCursor. - const $all_rows = $(".top_left_row, .bottom_left_row").not(".hidden-by-filters"); + const $all_rows = $( + // All left sidebar view rows. + ".top_left_row, " + + // All DM and channel rows. + ".bottom_left_row, " + + // Views header. + "#left-sidebar-navigation-area:not(.hidden-by-filters) #views-label-container, " + + // DM Headers + "#direct-messages-section-header, " + + // All channel headers. + ".stream-list-section-container:not(.no-display) .stream-list-subsection-header", + ).not(".hidden-by-filters"); // Remove rows hidden due to being inactive or muted. const $inactive_or_muted_rows = $( - "#streams_list .stream-list-section-container:not(.showing-inactive-or-muted)" + + "#streams_list:not(.is_searching) .stream-list-section-container:not(.showing-inactive-or-muted)" + " .inactive-or-muted-in-channel-folder .bottom_left_row:not(.hidden-by-filters)", ); // Remove rows in collapsed sections / folders. @@ -604,21 +615,30 @@ export function set_event_handlers(): void { const $search_input = $(".left-sidebar-search-input").expectOne(); function keydown_enter_key(): void { - const row = left_sidebar_cursor.get_key(); + const $row = left_sidebar_cursor.get_key(); - if (row === undefined) { + if ($row === undefined) { // This can happen for empty searches, no need to warn. return; } - if ($(row).hasClass("stream-list-toggle-inactive-or-muted-channels")) { - $(row).trigger("click"); + if ($row[0]!.id === "views-label-container") { + $row.find("#toggle-top-left-navigation-area-icon").trigger("click"); + return; + } + + if ( + $row.hasClass("stream-list-toggle-inactive-or-muted-channels") || + $row[0]!.id === "direct-messages-section-header" || + $row.hasClass("stream-list-subsection-header") + ) { + $row.trigger("click"); return; } // Clear search input so that there is no confusion // about which search input is active. $search_input.val(""); - const $nearest_link = $(row).find("a").first(); + const $nearest_link = $row.find("a").first(); if ($nearest_link.length > 0) { // If the row has a link, we click it. $nearest_link[0]!.click(); diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css index 3cf539ee10..07ac6076bd 100644 --- a/web/styles/left_sidebar.css +++ b/web/styles/left_sidebar.css @@ -753,10 +753,15 @@ } } -.highlighted_row.top_left_row, -.highlighted_row.bottom_left_row { - outline: 2px solid var(--color-outline-focus); - outline-offset: -2px; +#views-label-container, +#direct-messages-section-header, +.stream-list-subsection-header, +.top_left_row, +.bottom_left_row { + &.highlighted_row { + outline: 2px solid var(--color-outline-focus); + outline-offset: -2px; + } } #stream_filters