Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
bedo 2024-10-29 11:43:01 +03:00 committed by Tim Abbott
parent e37f3cca07
commit a632948482
4 changed files with 54 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
web/src/left_sidebar_navigation_area.ts
View File

@ -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 <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 $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 {

3
web/src/sidebar_ui.ts
View File

@ -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 {

17
web/styles/left_sidebar.css
View File

@ -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,

18
web/templates/left_sidebar.hbs
View File

@ -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>