From 43eebbf9c6b6ef8f3da517bed2b2841143e27b1e Mon Sep 17 00:00:00 2001 From: Shubham Padia Date: Sun, 16 Jun 2024 11:46:37 +0000 Subject: [PATCH] scroll: Set tabIndex to -1 for simplebar content wrapper. Fixes #30403. Having tabIndex set to 0 led to keyboard focus being put on a scrollbar container, which led to users having to tab twice to skip a container. This commit also removes instances of tabIndex being set to -1 programatically for certain cases, since it is -1 by default now. This commit also removes `outline: none` for simplebar since that property is not needed anymore because the wrapper is not focusable anymore. --- web/src/inbox_ui.ts | 2 -- web/src/portico/help.js | 2 +- web/src/read_receipts.ts | 4 +++- web/src/scroll_util.ts | 2 +- web/src/user_profile.js | 1 - web/styles/zulip.css | 4 ---- web/templates/add_poll_modal.hbs | 2 +- web/templates/compose.hbs | 4 ++-- web/templates/dialog_widget.hbs | 2 +- web/templates/dropdown_list_container.hbs | 2 +- web/templates/giphy_picker.hbs | 2 +- web/templates/keyboard_shortcuts.hbs | 2 +- web/templates/left_sidebar.hbs | 2 +- web/templates/markdown_help.hbs | 2 +- web/templates/popovers/change_visibility_policy_popover.hbs | 2 +- web/templates/popovers/emoji/emoji_popover.hbs | 4 ++-- .../left_sidebar/left_sidebar_stream_actions_popover.hbs | 2 +- .../left_sidebar/left_sidebar_topic_actions_popover.hbs | 2 +- web/templates/popovers/message_actions_popover.hbs | 2 +- web/templates/popovers/navbar/navbar_gear_menu_popover.hbs | 2 +- web/templates/popovers/navbar/navbar_help_menu_popover.hbs | 2 +- .../popovers/navbar/navbar_personal_menu_popover.hbs | 2 +- web/templates/popovers/user_group_info_popover.hbs | 2 +- web/templates/right_sidebar.hbs | 2 +- web/templates/search_operators.hbs | 2 +- web/templates/settings/active_user_list_admin.hbs | 2 +- web/templates/settings/alert_word_settings.hbs | 2 +- web/templates/settings/attachments_settings.hbs | 2 +- web/templates/settings/bot_list_admin.hbs | 2 +- web/templates/settings/data_exports_admin.hbs | 2 +- web/templates/settings/deactivated_users_admin.hbs | 2 +- web/templates/settings/default_streams_list_admin.hbs | 2 +- web/templates/settings/emoji_settings_admin.hbs | 2 +- web/templates/settings/invites_list_admin.hbs | 2 +- web/templates/settings/linkifier_settings_admin.hbs | 2 +- web/templates/settings/muted_users_settings.hbs | 2 +- web/templates/settings/playground_settings_admin.hbs | 2 +- web/templates/settings/profile_field_settings_admin.hbs | 2 +- web/templates/settings/user_topics_settings.hbs | 2 +- web/templates/settings_overlay.hbs | 4 ++-- web/templates/stream_settings/new_stream_users.hbs | 2 +- web/templates/stream_settings/stream_creation_form.hbs | 2 +- web/templates/stream_settings/stream_members.hbs | 2 +- web/templates/stream_settings/stream_settings_overlay.hbs | 4 ++-- web/templates/user_group_settings/new_user_group_users.hbs | 2 +- .../user_group_settings/user_group_creation_form.hbs | 2 +- web/templates/user_group_settings/user_group_members.hbs | 2 +- .../user_group_settings/user_group_settings_overlay.hbs | 4 ++-- web/templates/user_profile_modal.hbs | 2 +- 49 files changed, 53 insertions(+), 58 deletions(-) diff --git a/web/src/inbox_ui.ts b/web/src/inbox_ui.ts index 271a3651aa..e0ad60b258 100644 --- a/web/src/inbox_ui.ts +++ b/web/src/inbox_ui.ts @@ -685,8 +685,6 @@ export function complete_rerender(): void { // this, we scroll to top before restoring focus via revive_current_focus. $("html").scrollTop(0); setTimeout(() => { - // We don't want to focus on simplebar ever. - $("#inbox-list .simplebar-content-wrapper").attr("tabindex", "-1"); revive_current_focus(); }, 0); diff --git a/web/src/portico/help.js b/web/src/portico/help.js index ec12bea10b..2b237ca18a 100644 --- a/web/src/portico/help.js +++ b/web/src/portico/help.js @@ -94,7 +94,7 @@ function render_tabbed_sections() { }); } -new SimpleBar($(".sidebar")[0]); +new SimpleBar($(".sidebar")[0], {tabIndex: -1}); // Scroll to anchor link when clicked. Note that landing-page.js has a // similar function; this file and landing-page.js are never included diff --git a/web/src/read_receipts.ts b/web/src/read_receipts.ts index b4cda49cf9..9cdda320e7 100644 --- a/web/src/read_receipts.ts +++ b/web/src/read_receipts.ts @@ -89,7 +89,9 @@ export function show_user_list(message_id: number): void { $("#read_receipts_modal .read_receipts_list").html( render_read_receipts(context), ); - new SimpleBar($("#read_receipts_modal .modal__content")[0]!); + new SimpleBar($("#read_receipts_modal .modal__content")[0]!, { + tabIndex: -1, + }); } }, error(xhr) { diff --git a/web/src/scroll_util.ts b/web/src/scroll_util.ts index 161b9452ac..8afd3c5ac8 100644 --- a/web/src/scroll_util.ts +++ b/web/src/scroll_util.ts @@ -26,7 +26,7 @@ export function get_scroll_element($element: JQueryOrZJQuery): JQuery { } else if ("simplebar" in element.dataset) { // The SimpleBar mutation observer hasn’t processed this element yet. // Create the SimpleBar early in case we need to add event listeners. - return $(new SimpleBar(element).getScrollElement()!); + return $(new SimpleBar(element, {tabIndex: -1}).getScrollElement()!); } return $element; } diff --git a/web/src/user_profile.js b/web/src/user_profile.js index f6f24e02b8..f492d0702b 100644 --- a/web/src/user_profile.js +++ b/web/src/user_profile.js @@ -532,7 +532,6 @@ export function show_user_profile(user, default_tab_key = "profile-tab") { break; } setTimeout(() => { - $(".modal__body .simplebar-content-wrapper").attr("tabindex", "-1"); $(".modal__container .ind-tab").attr("tabindex", "-1"); $(".modal__container .ind-tab.selected").attr("tabindex", "0"); }, 0); diff --git a/web/styles/zulip.css b/web/styles/zulip.css index b869b20d16..7e4a879b35 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -2264,10 +2264,6 @@ body:not(.hide-left-sidebar) { } .simplebar-content-wrapper { - /* `simplebar-content-wrapper` has `tabindex=0` set, which makes it focusable - but we don't want it to have an outline when focused anywhere in the app. */ - outline: none; - /* This prevents the popover from closing once the top/bottom is reached */ overscroll-behavior: contain; } diff --git a/web/templates/add_poll_modal.hbs b/web/templates/add_poll_modal.hbs index ade571f1e0..08d5cd721d 100644 --- a/web/templates/add_poll_modal.hbs +++ b/web/templates/add_poll_modal.hbs @@ -5,7 +5,7 @@

{{t "Anyone can add more options after the poll is posted."}}

-