left_sidebar: Allow user to navigation on section headers.

web/e2e-tests/message-basics.test.ts

@@ -304,6 +304,7 @@ async function test_search_venice(page: Page): Promise<void> {
     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<void>
     // 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<void>
 
     // 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

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();

web/styles/left_sidebar.css

@@ -752,10 +752,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