left_sidebar: Fix keyboard accessibility.

Fixes #31823

When home view changes, CSS just puts the selected home view
at the top of the left_sidebar navigation list (expanded)
or to the left (collapsed), but the rendered <li> elements
stay in the same order in DOM, so regarldess of current home view,
keyboard navigation always follows the order in which the <li>
elements appear in DOM.

Changes:
- Reorder <li> navigation elements in DOM based on current home view.

- Remove tabindex=0 from <a> elements, because they are now ordered
correctly in DOM.

- Add (tabindex="0" role="button") to the <i> collapsable VIEWS, to be
keyboard accessibile.

web/src/left_sidebar_navigation_area.ts

@@ -207,48 +207,52 @@ export function highlight_all_messages_view(): void {
     }, 0);
 }
 
-function handle_home_view_order(home_view: string): void {
+export function get_view_rows_by_view_name(view: string): JQuery {
-    // Remove class and tabindex from current home view
+    if (view === settings_config.web_home_view_values.all_messages.code) {
-    const $current_home_view = $(".selected-home-view");
+        return $(".top_left_all_messages");
-    $current_home_view.removeClass("selected-home-view");
-    $current_home_view.find("a").removeAttr("tabindex");
-
-    const $all_messages_rows = $(".top_left_all_messages");
-    const $recent_views_rows = $(".top_left_recent_view");
-    const $inbox_rows = $(".top_left_inbox");
-
-    const res = unread.get_counts();
-
-    // Add the class and tabindex to the matching home view
-    if (home_view === settings_config.web_home_view_values.all_messages.code) {
-        $all_messages_rows.addClass("selected-home-view");
-        $all_messages_rows.find("a").attr("tabindex", 0);
-    } else if (home_view === settings_config.web_home_view_values.recent_topics.code) {
-        $recent_views_rows.addClass("selected-home-view");
-        $recent_views_rows.find("a").attr("tabindex", 0);
-    } else {
-        // Inbox is home view.
-        $inbox_rows.addClass("selected-home-view");
-        $inbox_rows.find("a").attr("tabindex", 0);
     }
-    update_dom_with_unread_counts(res, true);
+
+    if (view === settings_config.web_home_view_values.recent_topics.code) {
+        return $(".top_left_recent_view");
+    }
+
+    return $(".top_left_inbox");
+}
+
+// Reorder <li> views elements in the DOM based on the current home_view.
+// Called twice: on initial page load and when home_view changes.
+export function reorder_left_sidebar_navigation_list(home_view: string): void {
+    const $left_sidebar = $("#left-sidebar-navigation-list");
+    const $left_sidebar_condensed = $("#left-sidebar-navigation-list-condensed");
+
+    // First, re-order the views back to the original default order, to preserve the relative order.
+    for (const key of Object.keys(settings_config.web_home_view_values).reverse()) {
+        if (key !== home_view) {
+            const $view = get_view_rows_by_view_name(key);
+            $view.eq(1).prependTo($left_sidebar);
+            $view.eq(0).prependTo($left_sidebar_condensed);
+        }
+    }
+
+    // Detach the selected home_view and inserts it at the beginning of the navigation list.
+    const $selected_home_view = get_view_rows_by_view_name(home_view);
+    $selected_home_view.eq(1).prependTo($left_sidebar);
+    $selected_home_view.eq(0).prependTo($left_sidebar_condensed);
 }
 
 export function handle_home_view_changed(new_home_view: string): void {
-    const $recent_view_sidebar_menu_icon = $(".recent-view-sidebar-menu-icon");
+    const $current_home_view = $(".selected-home-view");
-    const $all_messages_sidebar_menu_icon = $(".all-messages-sidebar-menu-icon");
+    const $new_home_view = get_view_rows_by_view_name(new_home_view);
-    if (new_home_view === settings_config.web_home_view_values.all_messages.code) {
+    const res = unread.get_counts();
-        $recent_view_sidebar_menu_icon.removeClass("hide");
+
-        $all_messages_sidebar_menu_icon.addClass("hide");
+    // Remove class from current home view
-    } else if (new_home_view === settings_config.web_home_view_values.recent_topics.code) {
+    $current_home_view.removeClass("selected-home-view");
-        $recent_view_sidebar_menu_icon.addClass("hide");
+
-        $all_messages_sidebar_menu_icon.removeClass("hide");
+    // Add the class to the matching home view
-    } else {
+    $new_home_view.addClass("selected-home-view");
-        // Inbox is home view.
+
-        $recent_view_sidebar_menu_icon.removeClass("hide");
+    reorder_left_sidebar_navigation_list(new_home_view);
-        $all_messages_sidebar_menu_icon.removeClass("hide");
+    update_dom_with_unread_counts(res, true);
-    }
-    handle_home_view_order(new_home_view);
 }
 
 export function initialize(): void {

web/src/sidebar_ui.ts

@@ -6,6 +6,7 @@ import render_right_sidebar from "../templates/right_sidebar.hbs";
 
 import {buddy_list} from "./buddy_list";
 import {media_breakpoints_num} from "./css_variables";
+import {reorder_left_sidebar_navigation_list} from "./left_sidebar_navigation_area";
 import {localstorage} from "./localstorage";
 import * as message_lists from "./message_lists";
 import * as message_viewport from "./message_viewport";
@@ -228,6 +229,8 @@ export function initialize_left_sidebar(): void {
     });
 
     $("#left-sidebar-container").html(rendered_sidebar);
+    // make sure home-view and left_sidebar order persists
+    reorder_left_sidebar_navigation_list(user_settings.web_home_view);
 }
 
 export function initialize_right_sidebar(): void {

web/styles/left_sidebar.css

@@ -676,11 +676,7 @@ li.active-sub-filter {
 
 #left-sidebar-navigation-list {
     margin-bottom: var(--left-sidebar-sections-vertical-gutter);
-    /* We display this as a grid only to control
-       the order of home views, using a single
-       named grid area. */
     display: grid;
-    grid-template-areas: "selected-home-view";
     line-height: var(--line-height-sidebar-row);
     /* Explicitly ensure parity with the line-height
        for the sake of low-resolution screens, whose
@@ -698,19 +694,6 @@ li.active-sub-filter {
     }
 }
 
-.selected-home-view {
-    /* This bumps the selected view to the
-       top of the grid (expanded list).
-       Others items will auto place in the
-       remaining auto-generated grid rows. */
-    grid-area: selected-home-view;
-    /* The condensed view is a flexbox, so
-       here we'll use a negative order to
-       bump the selected home view to the
-       start of the flexbox (lefthand side). */
-    order: -1;
-}
-
 .top_left_starred_messages .unread_count,
 .top_left_drafts .unread_count,
 .top_left_scheduled_messages .unread_count,

web/templates/left_sidebar.hbs

@@ -1,12 +1,12 @@
 <div class="left-sidebar" id="left-sidebar" role="navigation">
     <div id="left-sidebar-navigation-area" class="left-sidebar-navigation-area">
         <div id="views-label-container" class="showing-expanded-navigation {{#if is_spectator}}remove-pointer-for-spectator{{/if}}">
-            <i id="toggle-top-left-navigation-area-icon" class="zulip-icon zulip-icon-heading-triangle-right sidebar-heading-icon rotate-icon-down views-tooltip-target hidden-for-spectators" aria-hidden="true"></i>
+            <i id="toggle-top-left-navigation-area-icon" class="zulip-icon zulip-icon-heading-triangle-right sidebar-heading-icon rotate-icon-down views-tooltip-target hidden-for-spectators" aria-hidden="true" tabindex="0" role="button"></i>
             {{~!-- squash whitespace --~}}
             <h4 class="left-sidebar-title"><span class="views-tooltip-target">{{t 'VIEWS' }}</span></h4>
             <ul id="left-sidebar-navigation-list-condensed" class="filters">
                 <li class="top_left_inbox left-sidebar-navigation-condensed-item {{#if is_inbox_home_view}}selected-home-view{{/if}}">
-                    <a href="#inbox" {{#if is_inbox_home_view}}tabindex="0"{{/if}} class="tippy-views-tooltip left-sidebar-navigation-icon-container" data-tooltip-template-id="inbox-tooltip-template">
+                    <a href="#inbox" class="tippy-views-tooltip left-sidebar-navigation-icon-container" data-tooltip-template-id="inbox-tooltip-template">
                         <span class="filter-icon">
                             <i class="zulip-icon zulip-icon-inbox" aria-hidden="true"></i>
                         </span>
@@ -14,7 +14,7 @@
                     </a>
                 </li>
                 <li class="top_left_recent_view left-sidebar-navigation-condensed-item {{#if is_recent_view_home_view}}selected-home-view{{/if}}">
-                    <a href="#recent" {{#if is_recent_view_home_view}}tabindex="0"{{/if}} class="tippy-views-tooltip left-sidebar-navigation-icon-container" data-tooltip-template-id="recent-conversations-tooltip-template">
+                    <a href="#recent" class="tippy-views-tooltip left-sidebar-navigation-icon-container" data-tooltip-template-id="recent-conversations-tooltip-template">
                         <span class="filter-icon">
                             <i class="zulip-icon zulip-icon-recent" aria-hidden="true"></i>
                         </span>
@@ -22,7 +22,7 @@
                     </a>
                 </li>
                 <li class="top_left_all_messages left-sidebar-navigation-condensed-item {{#if is_all_messages_home_view}}selected-home-view{{/if}}">
-                    <a href="#feed" {{#if is_all_messages_home_view}}tabindex="0"{{/if}} class="home-link tippy-views-tooltip left-sidebar-navigation-icon-container" data-tooltip-template-id="all-message-tooltip-template">
+                    <a href="#feed" class="home-link tippy-views-tooltip left-sidebar-navigation-icon-container" data-tooltip-template-id="all-message-tooltip-template">
                         <span class="filter-icon">
                             <i class="zulip-icon zulip-icon-all-messages" aria-hidden="true"></i>
                         </span>
@@ -52,7 +52,7 @@
         </div>
         <ul id="left-sidebar-navigation-list" class="left-sidebar-navigation-list filters">
             <li class="top_left_inbox top_left_row hidden-for-spectators {{#if is_inbox_home_view}}selected-home-view{{/if}}">
-                <a href="#inbox" {{#if is_inbox_home_view}}tabindex="0"{{/if}} class="left-sidebar-navigation-label-container tippy-views-tooltip" data-tooltip-template-id="inbox-tooltip-template">
+                <a href="#inbox" class="left-sidebar-navigation-label-container tippy-views-tooltip" data-tooltip-template-id="inbox-tooltip-template">
                     <span class="filter-icon">
                         <i class="zulip-icon zulip-icon-inbox" aria-hidden="true"></i>
                     </span>
@@ -63,7 +63,7 @@
                 <span class="arrow sidebar-menu-icon inbox-sidebar-menu-icon hidden-for-spectators"><i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i></span>
             </li>
             <li class="top_left_recent_view top_left_row {{#if is_recent_view_home_view}}selected-home-view{{/if}}">
-                <a href="#recent" {{#if is_recent_view_home_view}}tabindex="0"{{/if}} class="left-sidebar-navigation-label-container tippy-views-tooltip" data-tooltip-template-id="recent-conversations-tooltip-template">
+                <a href="#recent" class="left-sidebar-navigation-label-container tippy-views-tooltip" data-tooltip-template-id="recent-conversations-tooltip-template">
                     <span class="filter-icon">
                         <i class="zulip-icon zulip-icon-recent" aria-hidden="true"></i>
                     </span>
@@ -71,12 +71,12 @@
                     <span class="left-sidebar-navigation-label">{{t 'Recent conversations' }}</span>
                     <span class="unread_count"></span>
                 </a>
-                <span class="arrow sidebar-menu-icon recent-view-sidebar-menu-icon hidden-for-spectators {{#if is_recent_view_home_view}}hide{{/if}}">
+                <span class="arrow sidebar-menu-icon recent-view-sidebar-menu-icon hidden-for-spectators">
                     <i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i>
                 </span>
             </li>
             <li class="top_left_all_messages top_left_row {{#if is_all_messages_home_view}}selected-home-view{{/if}}">
-                <a href="#feed" {{#if is_all_messages_home_view}}tabindex="0"{{/if}} class="home-link left-sidebar-navigation-label-container tippy-views-tooltip" data-tooltip-template-id="all-message-tooltip-template">
+                <a href="#feed" class="home-link left-sidebar-navigation-label-container tippy-views-tooltip" data-tooltip-template-id="all-message-tooltip-template">
                     <span class="filter-icon">
                         <i class="zulip-icon zulip-icon-all-messages" aria-hidden="true"></i>
                     </span>
@@ -84,7 +84,7 @@
                     <span class="left-sidebar-navigation-label">{{t 'Combined feed' }}</span>
                     <span class="unread_count"></span>
                 </a>
-                <span class="arrow sidebar-menu-icon all-messages-sidebar-menu-icon hidden-for-spectators {{#if is_all_messages_home_view}}hide{{/if}}">
+                <span class="arrow sidebar-menu-icon all-messages-sidebar-menu-icon hidden-for-spectators">
                     <i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i>
                 </span>
             </li>