Skip to content

feat(SVGNav): Enhance nav accessibility

Jeremy Elderrequested to merge
indicate-current-page into main

Purpose

Improve both the visual and programmatic indicators of the current page.

  • Add navigation landmark.
  • Use selected class and `aria-selected="true" for button that relates to the current page.

Note

The recent updates to the SVG Viewer leveraged GitLab UI and Tailwind while trying to avoid custom styles. Along those lines, this uses what's available for indicating a selected button by using the selected class. Although the visual result is probably not what we'd want in a navigation setting, this MR is a first step towards making the navigation more accessible while using currently available styles.

Screenshots

Before After
CleanShot_2025-04-24_at_08.54.25 CleanShot_2025-04-24_at_08.55.34

Merge request reports