Add tooltip and accessibility label for profile cover buttons

What does this MR do?

See #29930 (closed)

Are there points in the code the reviewer needs to double check?

Nope

Why was this MR needed?

This fixes an accessibility issue, and we're constantly looking for such problems across GitLab.

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• [ ] Documentation created/updated
• [ ] API support added
• Tests
  • [ ] Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes #29930 (closed)

added 1 commit

• 6b328ea0 - [ci skip] Add MR number

Compare with previous version

marked the task Changelog entry added, if necessary as completed

marked the task Conform by the merge request performance guides as completed

marked the task Conform by the style guides as completed

marked the task Branch has no merge conflicts with master (if it does - rebase it please) as completed

marked the task Squashed related commits together as completed

@ClemMakesApps can you take a look at this? Pipeline #7196507 is passed.

assigned to @ClemMakesApps

marked the task All builds are passing as completed

aria-label makes sense to me. I'm not sure about whether tooltips are necessary though.

@tauriedavis wdyt?

assigned to @tauriedavis

@ClemMakesApps I added tooltips to make it consistent with rest of the places where we have Subscribe and/or Edit buttons with only icons and not label.

Can you link an example @kushalpandya?

We use tooltips for icons in the nav bar:

But we don't currently have tooltips for icon buttons:

@pedroms Lets determine a guideline for this and add it to the ux guide.

assigned to @pedroms

@ClemMakesApps

• Subscribe button on /dashboard/activity & /issues pages.
• Go to any project where your role is master, open /settings/ci_cd then Triggers, edit trigger token button.
• Action buttons pipelines index page /pipelines.

Thanks @tauriedavis, yes there are places where icon buttons are missing tooltips and/or a11y support, it would be great to have a guideline in place.

Good observation @kushalpandya

Just noticed there are tooltips here too. Let's go ahead with this MR and then we can add it to our guidelines

assigned to @ClemMakesApps

approved this merge request

LGTM, Thanks @tauriedavis @kushalpandya

merged

mentioned in commit d568861d

mentioned in merge request !10220 (merged)

@tauriedavis sounds good! Created https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/10220 for improving the UX guide on tooltips. Among other things:

A tooltip should be used:

• When there isn’t enough space to show the information
• When it isn’t critical for the user to see the information
• For icons that don’t have a label