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.ts to fetch and manage release data with locale-aware caching
  • Template Integration: Integrated dropdown into both ReleasesContainer.vue (V2) and ReleasesWhatsNewV1.vue templates
  • Internationalization: Added recentlyReleasedAnnotation translation key across all supported locales (EN, DE, ES, FR, IT, JA, PT-BR)
  • TypeScript: Defined ReleaseListItem type 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:

  1. Navigate to /releases/whats-new page
  2. Verify dropdown displays current GitLab version
  3. Click dropdown to open version list
  4. Test keyboard navigation (Arrow keys, Home, End, Enter, Escape)
  5. Verify "recently released" annotation appears on latest version
  6. Select different versions and verify navigation works
  7. Test with screen reader for accessibility

Review App

Production Review app Screenshot
https://about.gitlab.com/releases/whats-new /releases/whats-new Screenshot_2026-04-29_at_2.34.56_PM
https://about.gitlab.com/releases/whats-new /releases/whats-new/18-10/ Screenshot_2026-04-29_at_2.35.27_PM

3. Deployment Steps

No special deployment steps required. Standard deployment process applies.

Edited by Eliezer Toribio

Merge request reports

Loading