A11y improvements for user profile and admin user groups/projects page

Chad Lavimoniererequested to merge
518773-user-profile-link-header-a11y into master

What does this MR do and why?

  • hide project avatar from screen reader when it is a duplicative link to save screen reader users time and reduce navigational complexity
  • add aria labels to star, fork, MR and issue links
  • ensure "View all" links for activity and personal projects on user profile page have unique accessible link text
  • Ensure proper hierarchy of headings on user profile page and admin user group/projects pages (these two pages share common components)

References

Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.

MR acceptance checklist

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

Screenshots or screen recordings

N/A, no visual change

How to set up and validate locally

  1. Check out this branch
  2. in the GDK, visit https://gdk.test:3000/root (or any other user profile)
  3. Use devtools to inspect the View all links on the Activity section and the personal projects sections. You will find that each has a unique aria-label
  4. Use devtools to inspect the avatar of a personal project (if there are none, create one). You will see that the avatar has aria-hidden="true" and a tabindex of -1. This avatar link is clickable for mouse users but not focusable or read by the screen reader. This is because this is a duplicate of the text link that immediately follows it in tab order. By removing this avatar link from tab order and hiding it from screen readers, a duplicate link on the page is removed for screen reader users, speeing up their navigation and reducing navigational complexity.
  5. Use devtools to inspect the stars, forks, MRs and issues links for a personal project. You will see that each has a unique aria label that helps a screen reader user understand what the link represents.
  6. You can use devtools or a chrome extension like HeadingsMapper to see that the hierarchy of headings on this page has been adjusted. The title of each personal project was previously an H2, but now they are an H3 that nests under the Personal projects H2 heading.
  7. Now navigate to https://gdk.test:3000/admin/users/root/projects (or the groups and projects page in the admin for any other user)
  8. Use devtools or a chrome extension like HeadingsMapper to inspect the hierarchy of headings on the page. You will see that now there are 3 h2 headings -- Groups, Personal projects and Joined projects. The title of each personal project will also render as an h3 heading nested under the Personal projects h2 header.

Related to #518773

Merge request reports