Skip to content

Resolve homepage tooltip covering sidebar contents

Scott de Jonge requested to merge 450874-when-opening-the-sidebar-on-a-mobile-device-the-hide-sidebar-tooltip-is-always-shown into master

What does this MR do and why?

When the navigation is opened the focus is moved to the first interactive element (introduced in !147001 (merged)). Previously this was manually set to move focus between the sidebar toggle buttons ("Expand" in top-bar and "Collapse" in sidebar).

When focus is moved to the button, the "Homepage" tooltip is displayed. This covers Issues and Merge requests buttons, especially frustrating on touch devices where dismissing the tooltip requires a touch event elsewhere with limited non-interactive real-estate.

Considerations

  • Focus being moved to interactive element is important for screen-reader and keyboard user accessibility
  • Tooltips displaying on focus is important for screen-reader and keyboard user accessibility !133651 (merged)
  • It doesn't seem possible to differentiate between a keyboard/screen-reader focus event, compared to programatic focus within v-gl-tooltip directive
    • Likewise for touch events

Proposal

Refine underlying tooltip stickyness behaviours in #443679, iterate with small fix here to reduce tooltip from covering interactive elements.

Changes

  • Move "Homepage" tooltip to right of brand logo link
  • Remove focus being moved to "Collapse sidebar" button when sidebar is opened as the focus is now moved to the first interactive element always

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

Before After
CleanShot_2024-04-17_at_16.34.26 CleanShot_2024-04-17_at_16.18.20

How to set up and validate locally

  1. Open navigation on small viewport
  2. Ensure tooltip does not cover interactive elements

Related to #450874

Merge request reports