Resolve homepage tooltip covering sidebar contents
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
- Open navigation on small viewport
- Ensure tooltip does not cover interactive elements
Related to #450874