From a6329484823b1a218a49a745f26391c852ad3fcd Mon Sep 17 00:00:00 2001 From: bedo Date: Tue, 29 Oct 2024 11:43:01 +0300 Subject: [PATCH] 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
  • elements stay in the same order in DOM, so regarldess of current home view, keyboard navigation always follows the order in which the
  • elements appear in DOM. Changes: - Reorder
  • navigation elements in DOM based on current home view. - Remove tabindex=0 from elements, because they are now ordered correctly in DOM. - Add (tabindex="0" role="button") to the collapsable VIEWS, to be keyboard accessibile. --- web/src/left_sidebar_navigation_area.ts | 80 +++++++++++++------------ web/src/sidebar_ui.ts | 3 + web/styles/left_sidebar.css | 17 ------ web/templates/left_sidebar.hbs | 18 +++--- 4 files changed, 54 insertions(+), 64 deletions(-) diff --git a/web/src/left_sidebar_navigation_area.ts b/web/src/left_sidebar_navigation_area.ts index 2cbafff439..c7bf676030 100644 --- a/web/src/left_sidebar_navigation_area.ts +++ b/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 { - // Remove class and tabindex from current home view - const $current_home_view = $(".selected-home-view"); - $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); +export function get_view_rows_by_view_name(view: string): JQuery { + if (view === settings_config.web_home_view_values.all_messages.code) { + return $(".top_left_all_messages"); } - 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
  • 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 $all_messages_sidebar_menu_icon = $(".all-messages-sidebar-menu-icon"); - if (new_home_view === settings_config.web_home_view_values.all_messages.code) { - $recent_view_sidebar_menu_icon.removeClass("hide"); - $all_messages_sidebar_menu_icon.addClass("hide"); - } else if (new_home_view === settings_config.web_home_view_values.recent_topics.code) { - $recent_view_sidebar_menu_icon.addClass("hide"); - $all_messages_sidebar_menu_icon.removeClass("hide"); - } else { - // Inbox is home view. - $recent_view_sidebar_menu_icon.removeClass("hide"); - $all_messages_sidebar_menu_icon.removeClass("hide"); - } - handle_home_view_order(new_home_view); + const $current_home_view = $(".selected-home-view"); + const $new_home_view = get_view_rows_by_view_name(new_home_view); + const res = unread.get_counts(); + + // Remove class from current home view + $current_home_view.removeClass("selected-home-view"); + + // Add the class to the matching home view + $new_home_view.addClass("selected-home-view"); + + reorder_left_sidebar_navigation_list(new_home_view); + update_dom_with_unread_counts(res, true); } export function initialize(): void { diff --git a/web/src/sidebar_ui.ts b/web/src/sidebar_ui.ts index 159bed9a08..4095dae166 100644 --- a/web/src/sidebar_ui.ts +++ b/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 { diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css index ceaa75c93e..d2b43f417e 100644 --- a/web/styles/left_sidebar.css +++ b/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, diff --git a/web/templates/left_sidebar.hbs b/web/templates/left_sidebar.hbs index c3e3eeff5a..bdf2622adc 100644 --- a/web/templates/left_sidebar.hbs +++ b/web/templates/left_sidebar.hbs @@ -1,12 +1,12 @@