Skip to content

Navigation trap focus within navigation when displayed over page content

Scott de Jonge requested to merge 426760-nav-eval-small-breakpoint-behavior into master

What does this MR do and why?

At smaller breakpoints, when the nav is expanded focus can traverse to elements that it covers. Additionally, it can't be closed with esc. Restrict focus within the navigation. Ensure that the esc can close the nav. Since the sidebar toggle button sidebar.svg can also close the navigation, an additional × button is not required.

Screenshots or screen recordings

Before After
CleanShot_2023-11-07_at_16.04.58 CleanShot_2023-11-07_at_16.04.08

Desktop (XL up) unchanged

CleanShot_2023-11-07_at_16.03.19

How to set up and validate locally

In new navigation when displayed over content (below xl/1200px breakpoint) keyboard users should be able to navigate with tab and close with esc:

  1. Use esc key to collapse sidebar
  2. Use tab between content
    1. It should return to start of navigation when it reaches the end (instead of moving to main page content)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #426760 (closed)

Edited by Scott de Jonge

Merge request reports