Add alt text descriptions to branch graph and avatar

Trevor Piercerequested to merge
tpierce-511609-detailed-alt-text into master

What does this MR do and why?

Add alt text descriptions to branch graph and avatar

The branch graph avatars did not have alt text to support screen readers. Added text to identify the author for each commit to screen readers.

Changelog: fixed

References

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/511609

Screenshots or screen recordings

figure-long-desc

branch-graph-avatar-desc

How to set up and validate locally

  1. See comment about local config change from @psjakubowska on the original issue to get branch graph running in GDK
  2. Start local GDK as normal
  3. Navigate to a project like Twitter typeahead that has a lot of good branch history
  4. Then add -/network/master?ref_type=heads to the end of your local URL
  5. OR select Code > Repository Graph in the left nav
  6. Start a screen reader of your choosing. Please select from one of the preferred pairings:
    • VoiceOver + Safari on MacOS
    • NVDA + Chrome|Firefox on Win11
    • JAWS + Chrome on Win11
  7. Navigate to the branch graph. You should be able to TAB to the containing DIV.
  8. Verify the accessible description is read aloud.
  9. Now you'll have to Down_Arrow or Ctrl + Opt + Left_Arrow through the graph calendar until you get to the avatars
  10. Verify the avatar image is read as "Authored by PERSON_NAME"

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