Add a11y labels to star, fork, MR and issue links on vue project list

Chad Lavimoniererequested to merge
518823-vue-project-stat-a11y-label into master

What does this MR do and why?

This MR adds the accessible aria labels already applied to HAML versions of project lists to the Vue version.

Why is this necessary?

In the current version on production, when a screen reader user focuses one of these links, the screen reader will announce "Stars" or "Forks" without context. Each of these links needs unique and descriptive accessible text. It is also common for a screen reader user to use the rotor in their screen reader of choice to browse a list of all of the links on a page, in which case the user would hear a repeated set of "Star" "Fork" "Merge requests" "Issues" with no indication of what they are links to.

References

Screenshots or screen recordings

Note

There is no visual difference in the before and after, only a semantic one. See the aria-label attribute for the four links inspected in devtools in the following screenshots

Before After
Screenshot_2025-03-13_at_12.45.04 Screenshot_2025-03-13_at_12.44.36

How to set up and validate locally

  1. Check out this branch
  2. Visit http://gdk.test:3000/dashboard/projects in the GDK
  3. Use devtools to inspect the star, fork, MR and issue links on a project listed on this page
  4. You will see that each has an aria-label attribute that is unique, and is formatted as $PROJECT has $COUNT $ITEM(s) (for example, Flightjs/Flight has 1 star or Gitlab Org/Gitlab Test has 9 open merge requests)

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #518823

Merge request reports