Skip to content

Collapse sidebar on ESC key if in overlay mode and focus when opened

Thomas Hutterer requested to merge 415856-super-sidebar-overlay-esc into master

What does this MR do and why?

Fixes #415856 (closed):

Clicking outside of the sidebar does not hide it between 768 and 1119px

The situation was that our new sidebar is supposed to show a clickable darkened background overlay when it is overlapping the background.

This overlapping happens on smaller screens where there isn't enough space to show it next to the page content. The breakpoint for this 1200px (xl).

But we show this clickable darkened background overlay, which closes the sidebar on click/touch, only under the md breakpoint (768px). This is a bug. We want the sidebar to be closable by click/touch on that dark background while in this "overlay mode".

Back in !128904 (closed) we discovered that this overlay mode has some other, unrelated open accessibility challenges. See !128904 (comment 1805351692) for the discussion.

Now this MR here fixes both the bad breakpoint in our CSS (to show the darkened clickable bg) and the mentioned accessibility issues:

  • While in overlay mode, pressing Esc now closes the sidebar.
  • When opening the sidebar into overlay mode (on windows below 1200px), it moves the focus to the sidebar. This prevents the situation where focus was on an element inside the page's content area, sidebar got opened via keyboard shortcut Ctrl+\, into overlay mode, but focus was still on the prev element, that was now behind the sidebar, under the darkened background.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
recording_1709913741 recording_1711367371

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  • Make your browser window width 1199px or smaller. This closes the sidebar, if it was open.
  • Now use Ctrl+\ to open the sidebar.
  • It should move focus into the sidebar.
  • You should see a dark background over the page content.
  • Tab to make sure focus stays within the sidebar.
  • Press Esc and the sidebar should close.

Now try that nothing got changed over 1200px:

  • Make your window larger. This should slide in the sidebar again. If so, close it.
  • Ctrl+\ should now not move focus into the sidebar.
  • Esc should not close it.

Now make sure the so-called "peek mode" of the sidebar stayed unchanged. Please test this again with 1199px:

  • Sidebar is closed. Hover your mouse to left window edge and keep it there. The sidbar slides out into "peek mode".
  • It should not get focus.
  • Esc should not close it.
Edited by Thomas Hutterer

Merge request reports