Resolve "[Whats New V2] Add Dropdown to Navigate GitLab Versions"
Here's an updated merge request description based on the changes:
1. Change Summary
This MR adds a dropdown component to navigate between GitLab versions in the "What's New" releases section, resolving issue #1507.
Key Changes:
- New Component: Created
MonthlyReleasesDropdown.vue- a fully accessible dropdown with keyboard navigation (Arrow keys, Home/End, Enter/Space, Escape, Tab) - Composable: Added
useReleasesWhatsNewList.tsto fetch and manage release data with locale-aware caching - Template Integration: Integrated dropdown into both
ReleasesContainer.vue(V2) andReleasesWhatsNewV1.vuetemplates - Internationalization: Added
recentlyReleasedAnnotationtranslation key across all supported locales (EN, DE, ES, FR, IT, JA, PT-BR) - TypeScript: Defined
ReleaseListItemtype for type-safe release data handling
Impact:
- Users can now easily navigate between different GitLab release versions
- Improved accessibility with ARIA attributes and full keyboard support
- Disabled state handling for releases with no content
- Visual indicator for the most recently released version
Related: Closes #1507
2. QA Checklist
- Code Cleanup: Any messages, linter warnings, and/or deprecation warnings are cleaned up in the console
- Tech Debt: I have created, or documented, any fast follow-up work that needs to be done after this MR is merged
- Common Component Regression Check: I have verified all impacted pages of my common component updates have been checked for regressions and UX is aware of any wider-scoped visual changes
- Efficient Code Review: I have tested and reviewed my own changes thoroughly before assigning a reviewer
- Accessibility: Axe tools run and issues addressed
- Cross-browser compatibility: Works on Safari, Chrome, and Firefox
- Analytics and SEO: Compatible with Google Analytics and SEO tools
Testing Steps:
- Navigate to
/releases/whats-newpage - Verify dropdown displays current GitLab version
- Click dropdown to open version list
- Test keyboard navigation (Arrow keys, Home, End, Enter, Escape)
- Verify "recently released" annotation appears on latest version
- Select different versions and verify navigation works
- Test with screen reader for accessibility
Review App
| Production | Review app | Screenshot |
|---|---|---|
https://about.gitlab.com/releases/whats-new |
/releases/whats-new | ![]() |
https://about.gitlab.com/releases/whats-new |
/releases/whats-new/18-10/ | ![]() |
3. Deployment Steps
No special deployment steps required. Standard deployment process applies.
Edited by Eliezer Toribio

