Skip to content

feat(GlAvatarLabeled): link avatar to avatar label link

Peter Hegman requested to merge 1433-glavatarlabeled-allow-tooltips-for-elements-in-meta-slot-2 into main

What does this MR do?

Related to #1433

It comes up every once and a while (at least for me) where we want to link an avatar but using GlAvatarLink doesn't work because we need content inline that is not part of the link. The use case I am currently working on is migrating the profile page to Vue, specifically the Personal projects section. If you look at it currently both the project name and the avatar link to the project but there are also sections that need to be inline and cannot be inside of a link. These sections include the visibility icon with a tooltip, the topics, and the project description. This has also come up gitlab#325712 (comment 575847919) where we want to add tooltips to badges but can't because they are inside of the link.

Currently GlAvatarLabeled supports labelLink and subLabelLink props. If you use the labelLink prop then the label is linked but the avatar still isn't which I think can be confusing to the user. We also probably don't want to add the same link to the avatar because then keyboard users need to tab through an extra link for no reason. This MR makes the avatar function like a link to mouse users but is ignored for keyboard users.

I realize that when using labelLink the hover/focus state doesn't work the same as GlAvatarLink. I tried for a long time to get this working but it is really hard. I don't think it is possible with pure CSS so I think we would need to use JavaScript and some mouse events to get this working which seems overkill. We could look into this further but would prefer to do this in a follow-up.

This MR also fixes the color of the label link to match GlAvatarLink.

Screen recordings

Before After
Screen_Recording_2023-04-10_at_11.00.09_AM Screen_Recording_2023-04-10_at_10.58.53_AM

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • [-] If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • [-] Label as security and @ mention @gitlab-com/gl-security/appsec
  • [-] Security reports checked/validated by a reviewer from the AppSec team

Accessibility

If this MR adds or modifies a component, take a few moments to review the following:

  • All actions and functionality can be done with a keyboard.
  • Links, buttons, and controls have a visible focus state.
  • All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
  • Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
  • Color combinations have sufficient contrast.
Edited by Peter Hegman

Merge request reports