Update assignee and reviewer avatar content accessibility

Scott de Jongerequested to merge
sdejonge-reviewer-assignee-link-accessibility into master

What does this MR do and why?

  • Expose "Cannot merge" content to screen readers with aria-label
  • Hide duplicate content bound with alt to GlAvatar
  • Update shadow color to use design token value
  • Update spec test find method to use component find instead of CSS class

References

Discussion: gitlab-org/gitlab-services/design.gitlab.com#1642 (comment 2632277649)

Screenshots or screen recordings

Before After
CleanShot_2025-07-21_at_15.28.35_2x CleanShot_2025-07-21_at_15.48.57_2x

How to set up and validate locally

  1. Update project MR settings to set rules for merging https://gdk.test:3443/flightjs/Flight/-/settings/merge_requests
    1. In "Merge request approvals" set rule for root user only to merge, all other will be "Cannot merge"
  2. View MR with assignees and reviewer who can and cannot merge
    1. Also view issue with same reviewers to ensure links also work there
  3. Validate assignee and reviewer links read with "(link) Username" or "(link) Cannot merge Username"

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.

Merge request reports