Refactor branch graph to support keyboard and screen reader users

What does this MR do and why?

Refactor branch graph to support keyboard focus and events

The branch graph previously supported mouse hover and click events to show the tooltip and open a commit in a new tab, respectively. The graph did not support keyboard focus or keypress events to manage these interactions.

Add keyboard focus, blur, and keypress custom event listeners. Update each commit link to have a unique accessible name. Refactor circle helper methods to avoid duplication in code.

Changelog: fixed

My thinking

I broke this MR up along several fault lines. Specifically I solved for the keyboard navigation problem first, then went back and refactored for performance, and finally tweaked the announcements for screen readers.

It might be easier to review the MR by individual commits to understand the thinking at each step of the work.

Screen reader testing

Verified this is working by TAB and (mostly) by arrow keys or chords in:

• MacOS - Safari + VoiceOver
• Win11 - Chrome + NVDA, JAWS
• Win11 - Edge + Narrator
• Win11 - Firefox + NVDA (arrowing has the source order jumbled, but TAB works great)

References

• MR closes https://gitlab.com/gitlab-org/gitlab/-/issues/511850
• MR closes https://gitlab.com/gitlab-org/gitlab/-/issues/511709
• MR closes https://gitlab.com/gitlab-org/gitlab/-/issues/511647
• MR refactors https://gitlab.com/gitlab-org/gitlab/-/issues/511609

Screenshots or screen recordings

branch-graph-links-sr

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. Press TAB again and verify focus is set on the first circle, which should now be a valid link
9. Circles should all be reachable by pressing TAB
10. Circles should all announce "Merge request message, by author name. Opens in a new window."
11. Circles will not announce the tooltip with more information yet. That'll be a future MR.

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.