GlAvatarLabeled: allow tooltips for elements in meta slot

This issue is related to gitlab-org/gitlab#325712 (comment 575847919)

The GlAvatarLabeled component has a meta slot that can be used to add things like badges.

Screen_Shot_2021-05-17_at_8.50.17_AM

Since the meta slot is inside of the anchor tag we can't add tooltips to the badges because then we will get tooltips overlapping with popovers and it looks a little weird. Also there may be a11y implications of having a tooltip inside of an anchor tag.

Screen_Shot_2021-05-17_at_8.31.57_AM

Possible solutions

1️⃣ Change GlAvatarLabeled to only have an anchor tag around the user's name.

Change the anchor tag so it only wraps the user's name. Add some JavaScript functionality to make it so the avatar and username act like an anchor tag when hovered/clicked but are not focusable.

Pros:

  • Only one focusable anchor tag. User's using keyboard navigation won't have to tab through duplicate anchor tags.

Cons:

  • Feels a bit hacky

2️⃣ Use 3 separate anchor tags.

Use 3 separate anchor tags around avatar, user's name, and username that go to the same place

Pros

  • Doesn't require any custom JavaScript

Cons

  • I am fairly certain this would be pretty frustrating for people using keyboard navigation.

3️⃣ Leave as-is and don't worry about the overlapping of the tooltips and popovers

Pros

  • No changes needed

Cons

  • Looks a bit weird in my opinion
  • Tooltip text may not be accessible if it is inside of an anchor tag (unconfirmed)
Edited by Daniel Mora